全スキン共通で使える！スキンと同じデザインになるサイドバーの項目作成タグ

ファンブログカスタマイズ：サイドバー編投稿日：2009年08月04日 19:00

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

全てのスキンで共通に使える、サイドバーの項目作成タグのご紹介です。全スキン共通なので、スキンを変更しますと、サイドバーのデザインも自動的に変わる優れものです。

このタグを項目に貼るだけで、サイドタイトルや隙間の設定も自動的に調整されますので、現在使用しているスキンと同じデザインで表示されます。カスタマイズできないスキンの方でもご利用になれます。

今回ご紹介しますのは、サイドバーのタイトルバーだけでなく、項目全体を CSS で指定するタグになります。
前回の CSS 指定のタイトルバー同様、CSSで変更した内容はそのまま反映され、同じデザインになります。
カンタンに設置できるよう、タグをご用意しましたのでお試しくださいませ。

▼ 今日のおみやげ ▼

お持ち帰りの際は「コメント」などを残していただけますと励みになります。
元気のミナモト！≫ 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>
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>	
<div class="side_text">
<!--入力初め-->



<!--入力終わり-->
</div>
</td></tr></table></td></tr></table><div align="center">
<img src="{$BlogTmplUrl$}img/spacer.gif" align="absmiddle" width="5" height="10"></div>

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

お持ち帰りいただいた「タグ」をサイドバーの「項目」に貼るだけです。あとは ★ここにタイトル★ をお好みのタイトルに変更して  から  の間に、テキストを入力したりバナーを貼ってください。

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

前回のタグに付け加えた記述は、タイトルバーのヘッダーとフッター、画像表示用と項目記事用のｔable、最後の隙間を調整するスペーサーです。タイトルバーのヘッダーとフッター及び、スペーサーは私が使用していますスキンの番号になっていますが、どのスキンでも同じものなので変更しなくても問題ありません。
※ 2012/05/04 ：使用しているスキンの番号が表示されるように記述を修正しました。

本来、ご自分で作成します項目はサイドバーの幅で使用できますが、追加した項目記事用の table には <div class="side_text"> ～ </div> を記載することにより、そのスキン特有の隙間を表示させ、既存のものと揃うようにしてあります。

タイトルバーは同じものを表示させたいけれど、サイドバーの幅は有効に使いたい方は、前回のタイトルバーのタグを全スキン対応のものに差し替えましたので、そちらからタイトルバーだけのタグをお持ち帰りくださいませ。

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

いかがでしたでしょうか？貼るだけで、スキンと同じデザインの項目を作ることができ、スキンを変更しても新しいスキンのデザインに自動的に変更されますので、ぜひお試しくださいませ。

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

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

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