もみじろぐ

（この記事は、はてなブログを運営されている方向けの記事です）

いやほんと頑張りました。

徹夜で頑張りました。

何を頑張ったかっていうと、外見のカスタマイズですね。

今までは「まぁでもブログとか見かけより中身っしょ」と面倒がってたんですが、今回は俺の中の忍耐力くんが大活躍。

今回の変化は主に

ブログテーマをゆきひーさん（id:ftmaccho）開発の「Naked」に設定
「グローバルメニュー」と「パンくずリスト」を設置
「親カテゴリ」「子カテゴリ」作って階層化して整理

の３つです！

特に親子カテゴリの設定が一記事ずつ設定し直すの鬼大変だった…

そしてなんとなんと、今回変えたブログテーマはレスポンシブデザイン（タブレット、スマホで見てもデザインを維持できるやつ）でして、特にスマホで開くと今までとだいぶ変わったんじゃないかと思います。

はああああ疲れたよおおおおお

今まで適当に済ませたツケが一気に回ってきたこの感じ。でも頑張った、偉いぞ俺。

てなわけで俺が今回ブログに行ったカスタマイズを紹介しようと思いまふ。

今まで「デザインいじりたい…けどHTMLとかわかんね…めんどくさ…」とか思って尻込みした人の後押しになれば嬉しいです。

特にブログ始めたての人、カテゴリとかいじるなら記事少ないうちにやっといと方がいい。100以上の記事を一個ずつカテゴリ設定し直すとか辛すぎるから、ほんとに（）

「Naked」
親カテゴリと子カテゴリとは
グローバルメニュー
- 設定
- メニューの背景色について
パンくずリストを用いたカテゴリ整理
- 「グローバルメニュー」で各カテゴリーに飛べるようにする設定
- カテゴリーの再設定
  - おそらく最も効率が良さそうな方法
最後に
- 参考記事一覧

「Naked」

f:id:momijitan:20160827235440j:plain

ぶっちゃけ今回の大幅ブログデザイン改善は、ほぼこのブログテーマ、それを開発なさったゆきひーさんのおかげです！

このデザインテーマの俺的魅力は大きく３つ！

シンプルでカッコイイ！！

まさにシンプルisベストを体現したようなスマートなデザイン。初期設定の時点でカッコイイじゃん！

レスポンシブデザイン

スマホでもタブレットでも画面の大きさに合わせてデザインが維持！！今までレスポンシブデザインのテーマを設定していなかったので、スマホでのブログデザインが大幅にかっこよくなった！感動！！！

カスタマイズに自由度が高い

開発者のゆきひーさんが自らカスタマイズのあれこれを解説するブログ
Theme Naked Blog
を設けているので、楽にカスタマイズがいっぱいできます！シンプルながらも個性が出せるデザイン！最高です！！

ゆきひーさん、ほんとにありがとうございます！！当分使わせていただくつもりです！！

実は結構前から読者登録してたんだけど、ちゃんと記事を拝見した記憶がない…

今になってブログを読んだらブログのカスタマイズに役立つ情報が盛りだくさん…いやほんとに目からうろこというか涙というか…ぱねぇ！！（語彙力）

しかも独学で勉強してここまでのものを作ってらっしゃるとは…もう一気に憧れの人です。自分も独学でWebサイト作れる人になりたいんで、ゆきひーさん目指しますね←

親カテゴリと子カテゴリとは

今回ブログに加えた変更を紹介するのに、まず何よりも先に解説しておかないといけない概念があります。

それが「親カテゴリ」「子カテゴリ」です。

カテゴリーというのはわかると思います。簡単にいうと記事のジャンルみたいなものでしょうか。

「この記事はアニメについて書いた」とか、「この記事はこないだの旅行の思い出を書いた」とか、そんな感じで記事にもいろんなジャンルがあると思います。
それに名前をつけて分類して、自分が見返した時、あるいは人が見た時にわかりやすくするのがカテゴリーです。

そこに更に親子のように（サブカル＞アニメみたいに）階層化してわかりやすく設定したのが「親カテゴリ」と「子カテゴリ」です。

なぜ階層化するかというと、カテゴリーの数が多すぎると見にくいので、カテゴリーをさらに大きなカテゴリーに分類してわかりやすくするためです。

もし今回この記事を元にブログのカスタマイズをされる方がいれば、まず最初に親カテゴリ、子カテゴリとその構造を決めておくのが大前提です！

ちなみにこのブログの構造はこんな感じです。（2016/08/28時点）

・考えたこと
ひと
こころ
ことば
学ぶ
働く
・人生
将来・やりたいこと
恋愛
家族
妄想
昔話
・読書
・インターネット
ブログのお話
ネット論
SNS
・日記
イベント
お出かけ
写真
雑記
・サブカル
音楽
アニメ
ゲーム
ラジオ
・ガジェット

・プロフィール

実際の設定方法は以下の「パンくずリスト」の項目で解説します。

グローバルメニュー

まずグローバルメニューってなんだそりゃっていうとタイトル下にあるメニューのことです。グローバルナビゲーションともいいます。簡単にいうと目次ね。

f:id:momijitan:20160828010351p:plain

f:id:momijitan:20160828010801p:plain

そうそう、この右上のMenuってやつ

ちなみにパソコンだとこんな感じね

f:id:momijitan:20160828002128p:plain

タブレットは…持ってません！！！！（涙）

ここからカテゴリー別に記事にアクセスできるようになったんです！！

いやぁかっこいい！！

そしてパソコン版では親カテゴリだけじゃなく子カテゴリにもアクセスできちゃう！！最高！！！

もともとこのグローバルメニュー（最初呼び方わからなくてググるの苦労した）をつけたさで情報収集していたところ、ゆきひーさんのブログにたどり着いたんですけど（）

設定

で実際に参考というか…まるまるコピペさせてもらったのがこの記事。

【子カテゴリあり】レスポンシブなナビゲーションの作り方 - 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>

メニューの背景色について

ちなみにデフォルトの設定ではメニューが背景の上に透過するようになってたんですが、若干見にくいだろうということでメニューに背景色をつけてハッキリさせました。

f:id:momijitan:20160828011717p:plain

↓↓↓

f:id:momijitan:20160828011737p:plain

これはデザイン＞カスタマイズ＞デザインcssの方に以下のコードを書き加えることで変更できました。

#n-menu {
    background-color: #cc3300;
}

色は記事の通り、ここ
WEB色見本原色大辞典 - HTMLカラーコード
から背景に合いそうな色を選んできました。

パンくずリストを用いたカテゴリ整理

パンくずリストというのは、ずばりこれです。

f:id:momijitan:20160828012835p:plain

これがあればページの構造が一目でわかっちゃうよね、っていう便利というかもはやサイトには必須な代物です。

ページトップ＞親カテゴリ＞子カテゴリって感じです。

なんで「パンくず」なんて美味しそうな名前になったかというと

利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
wikipediaより

だそうです。

実はこの「パンくずリスト」、最近はてなブログの公式が対応したらしく（以前は公式対応ではありませんでした）デザイン＞カスタマイズ＞記事の一番下にちゃっかりこんなボタンついちゃってるんですが…

f:id:momijitan:20160828013453p:plain

でもこれ親子カテゴリの表示には適応していません（致命的）

なので今回は使いません！！

実際に使うのは公式のじゃない有志の方が作ったパンくずリストです。

「グローバルメニュー」で各カテゴリーに飛べるようにする設定

さてここからが本番です。

まず公式がパンくずリストに対応する前から、はてな界隈で（たぶん）よく使われていたパンくずリストを導入します。

<!-- パンくずリスト -->
<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>
<!-- パンくずリストおわり -->