はてなブログに自作のグローバルナビゲーションを設置
訪問者の回遊性を高め、ＰＶ数の底上げにつながると言われている、グローバルナビゲーション。
はてなブログの標準機能として対応を望むところですが、「シンプルでモダンなブログ」を謳っているので、優先順位はきっと低いのだと思います。
とは言いつつ、当ブログの記事も１００記事を越え、取り扱う記事のカテゴリも絞れてきたため、自作でグローバルナビゲーションを設置してみました。
オリジナルコードはとりあえず非公開ですが、WEBの素人でも対応できたので、勉強になったサイトと勉強方法を紹介したいと思います。
当ブログのグローバルナビゲーション
当ブログのグローバルナビゲーションはＰＣ版のみに表示している下記イメージのものです。
ブログタイトル下の、カテゴリへのリンクと、小カテゴリをドロップダウンで表示する機能になっています。
スマホ版にも簡易なものを設置していますが、この記事では説明の対象外です。
必要となるツールと知識
- グローバルナビゲーションのひな形
- HTMLとCSSの基礎知識
- CSSの実践知識
- Chrome（ブラウザ）
- Atom（テキストエディタ）
- 実装テスト環境
順番にご説明します。
１．グローバルナビゲーションのひな形
【リンク】CSSだけで作る動きのあるドロップダウンメニュー｜Webpark
まずは技術を勉強する必要がりますが、結局はひな形が無いと私も対応しきれませんでした。
ひな形については、上記エントリーが非常に参考になます。
こだわりのないグローバルナビゲーションを設置するのであれば、上記のコピペとURL等を変更すれば簡単に設置できますが、安直にコピペするだけでは想定外の動作をするため、それらの修正のために下記に続く勉強を行いました。
２．HTMLとCSSの基礎知識
【リンク】ドットインストール - 3分動画でマスターできるプログラミング学習サービス
技術的な話しが苦手な人には、いきなり難しそうな話しですが、まずはこれが無いと何ともなりません。
じゃあ早速、技術書を書いに…行く必要はありません。便利な世の中になったもので、無料でプログラミングの学習ができるサイトがあります。
それが、動画形式でプログラミングを学べる、「ドットインストール」この中の、『HTML入門』と『CSS入門』を観賞し、実践するだけで基礎知識はバッチリです。
３．CSSの応用知識
【リンク】http://webdesignrecipes.com/css-visual-formating-model/
実際にグローバルナビゲーションを作成し、デザインをしていく際に、非常に参考になったエントリーです。
「paddingの領域」、「marginの領域」など、思わず忘れてしまった時にも参照できますし、ナビゲーションの設置場所や「z-indexの概念」など、困ったときに読めば、きっと解決につながるヒントがいっぱいです。
４．Chrome（ブラウザ）
【リンク】Google Chrome - Google の高速で安全なブラウザをダウンロード
ブラウザであれば「IE」でも「Firefox」でも何でも良いのですが、ここは私も普段利用している「Chrome」を押しておきます。
ドットインストールの『HTML入門』でもChromeを利用しているため、なるべく同じブラウザを利用したほうが、理解が深まると思います。
ここでは詳細は割愛しますが、WEBの開発を行う際に嬉しい機能が、多数標準で備わっている点でも今後の事を考えると「Chrome」という選択肢がベターだと思います。
５．Atom（テキストエディタ）
【リンク】Atom
上記ブラウザ「Chrome」と同じく、ドットインストールの『HTML入門』で紹介されていたテキストエディタです。
動画の中でダウンロード方法から、推奨される初期設定まで紹介されているので、やはり『HTML入門』は必見です。
「メモ帳」でも同じことができますが、動作テストの際、頻繁に修正する事が考えられますので、それに特化したエディタを利用したほうが、作業効率が増して軽快にコーディングできます。
６．実装テストの環境
これは利用するブログサービスによると思います。
作成したHTMLファイルをブラウザで確認するだけではテストが不十分なので、なるべく、実際に公開しているブログと同等のものを用意する必要があります。
私の場合、当ブログと同様のデザインを施したテストブログを、新たに非公開設定で開設し、ミラー環境として思った通りの動作をするかテストしました。
はてなブログProの場合、１０個までブログが開設できますので、そのうちの１つをテストブログにしました。
デザインを掘り下げるために参考になったサイトまとめ
- HTMLクイックリファレンス
- TAG index カラーチャート
- 0 to 255
主に、グローバルナビゲーションの完成後、カラーデザインを整えるのに参考になったサイトです。
１．HTMLクイックリファレンス
【リンク】HTMLクイックリファレンス
様々なプロパティに、どういう値が設定できるか等、デザインの微調整を行う際に大変参考になりました。
膨大なリファレンスが公開されており、グローバルナビゲーションの設置だけに限らず、ブログのCSSをカスタマイズする際にも非常にお世話になっています。
２．TAG index カラーチャート
【リンク】カラーチャート［HTMLカラーコード・カラーネームの一覧］ - TAG index
例えば「#666666」（カラーコード）など、標準のCSSには様々なカラーが設定されていますが、それが果たしてどんな色なのか、カラーコードだけでは分かりません。
メジャーなカラーコードを除けば、現役のWEBデザイナーでもパッと識別することは困難だと思います。
その際に上記サイトの右下に表示されている「色の検索」ツールが非常に役に立ちました。
例えば、動作させたものの、想定外のカラーが表示された場合などに、その色をコードの中から探して、決め打ちで修正していく、という使い方ができます。
３．0 to 255
【リンク】Color Picker Tool | 0to255
グラデーションでイメージカラー付近のカラーコードが表示されるサイト。
どのような色でデザインするのか、直感でカラーコードが取得できます。デザインをする上で、色の選択に迷った際は、眺めているだけで新しいアイディアが浮かびます。
まとめ
WEBデザイナーやCSSをマスターしている技術者の人にとっては、朝飯前なのかもしれませんが、私の場合、グロバールナビゲーションの開発に都合３日間ほどの時間がかかりました。
上記の海外ジェネレータにお金を払えば、手軽にもっとおしゃれなナビを実装させる事ができるようです。（以前は無料だったそうです。）
開発工数の事を考えれば、素直にお金を払ってしまった方が良かったかもしれませんが、技術の知識は単純にお金に換算できない資産だと思います。
需要がありそうなら、私の設置している実際のコードを公開しますが、安易なコピペよりも勉強した方が絶対ためになると思いますので、今回は非公開です。
【2016/09/21 追記】準備されているテーマを利用した方が楽です
あれから１年超が経ちますが、現在ではグローバルナビ付きのテーマが用意されていますので、勉強が面倒であればそちらを利用したほうが吉です。
私がカスタムベースとしているのは上記のテーマ『Innocent』です。
あとは好みの問題ですが、『Brooklyn』もグローバルナビがカスタマイズ・ガイドに沿えば実装できます。
