ブログ-カスタマイズ/WebデザインBookmarkFacebookTwitterGoogle+Pocketどうも、ゆうう兄(にい)(@hara2_yusuke)です。本日はパンくずリストのデザインを変更する方法について書いていきます。サンプルとして私のブログで使用しているCSSも記述しておきますので、よかったら参考にしてみてください。親カテゴリー・子カテゴリーを反映させるパンくずリストとは?サイトのカテゴリ構造をわかりやすく表記したリストのこと。Googleにサイトの構造を認識してもらえるほか、ユーザーがこれを見て自分が今、どのページを見ているのかが分かりやすくなり、ユーザビリティ(使いやすさ)の向上にもつながります。一般的にはページ上部に表示されていますが、ページ下部に表示されているサイトもあります。私のブログも記事ページに関しては記事下に表示しています。設置方法はてなブログはパンくずリストの表示に対応しており、ボタンひとつで設置することができます。編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「記事」内の「パンくずリスト」の項目にチェックを入れるだけです。ここで表示・非表示を切り替えられるのは「記事ページ」のみです。記事ページ以外でも、カテゴリー別の記事一覧ページなどデフォルトで表示されているページもあります。デザイン調整はてなブログでは、編集画面のサイドメニュー内「デザイン」をクリック→サイドメニューのカスタマイズアイコンをクリック→「デザインCSS」からサイト内のcssを編集することができます。ここに「パンくずリスト」に関するCSSを書いていきます。「.breadcrumb」というclassが、はてなブログ共通のパンくずリスト用のclassとして使用されてるので、これに対してcssを書きます。text-bottom;}これらをデザインcssに追記すると、下のような感じに表示されたかと思います。上記のようにならない場合は、使用しているテーマやご自身で書かれたcssのほうが優先度が高くなっている可能性があります。{~省略~」といった感じです。他にも色のサンプルを置いておくので、サイトのイメージに合う色を選んでもらえると良いかと思います。*/」という行を入れ替えてもらえれば変更できます。背景色(黒)*/}classについての詳しい説明はこちら【初心者必見】ブログを書く上で便利な5つのCSSとclassについて説明する親カテゴリー・子カテゴリーを反映させる上記の公式のパンくずリストには欠点があります。カテゴリーに「親カテゴリー」「子カテゴリー」などを設定している場合、上手く反映されません。スプラトゥーン2」といった表示ができなくなるわけです。そこで私は「親カテゴリー、子カテゴリーの設定をし、なおかつパンくずにも表示させたい!」という願いを叶えるべく、他者様のブログを拝見したりして調べてみました。ブログ内のカテゴリをカスタマイズ!親カテゴリと子カテゴリを設定してパンくずリストを表示させる!この方法は公式のパンクズリストは非表示にして、記事上、記事下にjavascript等でパンくずリストを表示させる方法です。こちらもコピペでできるので、この機にカテゴリーを階層に分けてみてはいかがでしょうか。見栄えが良くなるうえに、カテゴリーの整理もしやすくなるのでオススメです!以上、最後まで読んでいただきありがとうございました!気に入ってくださった方は、読者登録やブックマークなどしていただけると嬉しいです。はてなブログPro元漫画家アシスタント、現在WEBデザイナーをしています。趣味のことを中心にゲームをプレイした感想や、漫画や小説の書評、絵を描いてみたり、時にはお仕事についてブログに書いてます。10:55時点)スマブラのコントローラーといえばコレ。10:55時点)GCコンを使って遊ぶなら必須アイテム。10:50時点)USB接続だけで使用できるため接続タップ無しで遊べます。Blog|ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。