ライブドアブログでパンくずリストを実装する方法
ただいまライブドアブログを絶賛カスタマイズ中です。ライブドアブログもはてなブログと同様にパンくずリストは標準で搭載されていませんでしたが、HTMLとCSSでパンくずリストを実装しました。
カテゴリーを検索エンジンに認識させてSEO効果を狙う
はてなブログからライブドアブログへのお引越し作業を行っています。ライブドアブログで新規ブログを立ち上げるために、いそいそとHTMLとCSSをいじっております。
引っ越ししているのは、はてなブログ時代に内部SEO対策ということで、パンくずリストを実装したブログです。
ライブドアブログに移ってもパンくずリストを表示させたいと思っていたのですが、ライブドアブログも標準ではパンくずリストが実装されておりませんでした。
ライブドアブログでは、CSSやHTMLファイルを直接編集してカスタマイズすることができます。はてなブログではJavaScriptで実装しましたが、今回はCSSとHTMLでパンくずリストを実装させてみました。
パンくずリストのコーディング
パンくずリストの実装では、こちらの記事を参考にして、コーディングさせてもらいました。
CSSとHTMLのサンプルが８種類載っています。
今回はサンプル２の方法でコーディングしてみます。
個別記事の上部にのみ、パンくずリストを表示させます。
個別記事のHTMLを編集
ライブドアブログの管理画面＞ブログ設定＞PC でPCのデザインを開きます。
その中のカスタマイズタブを開いて、HTMLは個別ページタブを選択して、パンくずリストを表示させたい位置に、下記のコード書き加えます。
サンプルコードでは、ulを使っていましたが、olを使いました。
さらにdivで括りましたので、CSSもサンプルとはちょっと違います。
記事毎に自動でカテゴリー名や、記事名を変えるためには、ライブドアブログが用意したタグを使います。
独自タグ一覧（変数） - livedoor Blog ヘルプセンター
サンプルのHTMLにライブドアタグを埋め込みます。
ライブドアタグ以外にもliタグの中に何か入っていますよね。
これは、検索エンジンにパンくずリストを認識させる「構造化マークアップ」をするためのコードです。
上記のコードをこんな感じで貼り付けます。
CSSを編集
ライブドアブログの管理画面＞ブログ設定＞PC でPCのデザインを開きます。
CSSタブを選択して、下記のコードをCSSに書き加えます。
aタグの背景に画像を指定していますが、これが区切り記号になります。事前に区切り記号に使いたい画像をアップロードしておいて、適宜URLを書き換えて使ってください。
上記のコードをCSSファイルの任意の場所に貼り付けます。（一番下とかでいいんじゃないでしょうか。）
区切り記号に使っている画像の指定が面倒でした
区切り記号は、事前にアップロードした画像をaタグの背景として指定します。
background:url(http://livedoor.blogimg.jp/userID/imgs/a/f/af490844.png) no-repeat right center
赤字の部分です。
ライブドアブログは、アップロードした画像のURLを見つけるのが大変でした。
URLは、
http://livedoor.blogimg.jp/userID/imgs/a/f/af490844.png
このように、imgs以下が暗号化されたような感じになっています。
画像管理の画面上からは、このURLが分からなかったので、新記事を作成して、ライブドアブログの機能を使って画像を貼り付けて、URLを確認するという遠回りをしました。
FTPを使えば、もっとスマートにアドレスが分かったかもしれませんが、設定するのも面倒だったので、この方法でURLを指定しました。
パンくずリスト完成
こんな感じになりました！
