超初心者のはてなブログカスタマイズ ～グローバルメニューなるものをつけてみる、の巻～
けっこうがんばって書いた記事をいくつか間違って消してしまったことに気づいて落ち込んでるトリです。どうもこんにちは。
そんな中、３日程前から取り掛かっていたものの、思うようにできず悩み続けていたグローバルメニューなるものを実装してみました。タイトル下で横に並んでるメニューたちのことです。
アイコンは完全トリノスオリジナルでございます。
こういうの作るのは楽しいんだけどね…これが思うようにいかないったらなくてね…
合ってるかどうかすらわからないけど、
ヘッダー下のHTMLには
<div id="globalnavi">
<ul>
<li><a href="リンク先"><img src="画像">こぎん刺し</a></li>
<li><a href="リンク先"><img src="画像">編んだり縫ったり</a></li>
<li><a href="リンク先"><img src="画像">はてなブログカスタマイズ</a></li>
<li><a href="リンク先"><img src="画像">雑談してます</a></li>
</ul>
</div>
と指定して、
CSSの中には、
/* タイトル画像下メニューここから */
#globalnavi{
margin: 20px 0;
padding: 0;
}
#globalnavi ul{
text-align: center;
width: 100%;
margin: 0;
padding: 0;
font-size: 95%;
}
#globalnavi ul a img{
vertical-align: middle;
margin-right: 10px;
}
#globalnavi li{
display: inline-block;
padding: 8px 10px;
}
#globalnavi a{
text-align: middle;
display: block;
padding: 10px 0;
width: 100%;
background-color: #fff;
color: #8e8d8d;
}
#globalnavi a:hover{
background-color: ;
color: #ffdd00;
}
を指定してみました。
合ってる？合ってるのこれ（笑）？
----------------------------------------------------------------------------------------------------------
★参考にさせていただいたサイト様
基本形はこちらを参考に。
テキストの前に画像をつける方法はこちらを参考に。
そして、こちらにあったコードで実装のイメージを掴ませていただきました。
はてなブログのヘッダーにナビゲーションをつけよう！ - 現代版徒然草 (生まれてきたら負け)
お世話になりました！またきっとお世話になります！
----------------------------------------------------------------------------------------------------------
★ほんとはもっとこうしたかった、も残しておく。
・ヘッダーの高さを狭く（低く？）したかった
・タイトル画像とメニューバーの距離も狭くしたかった
・TOPへ戻るリンクが存在しているであろうエリアがどーーーーーーーしても狭くならなかったけど狭くしたかった
・ メニューバーの位置だけ上に寄せるとメニューバーにそれぞれ指定したリンク先に飛ばずTOPに飛ぶ。メニューバーのリンクが効かないのは何故！？
----------------------------------------------------------------------------------------------------------
ところで、ブログ記事のバックアップってどうやって取っておけばいいんですかね…？
何の役にも立ってない記事だったけど、やっぱりちょっとショックでした…
すっきりしないお天気だし、なんだか切ない土曜の夕方です…
スポンサーリンク
