ＣｕｓbｌO

忍者ブログテンプレートカスタマイズ　ブログテンプレートＣＳＳ／ＨＴＭＬカスタマイズ覚書　忍者用ブログテンプレート作成中

サイドバープラグインごとを背景画像で綺麗に囲む

03/14(Sun)  YESR2010

 プラグインヘッダー作成
ラインで区切るのではなく
１つ１つのプラグインを囲んで

飾るための説明

 

タイトル（ＴＯＰヘッダーなど）　説明　内容　フッダー　の４部構成
背景画像連結はプラグインＣＳＳ余白　margin(外）・padding（内）で微調整

 

CSS　プラグイン欄に追加

.PluginFooter {

height:24px;/*画像の高さに合わせる*/

background:url(画像ＵＲＬ) no-repeat;

}

 

HTML　各プラグインに追加

<div class="PluginFooter">

          </div>

サンプル<!--plugin数-->　数はプラグインの数字１～５

<!--plugin1-->

        <div class="PluginInnerBlock">

          <div class="PluginTitle <!--$plugin_title_align-->">

            <!--$plugin_title-->

          </div>

          <div class="PluginContentsBox">

            <div class="PluginExplanation <!--$plugin_explanation_align-->">

              <!--$plugin_header_explanation-->

            </div>

            <div class="PluginContents <!--$plugin_contents_align-->">

              <!--$plugin_data-->

            </div>

            <div class="PluginExplanation <!--$plugin_explanation_align-->">

              <!--$plugin_footer_explanation-->

            </div>

          </div>

          <div class="PluginFooter">

          </div>

        </div>

      <!--/plugin数-->

 

PR

• カラムとサイドバーとプラグイン
• Trackback()
• Comment(0)
  記事編集  △ＵＰ

この記事にコメントする

お名前
タイトル
文字色	Shironeri Sumire rindou LimeGreen SeaGreen Teal FireBrick Tomato IndianRed BurlyWood SlateGray DarkSlateBlue LightPink DeepPink DarkOrange Gold DimGray Silver
メールアドレス
URL
コメント
パスワード
管理人だけに表示

タイトルにじ色« HOME »サイドバーを上に伸ばす