Blogger テンプレート QooQ カスタマイズ 03

まだカスタマイズも半分ぐらいだと思います。

パンくずリストの記号変更・Google Material Icons 導入

記号変更

MERMONAさんのブログ記事の通りやるとパンくずリストの記号を変更することができます。
HTML編集で

<b:includable id='mybreadcrumb' var='posts'>

を検索、その下から30～40行程度に記述してある4つの「/」を「HTLM記号」を使って変更します。
「>」は「›」、 
「半角スペース」は「 」です。
「|」はそのまま「|」でOK
わたしは 2番目以降の「/」を「|」にして「半角スペース」で位置調整しました。

Google Material Icons 導入

「Google Material Icons の読み込み」

下記のコードをHTMLのhead内に追記することでアイコンが使用できるようになります。

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>

「icon設置」

<i class='material-icons'>アイコン名</i>

をHTML編集で設置したい場所に記述します。
ここでは上の検索範囲の「ホーム」と記述されているところを以下のコードに変更してアイコンにします。

<i class='material-icons'>home</i>

アイコン名は 一覧ページ で探します。

「調整」

最後にHTML編集のCSS記述部「パンくずリスト」で

/* アイコン調整 */
#Blog1 > div.breadcrumbs > span > a > span > i {
  position: relative;
  top: 5px;
}

これで「ホーム」を Google Material Icons (home) のアイコンに変更できました。

パンくずリストにすべてのラベルを表示

QooQ ではパンくずリストと関連記事はラベルで管理されています。
デフォルトの状態だと、複数ラベルをつけた場合、最後のラベルのみが表示される仕様のようです。
インドアな日々」さんのブログを参考にすべてのラベルを表示させます。

すべてのラベルを表示

HTML編集で 以下のコードを検索

<b:if cond='data:blog.pageType == &quot;item&quot;'>

その下にある以下の２つのコードを削除

<b:if cond='data:label.isLast == &quot;true&quot;'>
</b:if>

この２つの削除するコードは他の場所にもあるため注意して削除すること。

すべてのラベルの関連記事を表示するように変更

HTML編集で 以下のコードを検索

<div id='mrp-content'/>

その下にある以下の２つのコードを削除

<b:if cond='data:label.isLast == &quot;true&quot;'>
</b:if>

この２つの削除するコードは他の場所にもあるため注意して削除すること。

これで、パンくずリストにすべてのラベルを表示されるようになり関連記事の表示もそれにともなってすべてのラベルの関連記事を表示するように変更されました。
関連記事の表示最大数(デフォルトは5個)も変更できるそうです。

強調(斜線)タグ <i></i>で、蛍光ペン(マーカー)の装飾(黄色)+他の色

HTML編集のCSS記述部「全体設定」で

#single-content i {
  /* 斜体文字で黄色蛍光ペン */
  background: linear-gradient(transparent 0%, #fff799);
  font-style: normal;
}

こんな感じ

ほかの色は少し邪道ですが投稿エディタでタグ編集でOK？

<span style="padding:0 0.3em;background:linear-gradient(transparent 0%,#ffbb55);">オレンジ</span>

<span style="padding:0 0.3em;background:linear-gradient(transparent 0%,#99ccff);">水色</span>

<span style="padding:0 0.3em;background:linear-gradient(transparent 0%,#b2ffb2);">グリーン</span>

<span style="padding:0 0.3em;background:linear-gradient(transparent 0%,#ffc1e0);">ピンク</span>

オレンジ   水色   グリーン   ピンク

少しグラデーションがかかっていい感じですよね。
色はどぎつくならないように抑えてあります。