はてなブログでグローバルメニューを設置してみようとしたけれど失敗した話。
はてなブログをカスタマイズしようとしていて検討していたことの1つに「グローバルメニューの設置」がありました。
他のブログさんを拝見させて頂いたりして「どんなのがあるのかな?」って色々と見て回りました。
あるサイトさんでリンクの貼ってあった海外サイトで簡単にグローバルメニューが作れるよ!みたいなのがあったのですが、最終的に有料な感じでした。
無料だったサービスが有料に切り替わったのかもしれませんね。
他にもいくつか見て回りまして、だいたいやることは分かりました。
リストを作ってスタイルシートをあてがうだけ。
昔趣味でホームページを作っていたことがあるので、ソースは持ってる。
リサイクルしよう!
と、せっせと過去の素材を持ってきて必要なところだけコピペして使ってみました。
HTMLのソースを入れるのは「デザインのカスタマイズ」の項目の中にある「ヘッダ」の「タイトル下」の部分。
ここにリストで作った項目を入れました。
プレビュー画面に項目が出現しました。
しかし何やら表示に気になるところが。。。
ひとまず置いといて、今度は「デザインCSS」内にリストをリンクメニュー化するためのスタイルを指定してあげます。
さて、するとプレビュー画面。
納得いかない!!
ヘッダー画像下にビシッとメニューが横一列で決まるはずが、ヘッダー画像とメニューの間に余白が出来ている!
しかもメニューの外にもう一個枠が出来てしまっている!!
これは一体どういうことなのさ!!
と、しばらく考えに老け込んでみまし、、、というかすぐに思い当たったのが、、、。
「ヘッダー下」の要素は1つの<div>タグでくくられているのではなかろうか?
そしてこのdivタグにも何らかのスタイルがあてがわれているのではないだろうか?
ということ。
なのでグローバルメニューを設置するためにはこのdivの要素の外に出してあげないと、ヘッダー画像下に綺麗に並んでくれないのではないだろうか。
そこまで設定いじくれないよね?はてなって。
因みに今現在私が使っているテーマは「Reach」です。
あー、やりたいことが出来ないこのもどかしさ。
オリジナルテーマを作っておられる方はうまいことグローバルメニューをつけていらっしゃったりするのですが、サイドバーが皆さん「右側」にありまして。
私は「左側」が欲しかったりして。
だったら自分でテーマ作ったらいいじゃん!!
ってことになる訳なのですが。
そこまで理解は出来ないんですねー。おろろ。
こんな感じで、めでたくグローバルメニューの設置に失敗したのでした。