読者です 読者をやめる 読者になる 読者になる

黒猫’s diary

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

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

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

http://www.flickr.com/photos/23042180@N00/15703665686

photo by jacme31

 

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

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

ページメニューのサブメニュー作成について

まとめます。

 

 アクセスを呼べるブログデザインについて

HTMLとCSSの知識のみで作成できるページ

メニューについて以前に説明しました。

 

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

 

更に便利に使用できるサブメニューについても

取り上げてみます。また、本ブログのメニュー

「最新記事」以下に実際に作成しています。

 

 ページメニューのサブメニュー作成

 

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

横メニューと言われています。サブメニューも

プルダウンメニューともいわれます。

 

f:id:yukikk:20141218204252p:plain

 

ページメニュー等とサブメニュー等で検索して

調べられます。しかし間違っているわけでは

有りませんが、そのまま利用すると表示や

動作に問題が出てきます。

 

本ブログでは初心者の方が利用した場合に、

実際に起こる問題点を参考例として挙げて

行きます。

 

サブメニューもリスト要素で作成します。

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

 

ブラウザ表示

  • リスト例1
  • リスト例2
  • リスト例3
    • サブリスト例1
    • サブリスト例2

 

HTML記述:

<ul>
<li>リスト例1</li>
<li>リスト例2</li>
<li>リスト例3

  <ul>
  <li>リスト例1</li>
  <li>サブリスト例2</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="記事17URL">記事17</a></li>
 <li><a href="記事16URL">記事16</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;」で高さを0

にして最初は非表示としています。また、サブ

メニューは縦並びなので横並びを解除しています。

 

※横表示の解除には「float: none;」も使用されます。

 

そしてマウスがサブメニューを持つメインメニュー

の上に来た時に高さや表示を元に戻しています。

 

ブログの設定はページメニューと同一です。前記事を

呼んだ方は次の段落まで読み飛ばしてもらえます。

 

はてなブログの場合を例に示します。管理画面の

ダッシュボードを開きます。

 

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

 

サブメニュー利用時の問題と改善

 

ページメニューのサブメニュー作成方法を検索で

調べてFC2やはてなブログで確認しましたが、その

ままでは上手く動きませんでした。

 

FC2の場合には、利用するテンプレートにより

サイドバーや記事位置が固定されていて、ブログ

ヘッダー画像の下に設定したページメニューやサブ

メニューの一部が表示されませんでした。

 

 

f:id:yukikk:20141218213342p:plain

また、はてなブログでは「ヘッダー」領域が設けて

ありますが、表示順序が設定していないのでサブ

メニュー表示時に下に表示されます。

 

f:id:yukikk:20141218214738p:plain

 

また、「記事16」等の記事本文領域上にあるサブ

メニューにマウスを動かすとマウスオーバーが解除

されて、サブメニューが表示されなくなります。

 

対策1:

FC2テンプレート等の「ヘッダー」領域が個別に

用意さないテンプレートでは自身で「ヘッダー」

領域を作成する。「<div>・・・</div>」を追加

追加する。

 

対策2:

サブメニューが表示順の関係で下になってしまう

場合は表示順を設定する。

 

#top-editarea div {
position: relative; /* 位置指定 */
z-index: 2; /* 表示順序指定 */
}
#content div {
position: relative; /* 位置指定 */
z-index: 1; /* 表示順序指定 */   
}

 

「top-editarea」や「content」は、はてなブログ

利用している「デザインテーマ」でページメニューと

記事本文のある「div」タグのIDです。

 

尚、「z-index」による表示順は「position」が指定

されていないと反映されません。

 

対策3:

サブメニューが記事本文に掛かっているとサブメニュー

上にマウスを動かすとサブメニューを表示している

マウスオーバーが解除されてサブメニューが表示され

なくなります。ヘッダーメニューの領域をサブ

メニューの表示に十分な高さを確保する。

 

<div height="100"></div>をHTMLにページメニュー

作成時から追加した理由です。

 

まとめ

 

ご紹介したサブメニューのHTMLやCSSもご参考と

してのご紹介となります。ご利用環境により変更は

必要とはなりますが、実際に本ブログで使用して

稼働しているものです。

 

サブメニューの作成についてご説明するものです。

ご利用を推奨するものでは有りません。

 

検索サイトで調べてサブメニューを紹介している

ものは大変ありがたいのですが、実際に利用すると

利用する環境でご紹介した様な対応が必要になって

きます。

 

紹介している物も実際にブログで使用されていな

かったりする事もあったので、ご参考までに掲載して

見ました。またIE11やGoogle Chromeで不十分

とは思いますが検証しています。