アメーバブログの新テンプレートにナビゲーションバー、メニューボタンを設置。成功。

アメーバブログの新テンプレートにナビゲーションバー、メニューボタンを設置。成功。


アメブロがテンプレート一新しましたよね。
旧テンプレートを使っている人が一度切り替えたらもう戻れないと聞いていたけど、まぁ、たいしたことも無かろうと、新テンプレートにしてみたら
一番上にでかい広告がでてきました
そういうことだったんですねー
いたしかたなし
お世話になっているわけですし、貢献させていただきましょう
新テンプレートは、カスタマイズするとわかるんですけど、構造がまるで違った
ナビゲーションバーを作るのにちょっと手間取りましたが、解明しました。
–専門的なお話、CSS興味ない人はスルーして of start–
新テンプレートにはほとんど、div idがないんですね。
ほとんどclassで校正されていて、相対位置になるrelativeを設定できる場所が見つからない見つからない
以前のバージョンだと#frameっていうところにrelativeを置いていましたが、ない!
でも、classでもrelativeを設定できる場所があったんですね
.skinContentsArea
ここです。でも、ここから、absoluteを0 0で設定するとナビゲーションがコンテンツエリアに入ってプロフィール写真とかにかぶってしまう。
もちろん、マイナスなんて設定できない。
でも、これは、padding-topで解消できました。
あとはリストでナビゲーションをまとめるだけ。もちろん、float:left;です。
liの中に画像を組み込めば画像のナビゲーションの完成
–専門的なお話、CSS興味ない人はスルーして of end–
雑な説明でした。ちょっとメモとして取っておきたかったもんで。
さて、お友達やお仕事仲間の皆さん、何かの用事で僕と会うとき、アメブロをカスタマイズして欲しかったらお気軽にお申し付けを。ノーパソとwifi持って行きますから。
もう楽勝です。
ちなみにseesaaやFC2だったら更に簡単。でも、やっぱりアメブロが好き。

お気軽にコメントください!