はてなブログ・パンくずリストのカスタマイズ

はじめに

*当ブログは現在、はてなブログからWordPressに移行しています。

カスタマイズ前の確認事項などは下記の記事を参照してください。

パンくずリストのカスタマイズ

「パンくずリスト」とは、ユーザーが今WEBサイト内のどの位置にいるのかを分かりやすくするためのものです。

トップ>カテゴリ>記事タイトルと表示されます。

カテゴリが複数ある場合は最初のカテゴリが表示されます。

「パンくずリスト」を表示させるには「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」→「記事」にある「記事ページにパンくずリストを表示する」のチェックボックスをオンにしてください。

デザインCSS

「パンくずリスト」のカスタマイズは「ダッシュボード」→「デザイン」→「カスタマイズ(アイコン)」にある「デザインCSS」にコードを貼り付けます。

最後の項目を非表示にする

「パンくずリスト」は、トップ>カテゴリ>記事タイトルと表示されるので、すぐ下の記事タイトルと「パンくずリスト」の記事タイトルが被ってしまいます。

これを非表示にしてスッキリさせたい場合は、以下のコードを貼り付けてください。

/* パンくず最後の項目非表示 */
#top-box .breadcrumb-child:last-child{display:none;}

(カテゴリの一覧ではカテゴリが非表示になります)

記事下のカテゴリを非表示にする

記事下のカテゴリを非表示にさせたい場合は、以下のコードを貼り付けてください。

/* 記事下のカテゴリー非表示 */
.entry-categories {
display:none;
}

(記事一覧やカテゴリの一覧では表示されます)

カテゴリや記事タイトルの前にアイコンを付ける

カテゴリや記事タイトルの前にアイコンを付けたい場合は、以下のコードを貼り付けてください。

/* パンくずのアイコン */
.breadcrumb-child::before{
font-family:blogicon;
content:"\f04a";
color:#708090;
}

colorのカラーコードを変えてお好きな色にしてください。

カラーコードは下記サイトを参考にしてください。

記事下のカテゴリにアイコンを付ける

記事下のカテゴリの前にアイコンを付けたい場合は、以下のコードを貼り付けてください。

/* 記事下カテゴリアイコン */
.categories a:before{
font-family: blogicon;
content:’\f04a’;
color:#708090;
margin-right: 0.3em;
}

このコードも、colorのカラーコードを変えてお好きな色にしてください。

記事下のカテゴリの枠を非表示にする

記事下のカテゴリの枠を非表示にしたい場合は、以下のコードを貼り付けてください。

/* 記事下カテゴリの枠を消去 */
.categories a{
border:none;
}