以前から付けてみたいなぁって思いながら、大変そうなので付けて無かったグローバルメニューとやらをゴールデン・ウィークの休みを利用してつけてみました。
ムチャクチャ大変でした。約2日ほどかかりました・・・
ハナさんは、CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）なんてモノは全く分かりません。HTML（HyperText Markup Language、ハイパーテキスト マークアップ ランゲージ）なんてものも、カエレバのリンク貼る時くらいしか使わない情弱です。
そんな情弱ハナさんが頼りにしたのが、こちらのサイト
われらがゆきひーさんです。
どうやら、もう一つ新しいのがあったみたいなんですけど、やり始めたのが随分前なのでね・・・
苦労したこと
こちらのサイトを見ると、「コピペでOK」なんて書いてあるものですから、コピペしてみたんですよね。
でもね、コピペしただけだと、
- カテゴリー1
- カテゴリー1-1
って出るだけなんです。
まあ、アタリマエのことなんですけどね。カテゴリーに、このブログ、ハナさんキッチンのカテゴリー名と、そのカテゴリーのURLをコピペしなきゃいけないんですよね・・・コレが大変でした。
カテゴリーの整理
今まで、思うままにタグ付けして、カテゴリーを増やしてきたので、最初にとりかかったのがその整理。
いやぁ、大変でした。
あまり具体的にカテゴリー分けをしちゃぁいけませんね。「PS4」とかじゃなくて、「ゲーム」くらいの大きなカテゴリーにすれば良かった。
スマートフォンのカテゴリーも機種名が入っているので、これからどんどん増えるかもしれません。
さらに、パンくずリストの関係で、親カテゴリ、子カテゴリの順にしなくちゃいけないけどそうなっていないのとかもあったりするんですよね。だからその修正もしたり。
カテゴリーの整理でものすごい時間を使いました。
HTML部分にコピペ
さて、そんな感じでカテゴリーを整理して、いざカテゴリーのURLとカテゴリー名を
コピペしようとすると、結構な数があるんです。
整理したはずなのに、総カテゴリー数は63。親カテゴリーは11。減らしたのにこんなにあります。それから、無理やりカテゴリーに混ぜたりしたので、カテゴリーにはふさわしくないような記事もあったりします。
それで、ポチポチコピペしましたよ、63回もね。正直疲れました。
自動でURLとカテゴリーを吐き出してくれるツールがどこかにないかと探してみましたけどありませんでした。ないよね？
カテゴリーの整理
カテゴリーの整理方法は、はてなブログのカテゴリーをコピーして表計算ソフトのオープンオフィスカルクに貼り付けて並び替えます。
それから、ゆきひーさんのコードをTeraPadにコピーして、それにポチポチURLとかをコピペ・・・
63回繰り返したらHTMLの部分は完成。
完成したら、はてなブログのデザインにコードを貼り付け。
CSSの色の変更
次はCSSです。
CSSもTeraPadに貼り付けて、必要部分を変更です。
ゆきひーさんのグローバルメニューは黒色なのですが、黒色じゃハナさんキッチンの雰囲気に合わないので、水色に変えました。
最初は、大見出しのH3タグ表示の時と同じ色のエンジ色にしようかなとも思ったのですが、ハナさんキッチンのイメージ写真が水色なので水色にしました。
マウスを合わせると桜色になります。
幅が狭くなると、メニューが出ます。
ハナさんの場合、レスポンスデザインのテーマを使っているけど、レスポンスデザインを使ってないので、コレはタブレット用ですね。
良い感じ♪
でも、なんだか隙間が空いちゃうんですよね～。それから、上のところにナゼか一本線が入っちゃうんです。
ナゼでしょうか？
もう少し下に下げるにはドコをいじればよいのでしょうか？
ハナさんには分かりません・・・
スポンサーリンク
パンくずリストも付け足しました
以前からパンくずリストは付けてましたけど、親子関係がめちゃくちゃで上手く表示できてないのがあったので、今回カテゴリーを修正しました。
それで、パンくずリストについて調べていたら、すなばいじりさんのブログで最新仕様のパンくずリストっていうのがあるのを見つけたので、付けてみました。
今までもパンくずリストをつけてましたが、ドコに何をコピペしたのか分からないので、もしかすると、二重になっているかもしれません。
良いのかな？
まとめ
HTMLやCSSが分からない永遠の初心者のハナさんでも、時間をかければなんとかグローバルメニューを付けることが出来ました。
記事が多くなって、カテゴリーが多くなると整理するのが大変になりますから、カテゴリーは少なめにしたほうが良いですね。
まだ付けてない方は、早めにつけたほうが良いと思います。