スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/62-1a6067e7

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

No title

あら?まだ誰も来てない?

んじゃ、名前出しでは初コメで(笑)

パンくずリスト記事、
早速のアップありがとうございます。
いつもワガママなお願いを聞いていただいて
ホント恐縮です。(^。^;)

ワタシのブログにも取り入れようと思います。
内部リンクが少ないので、少しでも増やして
Googleさんに気に入られなきゃですし。

まあ、その前にエログなんで、
SEOとか以前の問題ですが(笑)


P.S. 祝・1000PV突破!
  • 2014-12-03 12:15
  • ペロリさん@管理人
  • 編集

Re: No title

> ペロリさん

コメント1番乗りありがとうございますw

一応ちょこちょこ小細工を入れ込んだパンくずリストにしてみたんですが、
あんな感じで良かったでしょうか?w( ̄ε ̄〃)ゞ

パンくずリストはあると便利ですからね♪
是非設置してみて下さい♪(≧∇≦)b

また1000カウント突破のお祝いもありがとうございますっ!!d(≧∀≦)b
  • 2014-12-03 17:07
  • あると♪さん@管理人
  • 編集

やります

あると♪さん

ありがとうございます。やろうと思っていたんです。
今日、これから、トライします。今日中に終わりますかねぇ。何しろ、私なので・・・笑
又、お騒がせ致しますが、宜しくです。
それじゃ、早速作業に移ります。笑
  • 2014-12-03 22:53
  • girigiri26さん@管理人
  • 編集

Re: やります

> girigiri26さん

おぉ!!それは丁度良かった♪w
私の記事が少しでもお役に立てたら嬉しいです♪( ̄ε ̄〃)ゞ

何か分からないとこがあったら、お気軽にご連絡下さい♪

無事に設置出来るのを楽しみにしてますねd(≧∀≦)b
  • 2014-12-03 23:05
  • あると♪さん@管理人
  • 編集

出来ました。

あると♪さん

出来ました。パンくずリストは直ぐに出来たのですが
文字の色や、バックグランドの色(私のブログ水色なんで)等を修正しようと思い。悪戦苦闘でした。笑
http://i.gyazo.com/1af0ca41dc8dfaafa18c94e71aa41e9b.png
この画像の様に、バックグランドと文字の左のスペースを作るだけで、時間かかってしまいました。
これ、記事にしても良いですか?
  • 2014-12-04 01:33
  • girigiri26さん@管理人
  • 編集

Re: 出来ました。

> girigiri26さん

無事に設置出来てよかったです♪

イイ感じですね♪d(≧∀≦)b

確かに配色は悩みますからねww
是非記事のネタにどうぞ♪wΣd(≧ω≦*)
  • 2014-12-04 01:41
  • あると♪さん@管理人
  • 編集

由来が・・・

面白いですね(笑)

そっかー、そんなことも出来るんですね。

しかも内部リンクが増えるってメリットもあるなら、

やった方が良いんでしょうね。

サブブログを作る時に、最初にやろっかな・・・。

今のブログは、テンプレが壊れたら、

直せないので(爆)

応援ポチ♪
  • 2014-12-04 02:10
  • らいふさん@管理人
  • 編集

Re: 由来が・・・

> らいふさん

私もそれ思いましたw
また日本だけの呼び方だと思ってたら英語でもそのままなんだーってw

内部リンクも増えるし、何より閲覧者さんが便利なのでオススメです♪d(≧∀≦)b

是非、サブブログでお試し下さい♪w

いつも応援ありがとうございますっ!!Σd(≧ω≦*)
  • 2014-12-04 13:57
  • あると♪さん@管理人
  • 編集

No title

これ便利ですね(≧∇≦)
訪問者さんに優しい❤︎
今日早速やってみます(^o^)って自分の更新今日やってないんだけどねー 汗
  • 2014-12-05 17:39
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

便利ですよね♪d(≧∀≦)b
訪問者さん目線で考えると絶対付けてる方が良いと思います♪

頑張ってみてくださいね♪
何か分からない事があればお気軽にご相談下さい( ̄^ ̄)ゞ
  • 2014-12-05 18:51
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

FC2ブログにパンくずリストを付ける方法

 

2014.12.03

パンくずリスト(breadcrumb list) 親子カテゴリページにも対応したパンくずリスト

前回に続き、またまたお問い合わせ頂いたお題を記事にしました♪
今回はFC2ブログにパンくずリストを付ける方法なのですが、検索すれば設置方法を説明してくれてるページがいくつかあるので、そのソースをちょっとイジって合体させて親子カテゴリの階層も表示出来るよう改良し「basic_white」のカスタマイズ用ブログを例に付け方をご紹介♪
どの位置に表示するか?または使ってるテンプレート次第でも異なるのでHTMLのどこを編集すれば良いのかってのが一番の問題かな?w






1.パンくずリストを付けるメリット


多くのサイトやブログでこのパンくずリストが表示されており、私自身色んなページを閲覧してる際によくクリックして他のページを見たりしてます♪

▼画面上部に表示されてるこんな感じのやつです♪

ホーム > ブログカスタマイズ > 「basic_white」 > 表示ページに合わせたパンくずリストを付ける

きっと皆さんもよく利用してるのではないでしょうか?

パンくずリストを表示する事で、ブログの階層構造が分かりやすくなり、閲覧者の方がブログ内を巡回しやすくなるので他のページも見てくれる可能性が上がり、ユーザービリティの向上とPV数の増加が期待出来ます♪(何より単純に付いて無いより、付いてる方が便利ですっ!!w)

また内部リンクが増える事でSEO対策になるとも言われてます♪
下位ページからそれぞれリンクされる事になりますからね♪d(* ̄∇ ̄)

そして「パンくずリスト」という名前は、童話「ヘンゼルとグレーテル」で主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来してるそうです♪(Wikipediaより)

ちなみに英語では単に「breadcrumb」または「breadcrumb list」や「breadcrumb navigation」と言うそうなので、試しに “Google 翻訳” を使って調べてみたら「breadcrumb」で「パンくずリスト」って翻訳されましたw( ̄ε ̄〃)ゞ


FC2ブログでは変数を組み合わせる事で、一度設置してしまえばその後は自動でこの「パンくずリスト」を任意の場所に表示する事が出来ますので、以下ではそのHTMLのソースや設置方法の例をご紹介します♪




2.パンくずリストのHTML


パンくずリストを表示する部分のHTMLですが、これは以下のページを参考にさせて頂きました♪

全てのページに表示するパンくずリストをつくりたい!
( 初心者でもできる簡単FC2ブログの作り方 様 )

FC2ブログ用パンくずリスト 親子カテゴリ完全対応版
( hatena chips 様 )

▼上記のページを参考にソースを合体させて、ちょこっと表示を変更したパンくずリストのHTML
カテゴリページで表示される部分にFC2ブログの変数とJavascriptを組み合わせたソースが入ってます。
その他、検索結果やカテゴリページなどでそれぞれの記事件数も表示するようにしてます。


<!-- ▼ パンくずリスト ▼ -->
<div class="pankuzu">
<!--permanent_area-->
<!--topentry-->
<a href="<%url>" title="ホームへ">ホーム</a> > 
<!--parent_category--><a href="<%topentry_parent_category_link>">
<%topentry_parent_category></a> ><!--/parent_category--> 
<a href="<%topentry_category_link>"><%topentry_category></a> > <%sub_title>
<!--/topentry-->
<!--/permanent_area-->

<!--category_area-->
<a href="<%url>" title="ホームへ">ホーム</a> > 
<script type="text/javascript">
al = new Array(<!--topentry--><!--parent_category-->
'<%topentry_parent_category_link>',<!--/parent_category--><!--/topentry-->-1);
ap = new Array(<!--topentry--><!--parent_category-->
'<%topentry_parent_category>',<!--/parent_category--><!--/topentry-->-1);
if ('<%sub_title>' != "" + ap[0]) 
document.write('<a href=\"', al[0],'\">' , ap[0], '</a>&nbsp;&gt;');
</Script>
<%sub_title>( <%total_num> 件 )
<!--/category_area-->

<!--search_area-->
<a href="<%url>" title="ホームへ">ホーム</a> >
「 <%sub_title> 」を含む <%total_num> 件の検索結果
<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="ホームへ">ホーム</a> > 
<%now_year>年<%now_month>月の記事一覧( <%total_num> 件 )
<!--/date_area-->

<!--edit_area-->
<a href="<%url>" title="ホームへ">ホーム</a> > <%edit_entry_title>へのコメント編集
<!--/edit_area-->

<!--tag_area-->
<a href="<%url>" title="ホームへ">ホーム</a> > <%tag_word>( <%total_num> 件 )
<!--/tag_area-->

<!--index_area-->
<a href="<%url>" title="ホームへ">ホーム</a>
<!--/index_area-->

<!--titlelist_area-->
<a href="<%url>" title="ホームへ">ホーム</a> > 記事一覧( 
<script type="text/javascript">
TotalArticle=<!--archive-->+<%archive_count><!--/archive-->;
document.write(+TotalArticle);</script> 件 )
<!--/titlelist_area-->

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

※色んなパターンに対応させる為にHTMLのソースはこんなに長いですが実際に表示されるのは1行です。
(検索結果ページを除く ※フォームの部分が必要ない場合28行目~30行目を削除すればOK)


※パンくずリストを表示したい箇所に上記のHTMLソースをコピペすればOKです。
実際に貼り付ける際はテンプレートの複製を作りバックアップを行ってから作業する方が良いです♪


※実際の表示は「FC2ブログのテンプレート「basic_white」をカスタマイズ  」でご確認頂けます♪
変更した点が分かりやすいようサンプルとしてパンくずリストを上下2パターン表示してます。
下段のパンくずリストが上記のソースをコピペした物です。(貼り付け位置は下記参照)





3.パンくずリストのCSS


上記のパンくずリストに対してスタイルシートにもちょっとだけ記述を追加しました。
(サンプルでは以下の設定のみ指定しています)

▼FC2ブログの管理画面から「テンプレートの設定」でスタイルシートの編集内に以下のソースを追加♪

.pankuzu {
text-align:left;
margin:10px;
}

※上記は左寄せにして、余白を少し取ってるだけの設定なので文字サイズや色を変更したい場合はお好みで記述を追加して下さい♪( font-size:○○px; や color:#○○○;など )





4.テンプレート basic_white に設置


実際にパンくずリストを表示させたい場合、HTMLのどこを編集すれば良いのかが一番の問題になるかと思いますが、それは使ってるテンプレートによっても異なるので今回はテンプレートの「basic_white」を例に、こんな感じでやってみたってのをご紹介します♪

▼まず、設置場所については以下の画像の通りヘッダーメニューとメインコンテンツの間にします。

パンくずリストの設置場所





▼上記の位置にパンくずリストを表示する為に「basic_white」のHTMLでは「<div id="wrap">」と「<div id="main">」の間にパンくずリストのHTMLソースを貼り付ける事にします。


「basic_white」のHTML編集画面





▼上記の位置にパンくずリストのHTMLソースを貼り付けて表示を確認するとこんな感じ♪
パンくずリストは問題なく表示されてますが... 余白と点線が気になってしょうがない...w


「basic_white」のHTML編集画面





▼点線については前々から消そうと思ってたので、この際ついでに消しちゃいます♪
スタイルシート編集画面でキーボードの「Ctrl」+「F」を押して「dotted #B5B5B6;」を検索すると15件ヒットすると思うので、その該当箇所を全て削除しちゃいます♪

削除するのは以下のように「border-○○○: 1px dotted #B5B5B6;」となってる部分です。
【削除する設定】
border-top: 1px dotted #B5B5B6;
border-bottom: 1px dotted #B5B5B6;
border-left: 1px dotted #B5B5B6;
border-right: 1px dotted #B5B5B6;
 これらが全部で15箇所あると思います。

※以下の画像は「Google Chrome」で検索した場合の画面です。


「basic_white」の点線を削除する





▼次は上部の余白を消すために同じくスタイルシート編集画面で今度は「#sidemenu {」を検索します
すると「padding-top: 35px;」と記述されてる部分があるので「padding-top: 0px;」に変更♪

そしてもう一箇所「#main_contents {」を検索して、同じく「padding-top: 35px;」と記述されてる部分があるので「padding-top: 0px;」に変更します。
※それぞれ「padding-top: 35px;」の記述その物を消してもOKです。

これで余白も点線も無くなってスッキリした♪( ̄ε ̄〃)b
って事で見比べれるようパンくずリストを以下の画像のように2段表示にしてみましたw


「basic_white」の上部の余白と点線の削除完了♪

実際の表示は「FC2ブログのテンプレート「basic_white」をカスタマイズ 」で確認してみて下さい♪

表示されてるテキストの部分など細かい部分はお好みで編集して下さいませ♪


って事で今回はパンくずリストの設置についてでした♪( ̄^ ̄)ゞ
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-12-03 | 「basic_white」 | コメント(10) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/62-1a6067e7

「FC2ブログにパンくずリストを付ける方法」へのトラックバック

- TrackBack -


「FC2ブログにパンくずリストを付ける方法」へのコメント

- Comment -

No title

あら?まだ誰も来てない?

んじゃ、名前出しでは初コメで(笑)

パンくずリスト記事、
早速のアップありがとうございます。
いつもワガママなお願いを聞いていただいて
ホント恐縮です。(^。^;)

ワタシのブログにも取り入れようと思います。
内部リンクが少ないので、少しでも増やして
Googleさんに気に入られなきゃですし。

まあ、その前にエログなんで、
SEOとか以前の問題ですが(笑)


P.S. 祝・1000PV突破!
  • 2014-12-03 12:15
  • ペロリさん@管理人
  • 編集

Re: No title

> ペロリさん

コメント1番乗りありがとうございますw

一応ちょこちょこ小細工を入れ込んだパンくずリストにしてみたんですが、
あんな感じで良かったでしょうか?w( ̄ε ̄〃)ゞ

パンくずリストはあると便利ですからね♪
是非設置してみて下さい♪(≧∇≦)b

また1000カウント突破のお祝いもありがとうございますっ!!d(≧∀≦)b
  • 2014-12-03 17:07
  • あると♪さん@管理人
  • 編集

やります

あると♪さん

ありがとうございます。やろうと思っていたんです。
今日、これから、トライします。今日中に終わりますかねぇ。何しろ、私なので・・・笑
又、お騒がせ致しますが、宜しくです。
それじゃ、早速作業に移ります。笑
  • 2014-12-03 22:53
  • girigiri26さん@管理人
  • 編集

Re: やります

> girigiri26さん

おぉ!!それは丁度良かった♪w
私の記事が少しでもお役に立てたら嬉しいです♪( ̄ε ̄〃)ゞ

何か分からないとこがあったら、お気軽にご連絡下さい♪

無事に設置出来るのを楽しみにしてますねd(≧∀≦)b
  • 2014-12-03 23:05
  • あると♪さん@管理人
  • 編集

出来ました。

あると♪さん

出来ました。パンくずリストは直ぐに出来たのですが
文字の色や、バックグランドの色(私のブログ水色なんで)等を修正しようと思い。悪戦苦闘でした。笑
http://i.gyazo.com/1af0ca41dc8dfaafa18c94e71aa41e9b.png
この画像の様に、バックグランドと文字の左のスペースを作るだけで、時間かかってしまいました。
これ、記事にしても良いですか?
  • 2014-12-04 01:33
  • girigiri26さん@管理人
  • 編集

Re: 出来ました。

> girigiri26さん

無事に設置出来てよかったです♪

イイ感じですね♪d(≧∀≦)b

確かに配色は悩みますからねww
是非記事のネタにどうぞ♪wΣd(≧ω≦*)
  • 2014-12-04 01:41
  • あると♪さん@管理人
  • 編集

由来が・・・

面白いですね(笑)

そっかー、そんなことも出来るんですね。

しかも内部リンクが増えるってメリットもあるなら、

やった方が良いんでしょうね。

サブブログを作る時に、最初にやろっかな・・・。

今のブログは、テンプレが壊れたら、

直せないので(爆)

応援ポチ♪
  • 2014-12-04 02:10
  • らいふさん@管理人
  • 編集

Re: 由来が・・・

> らいふさん

私もそれ思いましたw
また日本だけの呼び方だと思ってたら英語でもそのままなんだーってw

内部リンクも増えるし、何より閲覧者さんが便利なのでオススメです♪d(≧∀≦)b

是非、サブブログでお試し下さい♪w

いつも応援ありがとうございますっ!!Σd(≧ω≦*)
  • 2014-12-04 13:57
  • あると♪さん@管理人
  • 編集

No title

これ便利ですね(≧∇≦)
訪問者さんに優しい❤︎
今日早速やってみます(^o^)って自分の更新今日やってないんだけどねー 汗
  • 2014-12-05 17:39
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

便利ですよね♪d(≧∀≦)b
訪問者さん目線で考えると絶対付けてる方が良いと思います♪

頑張ってみてくださいね♪
何か分からない事があればお気軽にご相談下さい( ̄^ ̄)ゞ
  • 2014-12-05 18:51
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

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