CSSを指定してサイドバー（項目内）にタイトルバーを表示させる方法

ファンブログカスタマイズ：サイドバー編投稿日：2009年07月07日 01:20

ファンブログ　カスタマイズ　全スキン対応

前回の「サイドバー（項目内）にタイトルバーを入れてみよう」では <table> を使ってタイトルバーを入れてみましたが、今回はスタイルシートの side_title を指定してタイトルバーを表示させる方法を説明します。

この方法でタイトルバーを表示させますと、スタイルシートで指定されたデザインが項目内のタイトルバー全てに反映されますので、全て同じデザインにしたい方はこちらの方法を試してみてください。項目ごとにデザインを変えたい方は前回の <table> を使った方法を試してみてくださいね。

・サイドバー（項目内）にタイトルバーを入れてみよう｜table 編

タグを記述するには、自分のブログのソースからタイトルバーのタグをコピーすればいいんですが、場所を説明するのがとても難しいので、お持ち帰りできる「タグ」をご用意しました。よろしかったらお試しください。

▼ 今日のおみやげ ▼

お持ち帰りの際は「コメント」などを残していただけますと励みになります。
元気のミナモト！≫ FC2 Blog Ranking ≪ 応援お願いします。

<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td class="side">
<div align="center"><img src="{$BlogTmplUrl$}img/side_title_header.gif" align="absmiddle"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="side_title">★ここにタイトル★</td>
</tr></table>
<div align="center">
<img src="{$BlogTmplUrl$}img/side_title_footer.gif" align="absmiddle"></div>
</td></tr></table>

上のボックス内にマウスを置くだけでボックス内のタグが全て選択されますので、右ボタン⇒コピーでお持ち帰りください。

お持ち帰りいただいた「タグ」をバナータグの感覚で、目的の項目内の一番上に貼り付けて、
★ここにタイトル★ の★～★の間に、お好みのタイトルを入力してください。

・サイドバーにバナーを掲載するには

いかがでしたでしょうか？この方法ですとカンタンに同じデザインのタイトルバーが表示できます。
後々、CSSでサイドタイトルのデザインを変更したときも反映されますので、統一感を求められる方にはこちらの方法をおすすめします。

タイトルバーのヘッダーとフッターは私が使用していますスキンの番号になっていますが、どのスキンでも同じものなので変更しなくても問題ありません。
※ 2012/05/04 ：使用しているスキンの番号が表示されるように記述を修正しました。

検証はしておりませんが、旧スキンをご利用の方でもこのタグは使用できると思います。背景に使用されています画像も side_title 内で指定されていますので、同じタイトルバーが表示されると思います。

2009年08月03日：追記　匿名の方から、旧スキンでは表示できないというご報告をいただき、調べましたところ、旧スキンの場合は追加する記述が多くあることが判明しました。検証が終わり次第、記事をアップさせていただきます。
2009年08月04日：記事をアップしました。 ≫ ・全スキン共通で使えるサイドバーの項目作成タグ
2009年08月06日：タイトルバーだけ必要な方のために、全スキン対応のタグに変更しました。

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

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

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