ナビゲーションリンクをインフォメーションリンクに追加する方法

ファンブログカスタマイズ：リンク編投稿日：2009年07月24日 23:30

ファンブログ　カスタマイズシンプル系スキン限定

今回は前回作成したナビゲーションリンクをインフォメーションリンクに追加する方法を説明します。
インフォメーションリンクというのは記事の最下部に表示されます、投稿者：～｜トラックバック(0) のことで、このリンクの最後に作成したナビゲーションリンクを追加します。

インフォメーションリンクはカテゴリ名の長さによって伸縮します。記事幅の狭い方で長いカテゴリ名をお持ちの方は１行で納まらない場合もありますので、導入する場合は注意してくださいね。

通常のリンクは決まったリンク色でアンダーバーが引かれますが、今回、追加しますインフォメーションリンクは形状が違って文字はグレーで、アンダーバーも引かれていません。このままではあまり目立ちませんので、訪問者の方に「リンク」だよっ！とわかるように、通常のリンク色にする方法も合わせて説明しますので、まずは自分のリンク色を調べることから始めましょう。

▼　この説明は「シンプル系スキン」限定です。他のスキンの場合はタグの記述が異なります。 ▼

リンク色を調べるには「スタイルシート」を覗きます。覗くだけなので、バックアップは必要ないと思います。

スタイルシートを開いたら、 /* リンクの色と装飾 */ という記述を探してください。比較的上にありますから、スクロールすればすぐ見つかります。このすぐ下の a:link { color:# cf5527 ;text-decoration:underline; } のカラーコードがリンク色なので、メモしておいてくださいね。

※ この HTML は私のスキンのものです。スキンごとにそれぞれ違うカラーコードが記述されています。

リンク色がわかりましたら、いよいよインフォメーションリンクへナビゲーションリンクを追加してみましょう。
この方法は、「メイン」、「アーカイブ」、「１記事」の HTML に追記します。作業をする前にそれぞれの HTML のバックアップをとっておいてくださいね。

CSSやHTMLファイルのバックアップの方法

▼ それではやり方の説明です ▼

「メイン」の HTML を開いたら、 <div class="entryInfo">投稿者：で始まる記述を探してください。
上からスクロールして投稿者：に注意して探せばすぐ見つかります。

この記述は、かなり長く記述されていて延々続きますが、カンタンに説明しますと、 <div class="entryInfo"> は、最後に </div> で閉じられていますので、この </div> の手前に以下のタグを追記すれば、トラックバック(0) の横にナビゲーションリンクが追加されます。

テキストをリンク色で表示させるために、このページのTOPへ ▲ をリンク色に変更するタグで囲ってあります。 ※ この記述の TOP は半角英数ですが、ナビゲーションリンクでの半角英数は小さく表示されますので、気になる方は全角で入力すれば高さが揃います。

｜<a href="#container"><span style="color:#cf5527;">このページのTOPへ ▲</span></a>

<div class="entryInfo">投稿者：<a href="{$BlogEntryWriterUrl$}" target="_blank">{$BlogEntryWriterName$}</a>｜{$BlogEntryDate format="%H:%M"$}<BlogEntryIfCategory>｜<a href="{$BlogEntryCategoryLink$}">{$BlogEntryCategory$}</a></BlogEntryIfCategory><BlogEntryIfAllowComments>｜<a href="{$BlogEntryPermalinkUrl$}#comments">コメント({$BlogEntryCommentCount$})</a></BlogEntryIfAllowComments><BlogEntryIfAllowPings>｜<a href="{$BlogEntryPermalinkUrl$}#Trackback">トラックバック({$BlogEntryTrackbackCount$})</a> </BlogEntryIfAllowPings>
｜<a href="#container"><span style="color:#cf5527;">このページのTOPへ ▲</span></a> </div>

わかりやすいよう、 <a href=" #container "> で指定してありますが、 #main を指定したい方は、 #container を #main に変更してください。

｜<a href="#main"><span style="color:#cf5527;">このページのTOPへ ▲</span></a>

追記ができましたら、「プレビュー(P)」で確認してください。インフォメーションリンクの最後に「このページのTOPへ」のテキストリンクが表示されますので、押してみて目的の上部に移動できたら成功です。「保存(S)」を押して終了です。

同様に「アーカイブ」に同じ内容のタグを追記してください。確認方法は「メイン」と同じです。
必要がある場合は「１記事」にも追記してください。「１記事」の場合は１行で記述されていてすので、行の最後にあります、 </div> の手前に追記してください。

これで表示することはできましたが、リンクを際立たせるために右寄せにしたい方は、スタイルシートでインフォメーションリンクを右寄せにする必要があります。こちらの作業は気になる方だけ行ってください。

▼ ナビゲーションリンクを右寄せにする方法 ▼

スタイルシートのバックアップを取りましたら、１番下の方に記述してあります、 /* 記事表示部分 */ を探して、その下の項目の #entries .entryInfo に、右寄せにする text-align:right; を追記してください。

#entries .entryInfo {
　　　　　　　　border-bottom: 1px dashed #ccc;
　　　　　　　　background: #ffffe0;
　　　　　　　　padding:3px;
　　　　　　　　font-size: x-small;
　　　　　　　　color: #999;
text-align:right;
}

いかがでしたでしょうか？これで今後自動的にインフォメーションリンクにナビゲーションリンクが表示されます。
リンクの内容を変更したり、削除するのも HTML の記述を変更すれば、一発で変更したり削除することができますので、ぜひ、試してみてくださいね。

次回はヘッダーの下にナビゲーションリンクを表示する方法です。よろしくお付き合いくださいませ。(´・ω・`)ｂ

※ 上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります

≪　前の記事に戻る　｜　次の記事を読む　≫