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

torinos 〔トリノス〕

雑談したり、手芸したり、ジャニーズ愛でたり。

超初心者のはてなブログカスタマイズ ~グローバルメニューなるものをつけてみる、の巻~

けっこうがんばって書いた記事をいくつか間違って消してしまったことに気づいて落ち込んでるトリです。どうもこんにちは。

そんな中、3日程前から取り掛かっていたものの、思うようにできず悩み続けていたグローバルメニューなるものを実装してみました。タイトル下で横に並んでるメニューたちのことです。

f:id:to_torinos:20150307160845j:plain

アイコンは完全トリノスオリジナルでございます。

こういうの作るのは楽しいんだけどね…これが思うようにいかないったらなくてね…

 

合ってるかどうかすらわからないけど、

ヘッダー下の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; 

 を指定してみました。

 

合ってる?合ってるのこれ(笑)?

 

----------------------------------------------------------------------------------------------------------

★参考にさせていただいたサイト様

 

基本形はこちらを参考に。

横並びメニュー|CSSの小技(指定テクニック)

テキストの前に画像をつける方法はこちらを参考に。

見出しの先頭に画像を表示する:CSS小技

そして、こちらにあったコードで実装のイメージを掴ませていただきました。

はてなブログのヘッダーにナビゲーションをつけよう! - 現代版徒然草 (生まれてきたら負け)

お世話になりました!またきっとお世話になります!

----------------------------------------------------------------------------------------------------------

 

★ほんとはもっとこうしたかった、も残しておく。

・ヘッダーの高さを狭く(低く?)したかった

・タイトル画像とメニューバーの距離も狭くしたかった

・TOPへ戻るリンクが存在しているであろうエリアがどーーーーーーーしても狭くならなかったけど狭くしたかった

・ メニューバーの位置だけ上に寄せるとメニューバーにそれぞれ指定したリンク先に飛ばずTOPに飛ぶ。メニューバーのリンクが効かないのは何故!?

 

----------------------------------------------------------------------------------------------------------

 

ところで、ブログ記事のバックアップってどうやって取っておけばいいんですかね…?

何の役にも立ってない記事だったけど、やっぱりちょっとショックでした…

 

すっきりしないお天気だし、なんだか切ない土曜の夕方です…

 

 

スポンサーリンク