今回はseesaaブログの新システム版でパンくずリストを設置する方法を紹介していきます。パンくずリストは多くのブログで設置されていて、これによって内部リンクにもなりますし、SEO対策としても効果が期待できます。
ちなみにパンくずリストというのはどのカテゴリーの中の記事なのか？という道案内的なリンク。
意外にクリックされることも多く、SEOやPV（ページビュー）の増加も期待できるかも。それでは早速設置をしていきましょう。
パンくずリストを設置する手順
まずはseesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒適応中のデザインタイトルをクリックし、「HTML編集」を選択。
するとHTMLコードがズラリ並んでいるのでその中から次のコードを探します。このテンプレートだと17行目から22行目付近。
1 2 3 4 5 6 | <header role="banner" class="l-header"> <div class="header"> <h1><a href="<% blog.page_url -%>"><% blog.title -%></a></h1> <p class="description"><% blog.description | nl2br | mark_raw -%></p> </div> </header> |
このコードの下に次のコードを追加して下さい。
1 2 3 4 5 6 7 8 9 10 11 12 | <% if:page_name eq 'article' -%> <div class="crumb"> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<% blog.page_url %>" itemprop="url"> <span itemprop="title"><% blog.title %></span></a> ＞ <% loop:list_article -%> <a href="<% article_category.page_url %>" itemprop="url"> <span itemprop="title"><% article_category.name %></span></a> ＞ <span itemprop="title"><% extra_title %></span></span> <% /loop -%> </div> <% /if %> |
もし先にグローバルナビを設置している方はグローバルナビのコードの下に追加ね。
追加できたらこれで「保存」しておきます。これでパンくずリスト自体は設置されているはず。さらに位置の調整もしておきます。
パンくずリストの位置調整
さて、パンくずリストの位置調整。先ほど同様にseesaaブログの管理画面から「デザイン」⇒「CSS/HTML編集」⇒適応中のデザインタイトルをクリックし、「スタイルシート編集」というタブが選択されている事を確認。
スタイルシートのコードがズラリ並んでいますが、一番下までスクロールして次のコードを追加。
1 2 3 4 | .crumb { margin: 5px 0px 10px 0px; font-size: 14px; line-height: 18px;} |
ここの「margin」という部分で位置調整ができます。「上、右、下、左」と時計回りの順番で調整ができます。
「5px」という部分は上への余白。このマイナス値を大きくすればパンくずを上に持って行く事ができますし、マイナスではなく普通に〇〇pxとすれば下にずらす事が可能です。
また10pxとしている部分は下への余白なのでこの数値を大きくすれば記事コンテンツとの距離が開きます。
「font-size」で文字の大きさを変更する事ができますし、「line-height」で高さも調整できるのでお好みで数値を変更すればOKです。
以上Seesaaブログにパンくずリストを設置する方法でした。
Seesaaブログにグローバルナビを設置する方法【新システム】
Seesaaブログのタイトルやサイドバーのタイトルのカスタマイズ【新システム】
Seesaaブログの記事の日付を消す方法【新システム】
Seesaaブログのヘッダー画像をリンクにする方法【新システム】
昨日、はじめまして、とご挨拶したのですが、以前にもリンクを貼らせていただいた報告をしておりました・・・大変失礼しました。
基本的にリンクフリーとの事、承知しました！
ブログのカスタマイズはとても楽しいですね＾＾こちらこそ、今後もお世話になりたいと思います。よろしくお願いいたします。
みむ様
わざわざありがとうございます。基本的にリンクフリーですので自由にリンクお願いします。私もありがたいです(^^)今後ともどうぞよろしくお願い致します。
はじめまして。
こちらの記事のリンクをはらせて頂きましたので、ご報告いたします。
私の認識違いや、不愉快な点等ありましたら、削除・訂正させていただきますので、
お手数をおかけしますが、ご連絡いただければと思います。
いつもありがとうございます。
しげぞう様
いつもお世話になっております。
早急なご回答をいただきありがとうございます。
htmlの詳細、把握致しました。
また、的確なアドバイスまでいただきありがとうございます。
現状カテゴリーが1つしかないので、
カテゴリーページの必要性を見直しておりましたが、
サイトの構成も考えて、カテゴリーを増やすか検討したいと思います。
ご丁寧にありがとうございました！