FC2ブログ


HOME > スポンサー広告 > title - FC2ブログ パンくずリストのつくり方HOME > FC2ブログ パンくずリストのつくり方 > title - FC2ブログ パンくずリストのつくり方


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログ パンくずリストのつくり方

【パンくずリスト】を設置するとユーザビリティーが向上します。
ここではFC2ブログ用のパンくずリストのつくり方を説明しています。

サイトを訪れてくれたユーザーを迷子にしないためにも、パンくずリストを
設置してみましょう。

トップページ・カテゴリー一覧のページ・個別記事のページ・検索結果のページ・月別アーカイブなどの日付けのページ・コメントなどの編集のページでパンくずリスト表示して、それ以外のページでは前のページと次のページへの移動するリンクを表示します。

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



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

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

------------【CSS】----------

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

---------------【HTML】--------------


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

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

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

このブログの様に記事のタイトルのすぐ上に設置したいならば、

<!--topentry-->
<h2 id="e7" class="entry_header">
のすぐ前に張りつけます。
 *ブログによってタグの書き方が違うのですが、目印の記事タイトルの上付近にあります。

またエリアを表示してあるのならば、

<!-- 【 ▼メインエリア ここから 】 -->
<div id="main"><div class="main-container">

の下に記述してください。

張りつける位置がわからなければ、変数一覧を見て、自分が設置したい場所の近くのものの名前で検索してみて、その該当する変数を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に張った中の一行空いた次のからまでを削除して下さい。


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://naomin225.blog113.fc2.com/tb.php/19-d5bcfb6b
    この記事へのトラックバック



    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。