ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - トップページは表示しないパンくずリストをつくりたい!

トップページは表示しないパンくずリストをつくりたい!

これをつくると、カテゴリー一覧のページ・個別記事のページ・検索結果のページ・月別アーカイブなどの日付けのページ・コメントなどの編集のページでパンくずリスト表示します。トップページでは表示されません。(このブログと全く同じものです)

パンくずリストのつくり方紹介

まず、管理画面の環境設定のテンプレートの設定からスタイルシートの編集を開いて下さい。

開いたら一番下までスクロールさせて、最後に書かれているものから一行あけて以下のタグをコピーして張りつけて下さい。

.pankuzu {
font-size:12px;
text-align:left;
margin:0px 0px 10px 0px;}
.pankuzu a:link{color:#ff9900}
.pankuzu a:visited{color:#ff9900}


張りつけたら今度は上にあるHTMLの編集に行くのですが、パンくずリストを設置したい場所が決まっていない人はちょっと待ってください。

HTMLの編集の前に、自分のブログの中のどこの場所にパンくずリストを設置するのかを、自分のブログをよく見て位置を決めて下さい。

決まりましたら管理画面の環境設定のテンプレートの設定からHTMLの編集を開いて下さい。

<!-- パンくずリスト -->
<!--not_index_area-->
<div class="pankuzu">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="TOPページへ">TOP</a> > <a href="<%topentry_category_link>"><%topentry_category></a> > title - <%sub_title>
<!--/topentry-->
<!--/permanent_area-->
<!--category_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > CATEGORY - <%sub_title>
<!--/category_area-->
<!--search_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > SEARCH - <%sub_title> の検索結果
<form action="./" method="get"><input type="text" size="20" name="q" value="" maxlength="200" class="ipt" /> <input type="submit" value="Search" class="search" /></form>
<!--/search_area-->
<!--date_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > ARCHIVE - <%now_year>年<%now_month>月
<!--/date_area-->
<!--edit_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > edit - 修正画面
<!--/edit_area-->
<!--tag_area-->
<a href="<%url>" title="TOPページへ">TOP</a> > <%tag_word>
<!--/tag_area-->
</div>
<!--/not_index_area--> 
<!-- パンくずリスト ここまで-->

開いたらこのタグをコピーして、自分の置きたい場所に張りつけます。

もしこのブログの様に記事のタイトルのすぐ上に設置したいならば、<!--topentry-->のすぐ前に張りつけます。
ブログのタイトルのすぐ下なら、<body>の中にある<%blog_name>の後ろの方に張りつけます。
ブログの紹介文の下なら、、<body>の中にある<%introduction>の後ろの方に張りつけます。

張りつける位置がわからなければ、変数一覧を見て、自分が設置したい場所の近くのものの名前で検索してみて、その該当する変数をHTMLの編集の画面で探して、その付近に設置してみて下さい。数回やってみたら上手く表示されると思います。

自分好みに変える方法

文字の大きさやリンクの色、言葉を変えたい人もいると思うので、どこを変えればいいのかを説明します。

●文字の大きさを変えたい人
最初にスタイルシートに張った中のfont-size:12px; の数字を変えると文字の大きさが変わります。

●リンクの色を変えたい人
最初にスタイルシートに張った中の、
.pankuzu a:link{color:#ff9900}
.pankuzu a:visited{color:#ff9900}
の#ff9900この部分をあなたの変えたい色の値にすると色が変わります。

●微妙に位置を変えたい人
最初にスタイルシートに張った中のmargin:0px 0px 10px 0px; の数字を変えると位置が変わります。
margin:0px 0px 10px 0px;は間隔をあけるという意味で数字を大きくするとそれだけ空間ができます。左から上・右・下・左に対応しているので上との間隔をあけたければ、50px 0px 10px 0pxなどとして下さい。

●TOPからHOMEに言葉を変えたい人
HTMLに張った中のtitle="TOPページへ">の後ろのTOPをHOMEに変えると換わります。

●title - と表示されるこの説明部分をなくしたい人
HTMLに張った中のtitle - の部分を削除すると表示されなくなります。


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
パンくずリスト
ユーザーフォーラムにも書き込みましたが返信がないのでこちらにもコメントさせていただきました。マルチポストかもしれませんがご了承ください
記事の下にパンくずリストを追加したいのですが反映されません
<%blog_name>や<%introduction>がテンプレート上にないようにおもわれるのでどうしたらいいかわかりません。ご面倒おかけしますがご伝授させてください
RE:パンくずリスト
ユーザーフォーラムの「パンくずリストについて」
http://blog.fc2.com/forum/viewtopic.php?p=53928&highlight=#53928
ですよね。拝見しました。
HAMAさんは、記事の下にパンくずリストを追加したいとの事なので、
<%blog_name>・・・・・ブログの名前
<%introduction>・・・・ブログの説明
の変数なので設置する場所の基準にしなくてよいのでなくても大丈夫ですよ。
テンプレートの[post_it_p]を見たのですが、
<!--/topentry-->
ここにパンくずリストのソースを張り付ける
<!-- ▼ ページ移動 ▼ -->
ここに入れて上手くいかないでしょうか?
カテゴリー
るんばばさん。回答ありがとうございます
第2層がカテゴリーのままで各プラグインタイトルになりません
どうしたらいいでしょうか?
RE:カテゴリー
このブログのパンくずリストを見ていただくとわかりますが、このパンくずリストだと第2層はカテゴリー名が表示されるのが正常なので問題ないと思いますよ。
ちなみに第2層が各プラグインタイトルになるパンくずリストというのは、どういったものなのでしょうか?
パンくずリスト
るんばばさん。返事遅れてすみません
悩んだあげくパンくずリストの採用はあきらめました
・・というのもpost_itのテンプレだとレイアウトがくずれるので。
いままでご面倒おかけしました
そうでしたか。
レイアウトがくずれてしまっては意味がないですからね!
また何かありましたらお立ち寄りくださいね。
参考になりました!
はじめてコメントさせていただきます!

私本当の初心者なので、前々から参考にさせていただいてました。
今回のパンくずリストも、貼り付けるだけで簡単に追加できたのでよかったです。
ありがとうございました!
はじめまして!
参考にしてくださってありがとうございます。
パンくずリストは読者にとって今の場所がすぐにわかって便利ですよね。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/164-6ba78806   

fc2ブログカスタマイズ-パンくずリストの作り方と6つの参考サイト
パンくずリストとは、「Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの。」簡単に言うと...
パンくずリストを設置する(FC2ブログ)
パンくずリストとは観覧者が今いる記事の階層が ひとめで分かるようにするための物です。 この画像の赤で囲まれた部分がパンくずリストになります。 パンくずリストの設置 まずは管理画面よりテンプレ...

Template Designed by DW99