ブログでアフィリエイトを初めての初歩！ページメニューのサイドメニュー作成
ブログでアフィリエイトを始める方へ
アフィリエイトのブログで稼ごうとする人に、
同じブログ初心者の筆者が初めてから知った
ページメニューのサブメニュー作成について
まとめます。
アクセスを呼べるブログデザインについて
HTMLとCSSの知識のみで作成できるページ
メニューについて以前に説明しました。
ブログでアフィリエイトを初めての初歩！ページメニュー作成とサイドバーカスタマイズ - 黒猫’s diary
更に便利に使用できるサブメニューについても
取り上げてみます。また、本ブログのメニュー
「最新記事」以下に実際に作成しています。
ページメニューのサブメニュー作成
ページメニューは他にグローバルメニューや
横メニューと言われています。サブメニューも
プルダウンメニューともいわれます。
ページメニュー等とサブメニュー等で検索して
調べられます。しかし間違っているわけでは
有りませんが、そのまま利用すると表示や
動作に問題が出てきます。
本ブログでは初心者の方が利用した場合に、
実際に起こる問題点を参考例として挙げて
行きます。
サブメニューもリスト要素で作成します。
リスト要素があります。以下の様なものです。
ブラウザ表示
- リスト例１
- リスト例２
- リスト例３
- サブリスト例１
- サブリスト例２
HTML記述：
<ul>
<li>リスト例１</li>
<li>リスト例２</li>
<li>リスト例３
<ul>
<li>リスト例１</li>
<li>サブリスト例２</li>
</ul>
</li>
</ul>
上記のリスト要素を使用してページメニューのサブ
メニューが実現できるのです。
本ブログに例として作成したもののHTMLと
CSSを示します。
HTML:
<div height="100">
<ul id="GlobalMenu">
<li><a href="カテゴリ一覧URL">カテゴリ一覧</a></li>
<li><a href="最初の記事URL">最初の記事</a></li>
<li><a href="＃">最新記事</a>
<ul >
<li><a href="記事１７URL">記事１７</a></li>
<li><a href="記事１６URL">記事１６</a></li>
</ul>
</li>
</ul>
</div>
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; /* マウスが上に来た時の背景色 */
}
#GlobalMenu li ul {
height:0px; /* 高さ */
width: 100%; /* 横幅 */
background-color:#003300; /* メニュー枠の背景色 */
padding-left:0px; /* メニューバーの左マージン */
clear: both; /* リストを横に並べるのを解除 */
overflow: hidden; /* 表示設定 */
}
#GlobalMenu li ul li {
list-style-type:none;
line-height:0px; /* 高さ */
clear: both; /* リストを横に並べるのを解除 */
}
#GlobalMenu li ul li a {
display:block;
/* クリック範囲を文字だけでなくブロックとする */
text-align:center;/* 文字中央揃え */
width:100px; /* メニューボタンの幅 */
border-right:1px solid #333333;
/* メニューボタンの区切り線 */
color:#ffffff; /* 文字の色 */
background-color:#003300; /* メニューボタンの背景色 */
}
#GlobalMenu li ul li a:hover{
color:#00ff00; /* マウスが上に来た時の文字色 */
background-color:#0000ff; /* マウスが上に来た時の背景色 */
}
#GlobalMenu li:hover > ul {
overflow: visible; /* 表示設定 */
height:auto; /* 高さ */
}
#GlobalMenu li:hover > ul li {
line-height:25px; /* 高さ */
}
#top-editarea div {
position: relative; /* 位置指定 */
z-index: 2; /* 表示順序指定 */
}
#content div {
position: relative; /* 位置指定 */
z-index: 1; /* 表示順序指定 */
}
CSSではリストの横並び指定やボタン化や背景色等
を設定しています。
サブメニュー化では中のリスト要素にも同じ様にCSS
を設定しています。
違いはulの「height: 0px;」と「overflow: hidden;」と
liの「line-height:0px;」と「clear: both;」で高さを０
にして最初は非表示としています。また、サブ
メニューは縦並びなので横並びを解除しています。
※横表示の解除には「float: none;」も使用されます。
そしてマウスがサブメニューを持つメインメニュー
の上に来た時に高さや表示を元に戻しています。
ブログの設定はページメニューと同一です。前記事を
呼んだ方は次の段落まで読み飛ばしてもらえます。
はてなブログの場合を例に示します。管理画面の
ダッシュボードを開きます。
左メニューの「デザイン」を選択します。
画面左の工具アイコンを選択します。
左メニューの「ヘッダー」ー「タイトル下」と
選択していきます。
ここにHTML部分を貼り付けます。
次に「｛｝デザインCSS]を選択して、
同様にCSS部分を貼り付けます。
サブメニュー利用時の問題と改善
ページメニューのサブメニュー作成方法を検索で
調べてFC2やはてなブログで確認しましたが、その
ままでは上手く動きませんでした。
FC2の場合には、利用するテンプレートにより
サイドバーや記事位置が固定されていて、ブログ
ヘッダー画像の下に設定したページメニューやサブ
メニューの一部が表示されませんでした。
また、はてなブログでは「ヘッダー」領域が設けて
ありますが、表示順序が設定していないのでサブ
メニュー表示時に下に表示されます。
また、「記事１６」等の記事本文領域上にあるサブ
メニューにマウスを動かすとマウスオーバーが解除
されて、サブメニューが表示されなくなります。
対策１：
FC２テンプレート等の「ヘッダー」領域が個別に
用意さないテンプレートでは自身で「ヘッダー」
領域を作成する。「<div>・・・</div>」を追加
追加する。
対策２：
サブメニューが表示順の関係で下になってしまう
場合は表示順を設定する。
#top-editarea div {
position: relative; /* 位置指定 */
z-index: 2; /* 表示順序指定 */
}
#content div {
position: relative; /* 位置指定 */
z-index: 1; /* 表示順序指定 */
}
「top-editarea」や「content」は、はてなブログで
利用している「デザインテーマ」でページメニューと
記事本文のある「div」タグのIDです。
尚、「z-index」による表示順は「position」が指定
されていないと反映されません。
対策３：
サブメニューが記事本文に掛かっているとサブメニュー
上にマウスを動かすとサブメニューを表示している
マウスオーバーが解除されてサブメニューが表示され
なくなります。ヘッダーメニューの領域をサブ
メニューの表示に十分な高さを確保する。
<div height="100"></div>をHTMLにページメニュー
作成時から追加した理由です。
まとめ
ご紹介したサブメニューのHTMLやCSSもご参考と
してのご紹介となります。ご利用環境により変更は
必要とはなりますが、実際に本ブログで使用して
稼働しているものです。
サブメニューの作成についてご説明するものです。
ご利用を推奨するものでは有りません。
検索サイトで調べてサブメニューを紹介している
ものは大変ありがたいのですが、実際に利用すると
利用する環境でご紹介した様な対応が必要になって
きます。
紹介している物も実際にブログで使用されていな
かったりする事もあったので、ご参考までに掲載して
見ました。またIE１１やGoogle Chromeで不十分
とは思いますが検証しています。
