メインコンテンツの上部にバナーやコンテンツを設置する方法
例えばこのサイトのトップページはご覧いただければわかりますが、メインコンテンツ（サイドバーや「最新情報」などよりも上）にメニューとなるコンテンツを設置しています。
またこのサイトではユーザビリティの観点からやっていませんが、よく他サイトなどでやっている例だと、メインコンテンツ（記事ページなど）の上にメルマガや無料プレゼントの案内のオプトインフォームを設置して、メールアドレスの収集をしていたりします。
ただどちらかというと、広告バナーやオプトイン（メルアド収集）のフォームは記事下（コンテンツより下）に配置するのが主流なので、コンテンツより上に設置する、という場合はトップページのメニュー項目などに使うことが多いのではないかと思います。
それではこの作り方を見ていきましょう。
メインインデックスのテンプレートを編集
トップページは「外観―＞テーマ編集」の「メインインデックスのテンプレート」を編集します。以下の項目を探してください。
<!--▲パン屑ナビ-->
<?php } ?>
この部分にソースを追加します
<!--▽メイン＆サブ-->
<div id="main-and-sub">
<!--▽メインコンテンツ-->
<div id="main-contents">
この「パン屑ナビ」と「メイン＆サブ」のあいだにコンテンツを追加すると、「最新情報」や「サイドバー」より上の部分にまるまるコンテンツを追加することができます。
この部分にコンテンツを追加したいときには、divタグを使います。まずはその前に「外観―＞テーマ編集」の「design.css」を開いて、CSSに以下のソースを追加してください。
#main .top_box{
width: 950px;
float: left;
background-image: url(背景画像のURL);
background-repeat: no-repeat;
background-color:#fff;
height: 650px;
clear: both;
margin-bottom: 20px;
}
青文字の部分は必要に応じて変更してください。widthでコンテンツの幅、heightでコンテンツの高さ、background-imageで背景画像（必要がある場合）、background-colorで背景色を指定します。
次に、先ほどの「メインインデックスのテンプレート」に以下のような追加をします。
<!--▲パン屑ナビ-->
<?php } ?>
<div class="top_box">
設置したいコンテンツ内容
</div>
<!--▽メイン＆サブ-->
<div id="main-and-sub">
<!--▽メインコンテンツ-->
<div id="main-contents">
このdivタグのなかに画像を設置したり、あるいは文章やメニューなどを設置することができます。それでは今回は以上です。
以下の記事で賢威の特徴や魅力について詳しく解説していますので良かったらご覧ください。豪華な特典のプレゼントもあります。
賢威がアフィリエイターに選ばれる理由 当サイト限定の賢威の購入特典はこちら
最近のコメント