Home > FC2ブログ > basic_white > basic_whiteテンプレート ヘッダーとメイン記事の間のスペースにバナーなどを設置

basic_whiteテンプレート ヘッダーとメイン記事の間のスペースにバナーなどを設置

 basic_whiteテンプレートのヘッダー部分と先頭の記事の間にあるスペースにバナー・広告などのコンテンツを設置する方法です。

 コンテンツの横幅はサイドバーまでを含みません。記事と一緒にフェードイン表示されるようにしています。

 横幅全体に設置したい時はヘッダーの下に横幅の広いバナーなどを設置をご覧ください。

1. HTML

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

<div id="main">
<div id="main_contents" style="display: none">
<div class="top-contents">
ここにバナーなどのコンテンツを入れる
</div>

2. スタイルシート

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

#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 10px 15px 10px;
}

 border-topは0にします。

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

※このブログで紹介している他のカスタマイズで#mainのmarginを指定するスタイルを追加した場合はそちらも同様に変更してみてください。

3. スタイルシート

 場所はCtrl+Fキーで『.grid_content:first-child』を検索。
 すべての該当箇所を「.top-contents + .grid_content」に変更します。下記以外にもある場合はそちらも変更してください。他のカスタマイズでなくなっている場合もあります。

#main_contents .grid_content:first-child, #main_contents .p_area {

#main_contents .top-contents + .grid_content, #main_contents .p_area {

#main_contents .grid_content:first-child .entry_image img, #main_contents .p_area .entry_image img {

#main_contents .top-contents + .grid_content .entry_image img, #main_contents .p_area .entry_image img {

#main_contents .grid_content:first-child .entry_description,
#main_contents .grid_content:first-child .entry_discription {

#main_contents .top-contents + .grid_content .entry_description,
#main_contents .top-contents + .grid_content .entry_discription {

テンプレートの利用時期によっては「~entry_description」の行がない場合もあります。

 以上で完成です。


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

 設置したテキストや画像をセンタリングする時はスタイルに以下のコードを追加します。

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

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

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

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

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

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

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

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

全体幅の調整

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

#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の数値は無視しても構いません。

サイドバーの上部余白の変更

 場所はCtrl+Fキーで『#sidemenu {』を検索padding-topの値を増減させて調整します。「1」にすると上部にくっつきます。

#sidemenu {
  float: right;
  position:relative;
  overflow: hidden;
  width: 320px; /* サイドメニューの幅 */
  padding-top: 1px;
}

関連記事
スポンサー リンク
コメント
#150 : フリースペースの分割表示
こんにちわ。
こちらの記事のフリースペースについて質問させてください。

このフリースペースを、プラグイン3のように2分割、ないし3~4分割させることはできないでしょうか?

2分割したプラグイン3を上部に持ってこようかとも思いましたが、そうすると、ページ下部のフリースペース部分がなくなってしまうので、このフリースペースを分割表示できないかと思った次第です。

お忙しいところ恐れ入りますが、ご回答いただければ幸いです。
どうぞよろしくお願いいたします。
#151 : twitterボタン
TOPページの記事一覧にtwitterボタンを置きたいのですが、なかなかできません。
かれこれ、1ヶ月近く試行錯誤してます(涙)

現在、FC2のボタンではなく他サービスのまとめボタンを使っています。
(FC2のボタンが一番いいのですが、タグが分らなく、他サービスを使ってます。)

タグの挿入位置がおかしいのか、mayさんのようにTBを消して、twitterボタンを入れるか、
「続きを読む」の場所にtwitterボタンを置きたいです。

お手数ですが、教えて頂けますようお願い致します。
宜しくお願い致します。
#157 : 分割&twitterボタン
コンバンハ。

#150 : 分割
<div class="top-contents">

<table cellpadding="0" cellspacing="0" style="width: 100%;"><tbody>
<tr>
<td style="width:50%;">
左のコンテンツ
</td>
<td style="width:50%;">
右のコンテンツ
</td>
</tr>
</tbody></table>

</div>
のように分割されたデザインのHTMLコードをtop-contents内に入れてしまうのが手っ取り早いかと思います。


#151 : twitterボタン
参考にはならないかもしれませんが、取り急ぎFC2のSNSボタンの設置方法のみリンク先URLに掲載致しました。

なお、こちらの記事は「ヘッダーとメイン記事の間のスペースにバナーなどを設置する方法」になります。別のカスタマイズの情報があちこちの記事にあると必要な情報を探しにくくなり、同じ質問が繰り返される恐れがあるため、“コメントは記事と直接関連のある事柄のみ受け付けている”状態ですのでご了承くださいませ。
#206 : No title
トップのグリッド表示の下に広告を入れたい場合は、どうすればよいのでしょうか?
#210 : トップのグリッド表示の下
コンバンハ。
「トップのグリッド表示の下」というのが記事とページナビの間を意味する場合はリンク先URLに設置の手順を掲載いたしましたのでご参考ください。
グリッドの途中という意味であれば構造上手間がかかるのとそれを実現するには広告コードに干渉する必要があり、その行為が規約違反となる可能性が高いので紹介する予定はございません。
ご了承くださいませ。
#310 : No title
大変参考になるページをありがとうございます。参考にしてなんとかカスタマイズを試みているところです。
「グリッド記事を3列にする」を見て、3列表示に変更したのちに、こちらの変更を試みたのですが、うまく表示できませんでした。
変更3にあるように「.grid_content:first-child」がありません。この変更はどのようにしたらよいでしょうか。
大変お手数ですが、教えていただけたら幸いです。
#311 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

コメントの投稿

  

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

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

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

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

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

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