はてなブログのカスタマイズ。ヘッダーメニューを追加しました。今まで行ってきた全てのカスタマイズも解説します。

f:id:nasust:20161209203847j:plain

こんにちはnasustです。

本日は仕事の片手間に、はてなブログをカスタマイズしていました。訪問者はもしかしたら作業途中の変な表示になっていたかもしれません。

今回カスタマイズしたのは、ヘッダメニュー(グローバルナビゲーション)とインデックスページを追加しました。平均閲覧時間を上げたくてカスタマイズしました。

カスタマイズする為に参考にしたのは、No Nameと羆の人生記です。

この二つのサイトはブラウザにブックマークして、ブログ運営やカスタマイズの参考にしています。とても参考になるブログです。

この二つの記事で、はてなブログの運営とカスタマイズが大体網羅されていますね。

ヘッダーメニューで工夫したのはブログのタイトルとメニューを同列にしたことですね。元のテンプレートである「Report」テンプレートのタイトルはブログのトップの真ん中に大きく表示されています。

ちょっと、これは目立ちすぎかなと思いますね。ブログの主役は記事なので記事より目立つのは良くないかなと思います。

それで、タイトルをCSSで綺麗さっぱり消してヘッダーメニューでタイトルに表示することにしました。

おかげで記事の方が目立つようになりました。以前は結構画面面積を取っていたので、ちょっとスクロールしないと記事が目立たなかったです。

それから各メニューのリンクは、ブログの各コンテンツのインデックスページにしました。

このインデックスページはGo言語関係の記事のリンクと人力ニュースキュレーションの各まとめへのリンクを設置しています。

これで、ヘッダメニュー > 各コンテンツへのリンク > コンテンツというように階層辿ってアクセスできるようになります。

またヘッダーメニューにサイトマップへのアンカーリンクもあるので、各コンテンツを横断的にアクセスできるようになりました。

これでブログの平均閲覧時間が上がるよと良いですが。

今回までのはてなブログのカスタマイズをまとめると以下のようになります。

	はてなブログをマテリアルデザイン風にカスタマイズしました。デザインのノウハウからCSSの編集迄詳しく解説!! - nasust life blog はてなブログのテンプレートデザインのカスタマイズ。
	はてなブログカスタマイズ。はてなブログの関連記事を外部サーバーで生成して本文に追加するようにした。 - nasust life blog はてなブログの記事に静的な関連記事のリンクを外部サーバを利用して自動的に生成。
	はてなブログカスタマイズ. サイトマップを追加しました。サイトマップのUXを解説。 - nasust life blog 横断的にブログのコンテンツをアクセス出来るように記事下にサイトマップを追加。UX的に優れていることも紹介。

関連記事のリンク生成は今後アップデートで、カテゴリ基準では無く、文章の類似度から生成する予定です。

あとプロフィールのフォロー関係のリンクも以下の記事を参考にしてカスタマイズしました。 http://georges.hatenablog.jp/entry/blog-custom15 http://georges.hatenablog.jp/entry/blog-custom15

この記事はNO TITLEから辿り着きました。

今回のカスタマイズで他のブログで大体行われているカスタマイズが出来たと思います。後は地道にブログの記事を書いていこうかと思います。

nasust life blog