以前から付けてみたいなぁって思いながら、大変そうなので付けて無かったグローバルメニューとやらをゴールデン・ウィークの休みを利用してつけてみました。
ムチャクチャ大変でした。約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タグ表示の時と同じ色のエンジ色にしようかなとも思ったのですが、ハナさんキッチンのイメージ写真が水色なので水色にしました。
マウスを合わせると桜色になります。
幅が狭くなると、メニューが出ます。
ハナさんの場合、レスポンスデザインのテーマを使っているけど、レスポンスデザインを使ってないので、コレはタブレット用ですね。
良い感じ♪
でも、なんだか隙間が空いちゃうんですよね～。それから、上のところにナゼか一本線が入っちゃうんです。
ナゼでしょうか？
もう少し下に下げるにはドコをいじればよいのでしょうか？
ハナさんには分かりません・・・
追記
ゆきひーさんが、線の消し方を教えてくれました。
@hanahana3kit ハナさん！記事内のことですが、#blog-title {
— ゆきひー (@ftmaccho) 2016年5月4日
border-bottom: none;
}#menu {
margin-top: 0;
margin-bottom: 0;
}
をcssに足すとうまくいくと思いますのでお試しください！
このコードを追加したら線が消えました。ありがとうございました。
スポンサーリンク
パンくずリストも付け足しました
以前からパンくずリストは付けてましたけど、親子関係がめちゃくちゃで上手く表示できてないのがあったので、今回カテゴリーを修正しました。
それで、パンくずリストについて調べていたら、すなばいじりさんのブログで最新仕様のパンくずリストっていうのがあるのを見つけたので、付けてみました。
今までもパンくずリストをつけてましたが、ドコに何をコピペしたのか分からないので、もしかすると、二重になっているかもしれません。
良いのかな？
まとめ
HTMLやCSSが分からない永遠の初心者のハナさんでも、時間をかければなんとかグローバルメニューを付けることが出来ました。
記事が多くなって、カテゴリーが多くなると整理するのが大変になりますから、カテゴリーは少なめにしたほうが良いですね。
まだ付けてない方は、早めにつけたほうが良いと思います。
追記
スマホ用も付けてみました。
親カテゴリだけですけど、見てくれるかな？
参考にしたのはこちらのサイト。
スマホ用にCSSとHTMLが一緒になったのがあったので、TeraPadにコピペしました。そのコードの下の方にある、親カテゴリのURLのリンクとかを、ハナさんキッチンのURLに貼り変えました。
PC用に63回コピペして作ったコードから、親カテゴリ11だけをコピペして利用しましたので、PC用の時と比べると楽でしたよ。
皆様、ありがとうございました。
