パソコンで収入を得るには、アフィリエイトがお薦めです!!

アメブロにグローバルメニューを追加するには

2010/05/27 - 01:45

このブログに「グローバルメニュー」
を付ける事に成功して、気を良くした私。

詳しくは前記事参照

今度はアメブロにもグローバルメニューを
つけちゃおうっと♪

と、チャレンジしてみました。
参考にしたのは、ワードプレスの時と同じ
無料レポートです。

２回目だから、簡単簡単…。
鼻歌交じりに取り組んでみたものの

甘かった･ﾟ･(つД｀)･ﾟ

アメブロってHTMLがいじれないのだそうで、
他の無料ブログなんかと違って
カスタマイズが難しいんですね～。

でも、なんとかそれっぽいものが出来たので
覚え書きの意味で記録を残しておきます。

ヘッダー画像　800×100　を使用。
 

●「サイドバーの設定」　⇒　「フリースペースの編集」を選び以下を貼りつけ保存。

<div id="hmenu">
<div id="hnavi"><ul>
<li><a href="ここにURLを入れる" title="">×××</a></li>
<li><a href="ここにURLを入れる" title="">×××</a></li>
<li><a href="ここにURLを入れる" title="">×××</a></li>
<li><a href="ここにURLを入れる" title="">×××</a></li>
<li><a href="ここにURLを入れる" title="">×××</a></li>
</ul></div></div>

 (※実際にはフリースペース内の改行は無し)

●「デザインの変更」　⇒　「スキンのCSSの編集」を選び以下を追加

/*グローバルメニューっぽいもの—————————————————- */
#hmenu{
width:800px;
height:20px;
position:absolute;
top:-20px;
right:-25px;
}

#hnavi {
width:50em;
height:3em; 
margin: 0;
padding :0;
white-space:nowrap;
}
#hnavi ul {
margin: 0;
padding :0;
list-style-type : none;
}
#hnavi li {
display : inline;
padding :0;
margin:0;
float:left ;
}
#hnavi a {
display:block;
border:2px dotted #aac;
background-color:#dde;
font-size:x-small;
padding:1px 0px 1px 0px;
text-decoration:none;
color:#557;width:7em;
height:1.5em;
margin:0px 5px;
text-align:center;
}
#hnavi a:hover {
display:block;
border:2px dotted #aca;
background-color:#ded;
font-size:x-small;
padding:1px 0px 1px 0px;
text-decoration:none;
color:#575;
height:1.5em;
text-align:center;
} 

スキンによって微妙に表示され方が違うので、調整が必要です。
私はCSSは殆ど分からないので、修正しては表示させて微調整しました(^_^;)

　　完成!! 

「×××」「×××」っていうところにメニューの文字が入ってきます。

なかなかいい出来～、かな!?