黒猫’s diary

日々時々の事柄をまとめています。

ブログでアフィリエイトを初めての初歩!ページメニュー作成とサイドバーカスタマイズ

ブログでアフィリエイト始める方へ

http://www.flickr.com/photos/29263368@N05/6691141239

photo by Zavarykin Sergey

 

アフィリエイトのブログで稼ごうとする人に、

同じブログ初心者の筆者が初めてから知った

ブログページカスタマイズについてまとめます。

 

記事の投稿数も増えてきた時に、アクセス数を

増やしたいと思い、アクセスを呼べるブログ

デザインについて考えます。 

 

そこでページメニューとサイドバーのカスタ

マイズについて取り上げてみます。

 

 ページメニュー作成

 

ブログを始めてアクセスが増えないと他の

サイトを参考にしてみます。するとデザイン

の工夫に気付きます。

 

ページメニューの他にグローバルメニューや

横メニューと言われるものです。

 

f:id:yukikk:20141210200556p:plain

 

ページメニューやグローバルメニュー等で

検索してもらえれば詳細な設定が調べられます。

 

本ブログでは初心者の方がどのように作成して

いるのか概要をつかめる様に、必要最小限の構成

にして説明していきます。

 

リスト要素があります。以下の様なものです。

 

ブラウザ表示:

  1. リスト例1
  2. リスト例2
  3. リスト例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ではリストの横並び指定やボタン化や背景色等

を設定しています。

 

これをブログページに設定していきます。はてな

ブログの場合を例に示します。管理画面のダッシュ

ボードを開きます。

 

f:id:yukikk:20141117115027p:plain

 

左メニューの「デザイン」を選択します。

 

f:id:yukikk:20141122135731p:plain

 

画面左の工具アイコンを選択します。

  

f:id:yukikk:20141210203446p:plain

 

左メニューの「ヘッダー」ー「タイトル下」と

選択していきます。

 

f:id:yukikk:20141210204111p:plain

 

ここにHTML部分を貼り付けます。

 

次に「{}デザインCSS]を選択して、

同様にCSS部分を貼り付けます。

 

f:id:yukikk:20141210204227p:plain

 

サイドバーのカスタマイズ

 

ブログ筆者の場合ですと、サイドバーのカテゴリ

を見栄えを良くしたいと考えました。また過去

記事へのリンクも貼りたいと考えています。

 

これは基本のHTMLのリンクタグを貼るだけです。 

<a href="リンク先URL">表示名称</a> 

 

カテゴリをカスタマイズしたサイドバーの例を

以下にしめします。

 

f:id:yukikk:20141210200042p:plain

 

はてなブログを例にすると管理画面のダッシュ

ボードのデザインの工具アイコン選択までは

同様にして、「サイドバー」ー「モジュール追加」

を選択していきます。

 

f:id:yukikk:20141210205315p:plain

 

モジュール「</>HTML」を選択して「タイトル」ー

「<p>....</p>」を書き換えます。

 

f:id:yukikk:20141210205431p:plain

 

カテゴリ一覧は勿論標準で利用できますが、

デザインに不満がある場合等に利用できます。

 

また、今回はHTMLのリンクを示しましたが、

ページメニューと同様にマウスが上に来た時に

表示を変えたり画像リンクを使ったりとHTML

CSSの知識を使って任意にデザインを改良

できます。

 

画像を使った例を本ブログの右サイドバーの

一番下に例として使ってみました。文字の

画像を利用しています。

 

f:id:yukikk:20141210210445p:plain

 

HTML:

<a href="カテゴリ図リンクURL">

<img src="図のURL" alt="カテゴリ図リンク">

</a> 

 

まとめ

 

初心者以外の方には当たり前の事かも知れませんが、

ブログを始めて数カ月の方には戸惑う事もあるかと

思いまとめました。

 

最新記事の一覧のサイドバーへの表示は、標準機能

として利用できますしサムネイル図を合わせて

表示する事も検索すれば調べられます。

 

しかし、カテゴリ一覧等の標準のデザインを利用

したくない場合などには、ご紹介した方法が利用

できます。

 

実現方法を示す事を重点にしましたので、CSS

等はデザインや使用するテンプレートで設定を

追加する事もあり得ます。

 

しかしページメニューやサイドバーのカスタマイズ

のイメージはつかめると思いますので、まとめて

みました。