こんにちは、ユウトです。
今回は、賢威のトップページにバナー画像、メルマガ登録フォーム、広告などのコンテンツを設置する方法について、私の備忘録のためにまとめておきます。
トップページにコンテンツを挿入する方法
まずは、ワードプレス管理画面から、外観、テーマの編集へと進み、以下の画像のように、メインインデックスのテンプレート(index.php)を開きます。
そして、下へとスクロールして、次のコードが記述されている箇所を見つけてください。
<!–▽メインコンテンツ–>
<div id=”main-contents”>
このコードの下にコンテンツを挿入するためのコードを記述していきます。
もちろん、シートに変更を加える前に、バックアップをとっておきましょう。
今回は、「アドセンス初心者講座」と題したh2見出しタグを表示させ、その下にバナーを横に並べた状態で設置する方法について解説します。
先に結論から言うと、以下のコードを記述することで、上の画像のように、バナーを横並びで設置させることができます。
<h2>アドセンス初心者講座</h2>
<table style=”border-color: #ffffff;”><tbody>
<tr><td style=”border-color: #ffffff;”>
<a href=”http://yuuto-ads.com/category/google-adsense/access-bakuhatsu/” target=”_blank” title=””><img src=”http://yuuto-ads.com/wp-content/uploads/2015/12/アクセス爆発３.png” width=”315″ height=”273″ border=”0″ /></a>
</td>
<td style=”border-color: #ffffff;”>
<a href=”http://yuuto-ads.com/category/tool/keni/” target=”_blank” title=””><img src=”http://yuuto-ads.com/wp-content/uploads/2015/12/賢威３.png” width=”315″ height=”275″ border=”0″ /></a>
</td>
</tr>
</tbody></table>
まず、赤文字部は、上の画像において左側のバナーを表示させるためのコードであり、青文字部が右側のバナーを表示させるためのコードです。
そして、これらの画像をtbodyというテーブルタグを用いて、横並びに表示させています。
なお、ピンク色でマークしたコードにより、表の枠線の色は背景と同色である白色に指定しています。
まとめ
トップページにコンテンツを設置したい方は、メインインデックスのテンプレート(index.php)に必要なコードを挿入してください。
画像を横並びで整列させたり、表でまとめる場合にはテーブルタグがおすすめです。
※追記
スカイプ無料相談会のバナーを設置したときのコードを備忘録としてまとめておきます。
<a href=”http://yuuto-ads.com/skype_free/” target=”_blank” title=””><img src=”http://yuuto-ads.com/wp-content/uploads/2016/01/スカイプ相談1-30.png” width=”620″ height=”350″ border=”0″ /></a>
