ブログパーツ

趣味の工房

トピックパス(パンくずリスト)を設置する☆

みなさん、こんばんは
本日、TwelveHundredが無事ボクの元から旅立ちました。 ヽ(*´∀`)ノ< 達者でな~♪
今度の休みから、一時中断してしまっていたNineHundredとHAF922のカスタマイズの再開です☆


さて久々の「ブログ関連」カテゴリ記事です。(; ̄ー ̄A
本日、ブログにトピックパス、いわゆるパンくずリストを追加する方法について。
トピックパスって何ぞや!?と思われた方も、コチラをご覧いただければわかると思います。
2011y10m23d_195208282_20111023200700.jpg

画像の例の場合、ブログタイトルの上にある記事の位置情報を示すリンクですね。みなさんも一度はご覧になったことがあると思います。
規模が大きな複雑なサイトほど、このトピックパスを使っていることが多いですね。

この画像の場合であれば、「TOP」から「その他ひとりごと」カテゴリ内の「気になるPCケース...など」というタイトルの記事を表示していることがわかります。
このブログでは、TOP表示に3件分の記事を表示するように設定していますが、今回記事にする方法では、それら場合には表示されず、個別ページに飛んだ場合にのみ、表示されるようになっています。

ちなみに、画像は一時的にこのブログに適用したのみで、現在このブログではトピックパスは設定していません。
理由はタイトル下にカテゴリ表示がされる(リンク有)テンプレートを使用していることと、そのカテゴリ一覧の表示を左側にしているためです。


これらの設定をしていない方は、トピックパスを追加することで、ブログを訪問された方(特に検索等で個別記事に直接訪問された方)に同じようなカテゴリの記事を(探すことなく)見てもらうことも出来ます。





トピックパス(パンくずリスト)を設置する☆



はじめにお断りしておきますが、FC2での設置例として書かせていただきますのでご了承ください。
その他のブログにおいての設置箇所などは、わかりかねます。スミマセン(; ̄ー ̄A
また、この記事を参考されたことによる不具合については責任を取りかねます。
お約束の自己責任にてお願いします。


まずは管理画面を開き、右側の「環境設定」内の「テンプレートの設定」をクリックします。
念のため、テンプレートを複製しておきます。


---------------------------------------------------------------------------------------
○テンプレートの複製と、修正方法
2011y10m23d_203110706.jpg
「適用」欄に旗がついているのが現在使用しているテンプレート。
複製したいテンプレートの右側にある「複製」をクリックすることで複製されます。


複製が完了したら、コピー元・コピー先どちらでも構わないですが、変更したいほうのテンプレート名右側の「編集」をクリックします。
※現在適用しているもの意外を修正する場合は最後にそのテンプレート横の○をクリックし、
 上の「適用」ボタンを押さないと実際のブログには反映されませんので注意。


---------------------------------------------------------------------------------------



「編集」をクリックしたら、まずは下側の「○○(テンプレート名)のスタイルシート編集」欄に追記をします。
テンプレート名がちゃんと編集したいテンプレートの名前か確認してください。
2011y10m23d_203226236.jpg




トピックパスを設定するには、このスタイルシート編集欄の文字列の一番下に、1行空けて以下の記述を追加します。

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



白抜きの文字部分はリンク表示のカラーコード。
上の「#ffffff」であれば文字色は白。一番上の画像のような黄色にしたければ「#ff9900」と入力します。
ブログにあわせて変更してください。
ちなみに下から2行目の「.pankuzu a:link」がリンクの色。一番下の行の「.pankuzu a:visited」は一度表示した場合の色になります。変更したい場合は違う色を指定してください。
アルファベットは大文字でも小文字でも構いません。ただし、半角で。
「font-size:12px;」文字の大きさ。数字を大きくしたり小さくしたりすることで文字の大きさを調整します。
「text-align:left;」は文字位置(左寄せ)好みに応じて、「left」を「center(中央)」や「right(右)」に変更することが出来ます。


次に、上の「○○(テンプレート名)のHTML編集欄」に戻り、
<!--topentry-->
という文字列のに、以下の文字列を挿入します。(コピー&ペーストでOK)

<!-- パンくずリスト -->
<!--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-->
<!-- パンくずリスト ここまで-->

※<!-- パンくずリスト-->、<!-- パンくずリスト ここまで-->は後で消したくなったときに
 わかりやすくするためのもので、実際にはなくても構いません。


実際に挿入するとこんな感じに。(上が切れてますが)
2011y10m23d_203331425.jpg

最後に欄外にある「更新」ボタンをクリックし、変更したテンプレートを適用すれば完了です。


ちなみに、この文字列を入れる場所によって、表示箇所を変えることが出来ます。
ボクも詳しくはわからないので、いろいろ試してみてくださいw



特にカテゴリ分けをしているけれど、カテゴリ一覧は表示していない方には役に立つかもしれません。
言うまでもなく、カテゴリ分けをしていない人には意味のない機能ですので、あしからずw


それではみなさん。ヽ(* ̄∀ ̄)**SeeYou**



ランキングに参加しております。クリックにご協力を♪
にほんブログ村ランキングへ
にほんブログ村



関連記事


    22:08 | Trackback : 0 | Comment : 4 | Top
Comment
2011.10.23 Sun 23:31  |  kaku #-
こんばんは☆

さすがFC2というか、さすがパパさん^^!
カスタマイズの自由度が高くてうらやましいです☆

パッと見、目を引く構成で参考になります☆
  [URL] [Edit]
>kakuさん

おはようございます☆
もともとFC2にしたのは特に大きな理由があったからではないんですが、今思えば確かに自由度が高くていいですね。☆人´∀`).☆.。.:*

  [URL] [Edit]
2011.10.24 Mon 17:24  |  Hide-Rocket #-
記事乙であります♪

こういうの見るたびに・・何故ワタシは雨風呂を選択してしまったのかと・・・w
  [URL] [Edit]
>Hide-Rocketさん

まぁアメブロにはアメブロの良さがあると思うので、どちらもどちらですかね...
逆にFC2ブロガーは少し仲間ハズレ感があります(爆)
  [URL] [Edit]









(編集・削除用)


管理者にだけ表示を許可
Trackback
http://rikuntyudady.blog101.fc2.com/tb.php/634-e792c800
プロフィール

りくんちゅ。パパ

Author:りくんちゅ。パパ
初歩的な話からオーバークロックまで、PCに関することやその他趣味に関することを思い付きで書いています。
コメントはお気軽にどぞ。

「rikuntyudady」の名前で出没することもあります(笑)

rikuntyudady01.jpg

このサイトはFirefox,Google Chrome用に最適化されています。
IEでは一部表示が正しく行われない場合があります。
ご了承ください。


アクセスカウンター
signbot_20101017072856.gif
現在の閲覧者数:

galleryロゴ02
cmcrogo2.png
RikuntyudadyのCM690をUP!!
☆ただ今34台展示中☆



みんなのPC♪ギャラリーはコチラ。

Page 1 Page 2


Categories...

クリックで全て開閉↓

openclose


○自作をしてみたい方へ
○オーバークロックについて

「+」はフォルダクリックでOPEN

全ての記事を表示する


見つからない場合はコチラ
(記事内検索)

最新記事
最新コメント
☆MY GEAR☆
カスタマイズ工程はコチラ
画像
画像
画像
画像
画像
画像
画像
ATCS840
COSMOS II
CORE1500
MasterCase5Mod

<製作依頼PC>
画像
Overclock.net work log
MNPCTECH"Case Mod Blog"
画像
画像
【CORSAIR Vengeance® C70】
HAF X MOD

<コラボ企画> 画像
SNIPER
☆おもな活動サイト☆

Cooler Master Forum
CoolerMaster

techPoweUp! Case Mod Gallary-
techPowerUp!

Overclock.net
   -Case Mod Work Logs-
Overclock.net

Case Modding Forum
Case Modding Forum

こだわりの持ち物を登録しよう♪
2010y05m05d_221238218.jpg

Web page translation
THIS IS MY GEAR
2016y03m23d_233159886.png 2016y03m23d_233204419.png
感染者増殖中...
りくんちゅ。パパにメールする







本文:

☆掲示板☆

趣味の工房 ~みんなの休憩室♪~
お気に入りブログ♪
カメラ熱上昇中♪
【Canon】EOS 70D 70D.png ○レンズ
【Canon】
EF-S18-135mm F3.5-5.6 IS STM
EF-S55-250mm F4-5.6 IS STM 【SIGMA】
18-35mm F1.8 DC HSM|Art
APO 50-150mm F2.8 EX DC OS HSM


【Canon】G7 X canon_g7x_20150528010550367.png
☆広告☆
ブロとも申請フォーム
QRコード
QRコード
RSSリンクの表示