ブログでアフィリエイトを初めての初歩!ページメニュー作成とサイドバーカスタマイズ
ブログでアフィリエイトを始める方へ
アフィリエイトのブログで稼ごうとする人に、
同じブログ初心者の筆者が初めてから知った
ブログページカスタマイズについてまとめます。
記事の投稿数も増えてきた時に、アクセス数を
増やしたいと思い、アクセスを呼べるブログ
デザインについて考えます。
そこでページメニューとサイドバーのカスタ
マイズについて取り上げてみます。
ページメニュー作成
ブログを始めてアクセスが増えないと他の
サイトを参考にしてみます。するとデザイン
の工夫に気付きます。
ページメニューの他にグローバルメニューや
横メニューと言われるものです。
ページメニューやグローバルメニュー等で
検索してもらえれば詳細な設定が調べられます。
本ブログでは初心者の方がどのように作成して
いるのか概要をつかめる様に、必要最小限の構成
にして説明していきます。
リスト要素があります。以下の様なものです。
ブラウザ表示:
- リスト例1
- リスト例2
- リスト例3
HTML記述:
<ul>
<li>リスト例1</li>
<li>リスト例2</li>
<li>リスト例3</li>
</ul>
上記のリストを使用してページメニューが実現
できるのです。尚、HTMLの「div」を使用して
実現したものも有ります。
本ブログに例として作成したもののHTMLと
CSSを示します。
HTML:
<ul id="GlobalMenu">
<li><a href="カテゴリ一覧URL">カテゴリ一覧</a></li>
<li><a href="最初の記事URL">最初の記事</a></li>
</ul>
※URL以外は、そのまま記載しています。
CSS:
ul#GlobalMenu {
height:25px; /* 高さ */
width: 100%; /* 横幅 */
background-color:#003300; /* メニュー枠の背景色 */
float:left; /* リストを横に並べる */
padding-left:0px; /* メニューバーの左マージン */
}
#GlobalMenu li {
list-style-type:none;/* リストに付く番号等を指定 */
float:left; /* リストを横に並べる */
line-height:25px; /* リスト高さ */
}
#GlobalMenu li a {
display:block;
/* クリック範囲を文字だけでなくブロックとする */
text-align:center;/* 文字中央揃え */
width:100px; /* メニューボタンの幅 */
border-right:1px solid #333333;
/* メニューボタンの区切り線 */
color:#ffffff; /* 文字の色 */
background-color:#003300;
/* メニューボタンの背景色 */
}
#GlobalMenu li a:hover{
color:#00ff00; /* マウスが上に来た時の文字色 */
background-color:#0000ff;
/* マウスが上に来た時の背景色 */
}
CSSではリストの横並び指定やボタン化や背景色等
を設定しています。
これをブログページに設定していきます。はてな
ブログの場合を例に示します。管理画面のダッシュ
ボードを開きます。
左メニューの「デザイン」を選択します。
画面左の工具アイコンを選択します。
左メニューの「ヘッダー」ー「タイトル下」と
選択していきます。
ここにHTML部分を貼り付けます。
次に「{}デザインCSS]を選択して、
同様にCSS部分を貼り付けます。
サイドバーのカスタマイズ
ブログ筆者の場合ですと、サイドバーのカテゴリ
を見栄えを良くしたいと考えました。また過去
記事へのリンクも貼りたいと考えています。
これは基本のHTMLのリンクタグを貼るだけです。
<a href="リンク先URL">表示名称</a>
カテゴリをカスタマイズしたサイドバーの例を
以下にしめします。
はてなブログを例にすると管理画面のダッシュ
ボードのデザインの工具アイコン選択までは
同様にして、「サイドバー」ー「モジュール追加」
を選択していきます。
モジュール「</>HTML」を選択して「タイトル」ー
「<p>....</p>」を書き換えます。
カテゴリ一覧は勿論標準で利用できますが、
デザインに不満がある場合等に利用できます。
また、今回はHTMLのリンクを示しましたが、
ページメニューと同様にマウスが上に来た時に
表示を変えたり画像リンクを使ったりとHTML
とCSSの知識を使って任意にデザインを改良
できます。
画像を使った例を本ブログの右サイドバーの
一番下に例として使ってみました。文字の
画像を利用しています。
HTML:
<a href="カテゴリ図リンクURL">
<img src="図のURL" alt="カテゴリ図リンク">
</a>
まとめ
初心者以外の方には当たり前の事かも知れませんが、
ブログを始めて数カ月の方には戸惑う事もあるかと
思いまとめました。
最新記事の一覧のサイドバーへの表示は、標準機能
として利用できますしサムネイル図を合わせて
表示する事も検索すれば調べられます。
しかし、カテゴリ一覧等の標準のデザインを利用
したくない場合などには、ご紹介した方法が利用
できます。
実現方法を示す事を重点にしましたので、CSS
等はデザインや使用するテンプレートで設定を
追加する事もあり得ます。
しかしページメニューやサイドバーのカスタマイズ
のイメージはつかめると思いますので、まとめて
みました。