Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】パンくずリストを付ける

【Seesaaブログ新デザインシステム】パンくずリストを付ける

Seesaaブログにパンくずリストを付ける
■Seesaaブログにパンくずリストを付ける
■記事内で紹介しているサイトを参考にしました
■CSSとHTMLを編集  

Seesaaブログ新デザインシステムのテンプレート「シンプルA. ホワイト 右カラム」に「パンくずリスト」を付けたいと思います。



「パンくずリスト」とは、閲覧者がサイト内のどの位置にあるページを見ているのかをわかりやすくするために、上位の階層から順番にリンクを設定したリストのことです。
こうやって文字で説明するとちょっと小難しい感じがしますが、どのパーツを指しているのか、ページを見たらすぐにわかると思います。


パンくずリスト


「パンくずリスト」をブログに設置しておくと、SEO対策としても効果があるとか、ユーザビリティの観点から使い勝手がいいとか、色々と良いことがあるみたいなので、付けた方がいいと思います。
私自身、色んなサイトを見ている時に、設置された「パンくずリスト」を使ってページ移動をするので、自分のブログにも付けておきたいと思いました。



まずは、参考にさせて頂いたサイト様を紹介しておきます。


アフィリエイトで稼ぐ方法を全部話そうと思う」様
Seesaaブログにパンくずリストを設置する方法【新システム】


こちらはSeesaaブログをカスタマイズしたい方には非常に有意義なサイト様です。
下記で説明している「パンくずリスト」の設置方法も、こちらのサイト様の記述を参考にさせていただきました。ありがとうございます。





HTMLにパンくずリストのコードを追加する


HTMLを編集します。
管理画面の「HTML編集」画面を開き、「</header>」というタグを探します。
この「</header>」の下に、下記の「追加するコード」を全部、コピペします。



以前の記事<■グローバルナビゲーションを付ける>でカスタマイズしたように、もしもブログにグローバルナビゲーションメニューを設置しているならば、グローバルナビゲーションのコード記述の下にコピペします。(グローバルナビも「</header>」の下に記述したので、その下に「パンくずリスト」のコードをコピペします)


パンくずリストのコードを追加する位置


<追加するコード>
<!-- ********** パンくずリスト 開始 *********** -->
<% 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 %>
<!-- ********** /パンくずリスト 終わり *********** -->



コード編集後のHTML


編集後のパンくずリストのHTML



CSSにパンくずリストのclassを追加する


CSSに下記の記述を追加します。CSSの空いている部分にコピペします。
CSSの一番下でいいと思います。


<追加するコード>
/*** パンくずリスト
*****************************************************/

.crumb {
margin: -15px 10px 10px 20px;
font-size: 14px;
line-height: 18px;
}


●コメントアウトで見出しを付けています。
●記述内容を見たらわかりますが、ほとんど「アフィリエイトで稼ぐ方法を全部話そうと思う」様の記述と同じです。「margin」の値を自分のテンプレートに合わせて変えただけです。
「アフィリエイトで稼ぐ方法を全部話そうと思う」様のカスタマイズはとても勉強になり、非常に助かっております。



コード編集後のCSSと実際のページ


編集後のパンくずリストのスタイルシート

編集後のパンくずリスト




次の記事の紹介

次の記事では、記事ページではないページのサムネイル画像横に文章を配置する方法を説明します。


【Seesaaブログ新デザインシステム】記事ページではないページのサムネイル画像横に文章を配置する
Seesaaブログに記事を書いた時に画像を挿入していた場合、トップページではその記事の最初の画像が表示されます。最初の画像(つまりサムネイル画像)があまりに大きいから、という理由で、私は以前の記事で‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。