【はてなカスタマイズ】ブログテーマ「Naked」を適用してグローバルメニューつけてみた！
（この記事は、はてなブログを運営されている方向けの記事です）
いやほんと頑張りました。
徹夜で頑張りました。
何を頑張ったかっていうと、外見のカスタマイズですね。
今までは「まぁでもブログとか見かけより中身っしょ」と面倒がってたんですが、今回は俺の中の忍耐力くんが大活躍。
今回の変化は主に
- ブログテーマをゆきひーさん（id:ftmaccho）開発の「Naked」に設定
- 「グローバルメニュー」と「パンくずリスト」を設置
- 「親カテゴリ」「子カテゴリ」作って階層化して整理
の３つです！
特に親子カテゴリの設定が一記事ずつ設定し直すの鬼大変だった…
そしてなんとなんと、今回変えたブログテーマはレスポンシブデザイン（タブレット、スマホで見てもデザインを維持できるやつ）でして、特にスマホで開くと今までとだいぶ変わったんじゃないかと思います。
はああああ疲れたよおおおおお
今まで適当に済ませたツケが一気に回ってきたこの感じ。でも頑張った、偉いぞ俺。
てなわけで俺が今回ブログに行ったカスタマイズを紹介しようと思いまふ。
今まで「デザインいじりたい…けどHTMLとかわかんね…めんどくさ…」とか思って尻込みした人の後押しになれば嬉しいです。
特にブログ始めたての人、カテゴリとかいじるなら記事少ないうちにやっといと方がいい。100以上の記事を一個ずつカテゴリ設定し直すとか辛すぎるから、ほんとに（）
「Naked」
ぶっちゃけ今回の大幅ブログデザイン改善は、ほぼこのブログテーマ、それを開発なさったゆきひーさんのおかげです！
このデザインテーマの俺的魅力は大きく３つ！
シンプルでカッコイイ！！
まさにシンプルisベストを体現したようなスマートなデザイン。初期設定の時点でカッコイイじゃん！
レスポンシブデザイン
スマホでもタブレットでも画面の大きさに合わせてデザインが維持！！今までレスポンシブデザインのテーマを設定していなかったので、スマホでのブログデザインが大幅にかっこよくなった！感動！！！
カスタマイズに自由度が高い
開発者のゆきひーさんが自らカスタマイズのあれこれを解説するブログ
Theme Naked Blog
を設けているので、楽にカスタマイズがいっぱいできます！シンプルながらも個性が出せるデザイン！最高です！！
ゆきひーさん、ほんとにありがとうございます！！当分使わせていただくつもりです！！
実は結構前から読者登録してたんだけど、ちゃんと記事を拝見した記憶がない…
今になってブログを読んだらブログのカスタマイズに役立つ情報が盛りだくさん…いやほんとに目からうろこというか涙というか…ぱねぇ！！（語彙力）
しかも独学で勉強してここまでのものを作ってらっしゃるとは…もう一気に憧れの人です。自分も独学でWebサイト作れる人になりたいんで、ゆきひーさん目指しますね←
親カテゴリと子カテゴリとは
今回ブログに加えた変更を紹介するのに、まず何よりも先に解説しておかないといけない概念があります。
それが「親カテゴリ」「子カテゴリ」です。
カテゴリーというのはわかると思います。簡単にいうと記事のジャンルみたいなものでしょうか。
「この記事はアニメについて書いた」とか、「この記事はこないだの旅行の思い出を書いた」とか、そんな感じで記事にもいろんなジャンルがあると思います。
それに名前をつけて分類して、自分が見返した時、あるいは人が見た時にわかりやすくするのがカテゴリーです。
そこに更に親子のように（サブカル＞アニメみたいに）階層化してわかりやすく設定したのが「親カテゴリ」と「子カテゴリ」です。
なぜ階層化するかというと、カテゴリーの数が多すぎると見にくいので、カテゴリーをさらに大きなカテゴリーに分類してわかりやすくするためです。
もし今回この記事を元にブログのカスタマイズをされる方がいれば、まず最初に親カテゴリ、子カテゴリとその構造を決めておくのが大前提です！
ちなみにこのブログの構造はこんな感じです。（2016/08/28時点）
・考えたこと
ひと
こころ
ことば
学ぶ
働く・人生
将来・やりたいこと
恋愛
家族
妄想
昔話・読書
・インターネット
ブログのお話
ネット論
SNS・日記
イベント
お出かけ
写真
雑記・サブカル
音楽
アニメ
ゲーム
ラジオ・ガジェット
・プロフィール
実際の設定方法は以下の「パンくずリスト」の項目で解説します。
グローバルメニュー
まずグローバルメニューってなんだそりゃっていうとタイトル下にあるメニューのことです。グローバルナビゲーションともいいます。簡単にいうと目次ね。
そうそう、この右上のMenuってやつ
ちなみにパソコンだとこんな感じね
タブレットは…持ってません！！！！（涙）
ここからカテゴリー別に記事にアクセスできるようになったんです！！
いやぁかっこいい！！
そしてパソコン版では親カテゴリだけじゃなく子カテゴリにもアクセスできちゃう！！最高！！！
もともとこのグローバルメニュー（最初呼び方わからなくてググるの苦労した）をつけたさで情報収集していたところ、ゆきひーさんのブログにたどり着いたんですけど（）
設定
で実際に参考というか…まるまるコピペさせてもらったのがこの記事。
【子カテゴリあり】レスポンシブなナビゲーションの作り方 - Theme Naked Blog
ちょうどHTMLかじってたところだったんで、スムーズに自分のサイトに応用できました。
ゆきひーさんが丁寧に解説をつけてくださっているので、知らない方でもちゃんと読めばできると思います。
でもこれは「Naked」のテーマじゃないと適用できないコピペらしいので、「自分が設定してるテーマじゃないと嫌だ！」って人には使えないので注意です。
逆に「パッとするテーマ見つかんねぇ！おまけにhtmlとかイミワカンナイ！」ってなってる人は思い切ってテーマ変えちゃうのオススメです。
中途半端に既存のテーマにグローバルメニュー設置しても、自分で色とか文字寄せとか適宜調整しないと雰囲気とかぶち壊しちゃうこと多いんで。
このブログで実際に現在適用しているソースコードを貼っておきます♪
上記リンクのゆきひーさんの原案と見比べながら参考にしてください！
↓
<nav id="n-menu"> <div class="menu-inner"> <div class="btn-content"> <span class="menu-btn"><i class="blogicon-reorder"></i> MENU</span> </div> <ul class="menu-content"> <li> <a href="http://momijitan.hatenablog.com/archive/category/考えたこと">考えたこと</a> <ul class="second-level"> <li><a href="http://momijitan.hatenablog.com/archive/category/考えたこと-ひと">ひと</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/考えたこと-こころ">こころ</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/考えたこと-ことば">ことば</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/考えたこと-学ぶ">学ぶ</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/考えたこと-働く">働く</a></li> </ul> </li> <li> <a href="http://momijitan.hatenablog.com/archive/category/人生">人生</a> <ul class="second-level"> <li><a href="http://momijitan.hatenablog.com/archive/category/人生-将来・やりたいこと">将来・やりたいこと</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/人生-恋愛">恋愛</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/人生-家族">家族</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/人生-妄想">妄想</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/人生-昔話">昔話</a></li> </ul> </li> <li> <a href="http://momijitan.hatenablog.com/archive/category/読書">読書</a> </li> <li> <a href="http://momijitan.hatenablog.com/archive/category/インターネット">インターネット</a> <ul class="second-level"> <li><a href="http://momijitan.hatenablog.com/archive/category/インターネット-ブログのお話">ブログのお話</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/インターネット-ネット論">ネット論</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/インターネット-SNS">SNS</a></li> </ul> </li> <li> <a href="http://momijitan.hatenablog.com/archive/category/日記">日記</a> <ul class="second-level"> <li><a href="http://momijitan.hatenablog.com/archive/category/日記-イベント">イベント</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/日記-お出かけ">お出かけ</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/日記-写真">写真</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/日記-雑記">雑記</a></li> </ul> </li> <li> <a href="http://momijitan.hatenablog.com/archive/category/サブカル" >サブカル</a> <ul class="second-level"> <li><a href="http://momijitan.hatenablog.com/archive/category/サブカル-音楽">音楽</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/サブカル-アニメ">アニメ</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/サブカル-ゲーム">ゲーム</a></li> <li><a href="http://momijitan.hatenablog.com/archive/category/サブカル-ラジオ">ラジオ</a></li> </ul> </li> <li> <a href="http://momijitan.hatenablog.com/archive/category/ガジェット">ガジェット</a> </li> <li> <a href="http://momijitan.hatenablog.com/entry/2016/08/27/085157">プロフィール</a> </li> </ul> </div> </nav> <div style="clear:both"></div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function(){ var menuBtn = $(".menu-btn"), menuContent = $(".menu-content"); menuBtn.click(function(){ menuContent.slideToggle(); }); $(window).resize(function(){ var win = $(window).width(), p = 768; if(win > p){ menuContent.show(); }else{ menuContent.hide(); } }); }); </script>
メニューの背景色について
ちなみにデフォルトの設定ではメニューが背景の上に透過するようになってたんですが、若干見にくいだろうということでメニューに背景色をつけてハッキリさせました。
↓↓↓
これはデザイン＞カスタマイズ＞デザインcssの方に以下のコードを書き加えることで変更できました。
#n-menu {
background-color: #cc3300;
}
色は記事の通り、ここ
WEB色見本 原色大辞典 - HTMLカラーコード
から背景に合いそうな色を選んできました。
パンくずリストを用いたカテゴリ整理
パンくずリストというのは、ずばりこれです。
これがあればページの構造が一目でわかっちゃうよね、っていう便利というかもはやサイトには必須な代物です。
ページトップ＞親カテゴリ＞子カテゴリって感じです。
なんで「パンくず」なんて美味しそうな名前になったかというと
利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
wikipediaより
だそうです。
実はこの「パンくずリスト」、最近はてなブログの公式が対応したらしく（以前は公式対応ではありませんでした）デザイン＞カスタマイズ＞記事の一番下にちゃっかりこんなボタンついちゃってるんですが…
でもこれ親子カテゴリの表示には適応していません（致命的）
なので今回は使いません！！
実際に使うのは公式のじゃない有志の方が作ったパンくずリストです。
「グローバルメニュー」で各カテゴリーに飛べるようにする設定
さてここからが本番です。
まず公式がパンくずリストに対応する前から、はてな界隈で（たぶん）よく使われていたパンくずリストを導入します。
<!-- パンくずリスト --> <script src="https://www.google.com/jsapi"></script> <script src="http://bulldra.github.io/commons.js" charset="utf-8"></script> <script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script> <script type="text/javascript"> google.set0nloadCallbach(categryHierarchyModule);</script> <script type="text/javascript"> google.setOnLoadCallback(categoryHierarchyModule); </script> <!-- パンくずリストおわり -->
このコードをデザイン＞カスタマイズ＞フッターのところにコードをそのまま貼り付けます。
開発者の方の記事はこちら
bulldra.hatenablog.com
このコードの出典はこちらの記事から
wepli-dot2.hatenablog.com
これだけ設定しただけではたぶん何も起らないです。
カテゴリーの再設定
そしていよいよ親子カテゴリを作っていきます。
もしサブカル＞アニメというカテゴリーに位置する記事を設定するとしたら
「親カテゴリ、親カテゴリ-子カテゴリ」
と上図のように２つのカテゴリーを作ってそれを２つともカテゴリーに設定します。
注意するのは間にいれるのは半角のハイフンということです。
すると記事上ではこんな感じになって、２つのカテゴリーに属してるっぽくなりますが、ちゃんと親の名前が二重にならずに親子として認識されてます。
あとはこれを一個一個設定していくだけ…！
単純ですが記事が100単位であると死にたくなります…
僕が取った方法は
- まずそれぞれを子カテゴリの名前で分類（サブカル＞アニメなら「アニメ」というカテゴリ名）
- 子カテゴリごとに記事を開いて、親子カテゴリを設定
- 親子カテゴリを設定したものは当然名前が変わるので最初のカテゴリからは消える
- カテゴリに残ったのを設定していく
でしたが、結局一記事ずつ開いて設定していたので、かなり苦痛でした。
さすがに「同じ手でコツコツやってみそ！」なんて言えないので、いろいろ考えてたぶん一番効率良さげだな、と思った方法を載せておきます。無責任ながら実践してません、ごめんなさい。
おそらく最も効率が良さそうな方法
１.まずブログ管理画面＞カテゴリーから全ての記事のカテゴリーを一旦削除する。
ここの削除ボタンを使う。
２.次に記事の管理から「チェックした記事にカテゴリーを追加」のボタンを使って、一気に親-子カテゴリー（例：サブカル-アニメ）のみを設定していく。
３.その上で同じく記事の管理からカテゴリー検索機能で各子カテゴリーごとに絞り込み、全てを選択して該当する親カテゴリー（例：サブカル）を追加する。
この方法でやればおそらく一記事ずつ直す手間がないので最も楽と思います！！
最後に
始めてブログデザインについて記事を書かせていただいたのですが、私的な文章と読者向けの情報がごっちゃ混ぜで、要領の悪い記事になってしまったことをお詫びします。
そして多くのブロガーさんのわかりやすい記事に大変救われました。本当にありがとうございます。
参考記事一覧
happylife-tsubuyaki.hatenablog.com
デザインに関しては今回が初挑戦なので、至らぬ部分も多く、おそらく僕のやり方もまだまだ改善点はあると思います。是非是非、指摘などのコメント等お待ちしています。
もちろん質問などもお待ちしています。
今後もブログをカスタマイズした際には記事を書きたいな！！
最後まで読んでくれてありがとう！！！
