Home > FC2ブログ > basic_white > basic_whiteテンプレート ヘッダーの下に横幅の広いバナーなどを設置

basic_whiteテンプレート ヘッダーの下に横幅の広いバナーなどを設置

 basic_whiteテンプレートのヘッダーの下にバナー・広告などのコンテンツを設置する方法です。

 コンテンツの横幅はサイドバーまでを含んだ全体幅と同一になります。

 記事上部の範囲に設置したい時はヘッダーとメイン記事の間のスペースに設置をご覧ください。

1. HTML

 場所はCtrl+Fキーで『id="wrap』を検索。直後に次の強調部分のコードを追加します。

<div id="wrap">
<div class="top-contents">
ここにバナーなどのコンテンツを入れる
</div>

<div id="main">

2. スタイルシート

 場所はCtrl+Fキーで『#main {』を検索。次の強調部分のコードを変更・追加します。margin-topとpadding-topは0にします。-36pxを0pxにします。

#main {
  float: left;
  position: relative;
  width: 100%;
  margin-top: 0px;
  margin-right: -340px;
  text-align: left;
}
body .top-contents {
  margin-top: 0;
  margin-left: 0px;
  padding: 15px 0px 15px 0px;
  text-align: left;
}
#main_contents {
  margin: 0px 340px 0 0; /* 2番目の数字(右側)はsidemenuのwidthの変更に合わせて調整して下さい */
  padding-top: 0px;
}
#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 320px; /* サイドメニューの幅 */
  padding-top: 0px;
}

 border-topは0にします。

#main {
  border-top: 0px dotted #B5B5B6;
  border-bottom: 1px dotted #B5B5B6;
}

 以上で完成です。

※このブログで紹介している他のカスタマイズで今回の変更箇所と関係のあるコードを追加している場合はそちらも同様に変更してみてください。


テキストや画像の中央寄せ

 設置したテキストや画像をセンタリングする時はleftをcenterに変更します。

body .top-contents {
  margin-top: 0;
  margin-left: 0px;
  padding: 15px 0px 15px 0px;
  text-align: center;
}

 文字サイズも指定する時はfont-sizeを加えてください。

body .top-contents {
  margin-top: 0;
  margin-left: 0px;
  padding: 15px 0px 15px 0px;
  text-align: left;
  font-size: 14px;
}

余白を入れて横の開始位置を調整

 paddingの4番目の数値を増やすと左余白が増加します。

body .top-contents {
  margin-top: 0;
  margin-left: 0px;
  padding: 15px 0px 15px 50px;
  text-align: left;
}

 paddingの2番目の数値を増やすと右余白が増加します。

body .top-contents {
  margin-top: 0;
  margin-left: 0px;
  padding: 15px 50px 15px 0px;
  text-align: left;
}

全体幅の調整

 横幅が800px以上のコンテンツを設置する場合は以下に掲載されている全体幅の最小幅を調整してください。初期値のままだとウインドウを狭めた時に設置したコンテンツが隠れる恐れがあります。

#container { min-width: 800px; }
#headermenu , #wrap ,
#footer_plg , #footer_inner {
  min-width: 800px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 802? "800px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
}

#header h1,
#header p {
  min-width: 785px;
  max-width: 1185px;
  width:expression(document.body.clientWidth < 802? "800px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
  margin: 0 auto;
}

 数値はすべて同じ値だけ増やします。100増やす場合は次のようにします。

#container { min-width: 900px; }
#headermenu , #wrap ,
#footer_plg , #footer_inner {
  min-width: 900px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 902? "900px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
}

#header h1,
#header p {
  min-width: 885px;
  max-width: 1185px;
  width:expression(document.body.clientWidth < 902? "900px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
  margin: 0 auto;
}

※横幅を変更した時にexpressionの行を削除している場合は802と800の数値は無視してください。

関連記事
スポンサー リンク
コメント
#130 : No title
#115です!無事期待していたことができました!

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered