ブログ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の編集を開いて下さい。

<!-- パンくずリスト -->
<div class="pankuzu">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="HOMEへ">HOME</a> > <a href="<%topentry_category_link>"><%topentry_category></a> > title - <%sub_title>
<!--/topentry-->
<!--/permanent_area-->
<!--category_area-->
<a href="<%url>" title="HOMEへ">HOME</a> > CATEGORY - <%sub_title>
<!--/category_area-->
<!--search_area-->
<a href="<%url>" title="HOMEへ">HOME</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="HOMEへ">HOME</a> > ARCHIVE - <%now_year>年<%now_month>月
<!--/date_area-->
<!--edit_area-->
<a href="<%url>" title="HOMEへ">HOME</a> > edit - 修正画面
<!--/edit_area-->
<!--tag_area-->
<a href="<%url>" title="HOMEへ">HOME</a> > <%tag_word>
<!--/tag_area-->
<!--index_area-->
<a href="<%url>" title="HOMEへ">HOME</a>
<!--/index_area-->

<!--not_tag_area-->
<!--not_index_area-->
<!--not_category_area-->
<!--not_search_area-->
<!--not_permanent_area-->
<!--not_date_area-->
|<a href="<%url>" title="HOMEへ"> HOME </a>|&nbsp;&nbsp;&nbsp;
<!--prevpage-->
<a href="<%prevpage_url>">前のページ</a> ≪
<!--/prevpage-->
<b>現在のページ</b>
<!--nextpage--> ≫ <a href="<%nextpage_url>">次のページ</a>
<!--/nextpage-->
<!--/not_date_area-->
<!--/not_permanent_area-->
<!--/not_search_area-->
<!--/not_category_area-->
<!--/not_index_area-->
<!--/not_tag_area-->
</div> 
<!-- パンくずリスト ここまで-->

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

もしこのブログの様に記事のタイトルのすぐ上に設置したいならば、<!--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などとして下さい。

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

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

●前のページ・次のページがいらない人
HTMLに張った中の一行空いた次の<!--not_index_area-->から<!--/not_index_area-->までを削除して下さい。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
ひょっとして
すいません質問なんですが
↓掲載してある分ですが HOMEのあと</a>が >だけになってませんか???

<!--tag_area-->
<a href="<%url>" title="HOMEへ">HOME > <%tag_word>
<!--/tag_area-->

ありがとうございます。
教えていただいてありがとうございました!!
思いっきり</a>が抜け落ちていました。
きっちり修正しました。感謝いたします!!
はじめまして
パンくずリストのタグお借りしました。
大変便利です!有難うございました(*´ω`)
自分で組んでみようかと思い、試行錯誤。そして全然うまく行かず…(号泣)
まだまだ勉強不足です。

*********************************************

カテゴリ-別全記事表示を使用しているので、

<!--titlelist_area-->
<a href="<%url>">トップページ</a> > カテゴリー別全記事表示
<!--/titlelist_area-->

も入れてみました♪
ちゃんさんへ
はじめまして。パンくずリストを利用していただいてありがとうございます。
実はちゃんさんのブログは見たことがあります!ブログを始めたばかりの頃に色々と勉強をたくさんしていた時に、めぐり合いました。そしてちゃんさんのブログからも勉強させていただきました。いつ拝見してもキレイなブログですね。羨ましいです!
「カテゴリ-別全記事表示」は最近知ったのですが、かなりいいですよね!!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/163-f7c00981   

記事タイトルをブログタイトルに変更するやり方
FC2ブログのテンプレート工房さんに書かれてたコメントを見て私もやってみようと思ったのでやってみました。注意:このカスタマイズはブログタイトルを画像にするカスタマイズを利用している人には不向きかも知れ
カーソル変えました
またまた色々弄ってしまいまして・・・ お気づきかもしれませんが ここのカーソルを画像に変更しました。 普通の時が リンク部分では ...
ちょ、超簡単!パンくずリストをFC2ブログに貼り付ける!
初心者でもできる簡単FC2ブログの作り方に、超簡単にパンくずリストをFC2ブログに のっける方法が載ってます。これマジで簡単!やってみてくだ...
パンリスト(パンくずリスト)を設置しました!!
パンリスト(パンくずリスト)というものを導入しました。 記事上部にある HOME > ポイントサイトと書いてあるやつです。 これがあると、サイトのどこにいるかが一目でわかりますし、HOMEに戻りやすい。 個人的な意見ですが、かっこよく見える(笑) そんな感じでパンリスト(パンくずリスト)を導入しました。 初心者でもできる簡単FC2ブログの作り方さんの 「全ての...

Template Designed by DW99