⇒Seesaaブログにパンくずリストを設置する方法【新システム】
今回はシーサーブログにパンくずリストを付ける方法を紹介する。ブログはトップページやカテゴリー、過去記事、タグページ等沢山のページが存在するので今自分がどの階層の記事を読んでいるのか道案内的な役割をしてくれるし、内部リンクにもなるのでSEOとしても有効だろう。
ちなみにシーサーブログでパンくずリストを設置するとこのように表示される。
ブログタイトルの下にブログ名とカテゴリー名が表示されているのが分かると思う。
スポンサードリンク
パンくずリスト設置の方法
設置は非常に簡単だが、使っているテンプレートによっては表示のされ方が違う場合もあるかもしれないので注意。
追記：カテゴリーが表示されなかったので訂正しました。（2015/05/30）。
まずはパンくずを設置する時に邪魔になるブログの上にあるナビゲーションを削除、移動しておく必要があるので次のカスタマイズを先にやっておく。カスタマイズする時にはいつでも元に戻せるようにコードを全部メモ帳などにコピペしておいてね。
⇒記事上のナビゲーションを記事下に移動するカスタマイズ
記事上のナビゲーションの削除、移動ができたら再度「デザイン」⇒「コンテンツ」と進み「記事」をクリック。それで「記事」の「コンテンツHTML編集をクリック。
コンテンツHTMLの中身を見ていくとこのすぐに＜!– Content –＞という部分があるので、この下に次のコードを入れる。
<% if:page_name eq 'article' -%> <div class="crumb"> <a href="<% blog.page_url %>">Top</a>＞ <% loop:list_article -%> <a href="<% article_category.page_url %>"><% article_category.name %> </a>＞<% article.subject %> <% /loop -%></div> <% /if %>
最後に「保存」をしてコンテンツHTMLの画面を閉じ、コンテンツ一覧画面に戻るので再度「保存」。これで個別ページを表示した時にトップページ、カテゴリー、記事タイトルというパンくずが表示される。
パンくずリストの位置調整
パンくずを設置したので細かい位置調整の方法も紹介しておこう。シーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「自分のテンプレート名」をクリック。
ここにデザインのCSSコードがズラリと並んでいるので次のコードを一番下に貼り付け。
.crumb {
clear: both;
margin: -10px 0 10px 0;
font-size: 14px;
line-height: 18px;}ここの「margin」という部分で位置調整ができる。「上、右、下、左」と時計回りの順番で調整ができる。「-10」という部分は上への余白。このマイナス値を大きくすればパンくずを上に持って行く事ができるし、マイナスではなく普通に〇〇pxとすれば下にずらす事が可能だ。また10pxとしている部分は下への余白なのでこの数値を大きくすれば記事コンテンツとの距離が開く。
「font-size」で文字の大きさを変更する事ができるし、「line-height」で高さも調整できるのでお好みで数値を変更。
⇒Seesaaブログカスタマイズまとめページに戻る
＞新井様
報告ありがとうございます！私も１つ勉強になりました。今Seesaaブログの新システムのカスタマイズ記事を書いているので参考にして記事を作成できます。本当にありがとうございました。今後もどうぞよろしくお願い致します。
できました！
ありがとうございます。
＞新井様
ホントだ！できました。カテゴリー表示できますね。ありがとうございます。この場合だと、「記事」⇒「HTML編集」で先に元々あるナビゲーションを削除、移動しておいて、最初の＜!– Content –＞という部分の下に次のコードを入れてみると上手くできました。バックアップは取っておいて試して見てください。
これで確認してもらえますか？私のブログではこれで上手くカテゴリーも表示できました。
いえ、カテゴリー名を含ませることはできました。
http://seo-blog1.seesaa.net/article/135258035.html
に書いてあったんですが、しげぞうさんとは記入方法が違っていて
「デザイン」-「コンテンツ」で「記事」をクリックしてHTMLをいじるやり方でした。
これで問題なのはしげぞうさんの記事のナビゲーション移動や削除の仕方をやると
パンくずリストが下に行ってしまうんです＞＜
書いている人が違うのでおかしくなるのは当たり前なんですけどね……。
デザインから直接やってもHTMLのパンくずリストは機能しないらしいです。
コンテンツから記事のHTMLをいじらないとっていうのが3つくらいありました。
しげぞうさんならそこを何とかやったのかなーと思ったの
で自分が何か間違っているのかと思ってました。
＞新井様
コメントありがとうございます。確かにホームページタイトル＞記事タイトルになりますね。気が付きませんでした。早速カテゴリー名を入れたパンくずにしようと思ってやってみたのですが、条件分岐をするとカテゴリー名がエラーになります。一応独自タグも調べてやってみたのですが、条件分岐するとやはりエラー。
もうしばらくやってみますがもしかすると現時点ではカテゴリー名を含ませる事はできないか、もしくは私の知識不足です。すみません。言われてみればこれだとあまり意味ないですね。ただ、トップページへのリンクにはなるのでリンク構造としてはいいのですが。。。。
パンくずリストをつけて個別記事を開くと
ホームページタイトル＞記事タイトルになりました。これって、パンくずリストができてないですよね。
何かを間違えて設定しているんでしょうか。
ホームページタイトル＞カテゴリー名＞記事タイトルにしたいです。
＞コタニ様
コメントありがとうございます。原因は断定できませんが、考えられるのはレイアウトを決める箱「div」と「/div」が間違って１つ削除されている可能性があります。レイアウト自体が崩れる場合には「div」と「/div」の関係を見ていく必要がありそうです。ＵＲＬを教えていただけたら確認してみますので、もしよければＵＲＬとどのような風にしたいのかを教えて頂けたら助かります。それとURLはコメント公開時には削除しますのでよろしくお願い致します。
いつも拝読させていただいております。
ブログを始めてまだ1ヵ月も経過していないド素人です。
こちらのサイトを参考にしてカスタマイズしているのですが、seesaaブログで
「記事下のposted byや時間、カテゴリ名を削除する方法」をやると、右サイドバー記事下に入りこんでしまい変な構成になってしまいます。
既にテンプレートを3回も変更している状態なので何とか改善したいのですが、知恵を貸して頂けないでしょうか。宜しくお願いします。