KOTUKOTU-NOTES

現象

今回、苦労したのは ulのリスト表示。

↓これです。

これをつかうと、

編集画面ではこのように、リストのそれぞれの先頭に●が表示されているのですが、

プレビューをしてみると、●が表示されません。

解決方法

設定箇所

設定内容

追記した内容は以下の通りです。

.post-body ul li {
   list-style-type: disc;
}

そうすると、表示されるようになりました！
よかった😊

 画像の背景が白や薄い色だと、記事の背景色との境目があいまいで、ぼんやり見えてしまうので、画像を枠で囲いたいと思います。

記事の画像を枠で囲む

設定前

設定後

 

設定方法

設定を記述する位置

.post-body img の border:none;を好きなデザインに変えます。変更後に記載してある内容は一例です。

<b:if cond='data:blog.pageType == &quot;item&quot;'>の上と下に一つずつありますが下にある方です。

設定詳細

変更前

上記の設定をいれると、記事内の画像にすべて枠が付きます。でも、時々枠を外したい時があります。その時はImgタグにborder ="0"を入れます。

<img border="0" src="https://XXXX/XXX.png" />

Materiapollo標準の引用だと、少し見にくいのでカスタマイズしようかと思います。

引用のカスタマイズ

変更前

変更後

変更方法

追記する場所

 Posts（記事のCSSがある所？）の一番下、/* Sidebar Content----　というコメントの上に追記します。

 追記する内容

.post-body blockquote {
  background-color: #fafbfc;
  border: 1px solid #ccc;
  margin: 2em 0;
  padding: 20px 3.5em;
  position: relative;
}

.post-body blockquote::before, .post-body blockquote::after {
  color: #C8C8C8;
  font-family: serif;
  position: absolute;
  font-size: 300%;
}
.post-body blockquote::before {
  content: "\201C";
  line-height: 1.1;
  left: 10px;
  right: 10px;
  top: 0px;
}
.post-body blockquote::after {
  content: "\201E";
  line-height: 1.1;
  right: 10px;
  bottom: 0px;
}

引用文の前後にダブルクォーテーションのマークを表示させるようにしました。

こうします。（主見出しは、使わないので変えませんでした。）

 

.post-body h2{
    font-weight: bold;
    padding: .8em .5em;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    border-radius: 2px;
    line-height: 1.2;
    background: #00bcd4;
    color: #ffffff;
}
.post-body h3{
    font-weight: bold;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    padding: .5em 0;
    line-height: 1.2;
    border-bottom: solid 2px #00bcd4;

}
.post-body h4{

  background: transparent;
  border: 0;
  position: relative;
  padding: 0;
  padding-left: 1.4em;
  border-radius: 2px;
  margin: 0.5em 0 0.5em;
  margin-top: 1.5em;
  line-height: 1.25;
  font-weight: bold;
  box-sizing: border-box;
  overflow-wrap: break-word;
}
.post-body h4::before{
  height: 1em;
  border-radius: 50%;
  width: 1em;
  left: 0;
  top: 0;
background: #00bcd4;

content: "";
position: absolute;
}
 

 Bloggerを使うようになって、標準のテーマをつかってみたもののなんだかしっくりこない。無料でよいテーマないかな？と探していたところ、オシャレテーマを見つけましたよ。

Materiapolloというもので、シンプルでスタイリッシュな感じがよいです。

テーマ変更方法

テーマをダウンロードしてくる

このページへ行きます。

どっちでもいいんだろうけど、こっちにします。Downloadボタンを押す。

非固定じゃなない方は、したにスクロールした時に、↓このバーが画面上部に常に残るが、非固定版は、スクロールすると画面から消えてしまうという違いみたい。

ダウンロードしたファイルを解凍して、

テーマをアップロードする

テーマ→カスタマイズの横の▼をおす

さきほど解凍したファイルをアップロードする

できました。

忘れないように書いておきます。

赤字の箇所を変更。240は画像のサイズ。4:3は画像の横と縦の比 

 <img class='list-item-img' expr:src='data:post.thumbnailUrl'/>

を

<img class='list-item-img' expr:src='resizeImage(data:post.thumbnailUrl, 240, &quot;4:3&quot;)'/>

flex-basisはlist-item-imgのwidth、heightの大きい方のサイズにする。

.list-item-img{

 今までfirefoxを使っていたのですが、Edgeを使う事にしたので、fireFoxで使っていたお気に入りをEdgeでも使えるようにしました。

設定方法

 

Edgeのタブを上に表示したい

ずっとFirefoxを使っていたのですが、Edgeをつかうのもいいなと、最近使っています。

 Edgeでタブを新しく開いたら、左横に表示されてしまう…。

使いにくいので、上に表示するように設定します。

設定方法 

表示されました。

終わり。

 タイトルの通りの現象が起きたので、困ってしまいました。

解決したので、方法を書いときます。

現象

 

何回、選択しても枠がでない…。

原因

ブラウザの拡張機能が有効になっていなかったから

 

解決策

拡張機能を有効にして、PCを再起動する。

 

ツール→ブラウザー拡張機能→使用するブラウザ（今回はMicrosoftEdge）

 めちゃくちゃ悩んだが、解決してよかった。

よく使うファイルをすぐに起動できるように、デスクトップにショートカットを作成していました。

しかし、他のアプリを使用しているときに

デスクトップを表示する→ショートカットファイルをダブルクリックする→ファイルが開く 

ということをするのがちょっと手間だと思っていたため、何か方法がないか調べたところ、開きたいファイルのプロパティにショートカットキーを登録しておくという方法がありました。

備忘録として書いておきたいと思います。

設定手順

例としてchromeがショートカットキー　ctrl + alt + 9 で起動できるように設定します。
（文字、数字はそれだけではショートカットキーにできず、ctrl+altが必要）

起動したいアプリのショートカットファイルを作成

 例）Cromeの場合

左下のスタートをクリックし、右上の「すべてのアプリ」をクリック

※「検索するには、ここに～」で検索した結果だとショートカット作成できないので「すべてのアプリ」から探す。 

 

ショートカットファイルのプロパティを開く

 

ショートカットキーを登録する

ショートカットキー欄に記入します。

ここに記入したキーを押すと、アプリ（またはファイル）を起動することができるようになります。

登録するキーは、

ファンクションキー（F1～F12）だと、１つのキーのみ。
その他の数字やアルファベットキーのみの登録はできないようで、Ctrl + Alt と合わせての登録になるようです。

これで完成！

確かにctrl + alt + 9を押すと、開きたいファイルが開く！