空に向かって走る

ときどき英会話、ときどきTOEIC、ときどき便利なこと。思いついたことを書きためます。

パンくずリストを設置しよう!簡単オシャレ!

いろいろなブログで紹介されている「パンくずリスト」の設置。

今更ながら私も行いました!

記事数が増えてから設置をするとカテゴリの設定の手間が増えるので、早めの設置がおすすめですよ。 

http://www.flickr.com/photos/10199641@N08/6454716747

photo by Rob Enslin

 パンくずリストとは?

パンくずリストは、カテゴリ分けされた記事を階層で表示するもので、 自分がサイトのどの位置にいるのかを示してくれる「ナビゲーション的」な役割を担います。

 

サイトが複雑になればなるほど意味をなします。

例えば、情報量の多そうな厚生労働省のページを例に見てみます。

記事ジャンルが多岐に渡り、記事数も多いので一見複雑ですが「パンくずリスト(赤枠)」と「グローバルナビ」のおかげで迷子になりません。

f:id:upasan:20160508010558j:plain

食品 |厚生労働省

 パンくずリストはGoogleで検索した際にも表示されます(赤枠)。

検索結果で表示される情報にもパンくずが影響してきます。

f:id:upasan:20160508010628j:plain 

パンくずリスト設置のメリット

パンくずリストの設置はSEO対策の1つで、アクセス数を増やすためにも重要な役割を持つそうです。

私はまだ実感沸かないな・・・。

SEO対策とは、「検索エンジン最適化」と呼ばれるもので、Googleといった検索エンジンからのアクセスを増やすための手段のことです。

難しい話を省くと、設置して損はないよ!という話です。

 

パンくずリストの設置

詳細は作成者のbulldra氏の「太陽がまぶしかったから」で紹介されていますので、そちらを参照ください。

bulldra.hatenablog.com

内容は「フッタ」と「記事下」の2箇所にコードを貼り付けるだけです。

感謝しながらコピペしましょう。

スマホ版でははてなブログProでないと設置できません。

PC版は無料版でも可能です。

 

テーマ「Innocent」を使用していると次のようにカテゴリがうまく表示されない問題があります。

f:id:upasan:20160508104034j:plain

この問題にはテーマ作成者の半月氏が修正用のコードを公開してくださっていますので、次のコードをCSSにコピペします。感謝。

 

詳しいことは記事に丁寧に書かれていますので、困ったらここへ行けば大丈夫。

moonnote.hateblo.jp

デザインをカスタマイズ

パンくずリストに表示されるカテゴリのデザインを変更します。

CSSでのカスタマイズです。

完成イメージはこんな感じで、色合いとサイズをカスタマイズしました。

f:id:upasan:20160508121506j:plain

その際のコードがこちらです。

コピペすると上と同じになりますので、好みで色やサイズを変更してください。

 

marginやpaddingの数値を変更すると、もっとスタイリッシュになると思います。

上のままコピペした場合の余白の様子です。

paddingはカテゴリのボックスの余白、marginはカテゴリと記事タイトルと記事間の余白です。

f:id:upasan:20160508121805j:plain

 パンくずリストを左端ではなく右端に表示しているブログさんもよく見かけます。

配置の変更も素敵ですね。

 

以上、パンくずリストのカスタマイズでした。

アクセス数の効果が出ることに期待〜。