※当ブログでは現在グロナビを削除しております。(2018-1-12)
www.tokidokioton.com
はてなブログのカスタマイズの話題になります。
前回は、デザインテンプレートを人気の「Brooklyn」にして、シェアボタンやフォローボタン、上に戻るボタンなどボタンをいろいろ付けました。
今回はさらに改良を加えていきたいと思います。
こうやってデザインやレイアウトを弄っているときが、いちばん楽しいですね。
ついついあれもこれもと夢中になってしまいます。
前回に続いてデザイン変更するのはヘッダーとグローバルナビゲーションの部分になります。
ブログで書く話題が大体固まったので、ヘッダーデザイン変更とグローバルナビゲーションを付けることにしました。
最初に目につくところなので、かなり印象が変わるかと思います。
まさにブログの顔になる部分ですからね。
グローバルナビゲーションを設置する
書きたいことが決まってきたらグロナビを設置したいと思っていました。
グローバルナビゲーションがあることで、他の記事も見てもらえる機会が増え、直帰率を下げることも期待できます。
デサインテンプレートである「Brooklyn」にはあらかじめグローバルナビゲーションを想定した作りのようですね。
グロナビの設置方法については、こちらを参考にさせていただきました。
注意としては、「はてなブログPro」用と「はてなブログ」用と分かれていることですね。
Pro版はスマホ画面のときにレスポンシブデザインが使えるので、グロナビのスマホ対応デザインが入っている違いになります。
<div id="trigger-point"> </div> <div id="global-menu"> <div id="mobile-head"> <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> </div> <ul class="global-menu-list"> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> <li><a href="ここにリンク先のアドレス">ここにメニューの名前</a></li> </ul> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script> $(function (){ // 変数に代入 var $nav = $('#global-menu'); var $content = $('#content'); var $offsetTop = $('#trigger-point').offset().top; // 固定メニューの設定 function fixedNav() { if($(window).scrollTop() > $offsetTop){ $nav.addClass('fixed'); } else { $nav.removeClass('fixed'); } }; $(window).scroll(fixedNav); $('body').on('touchmove', fixedNav); // Toggle メニューの設定 $('#nav-toggle').click(function (){ $nav.toggleClass('open'); }); $('#content').click(function (){ if($nav.hasClass('open')){ $nav.removeClass('open'); } }) }); </script>
スマホのグロナビはこんな感じで上部に帯が入る感じですね。
これが付くだけでぐっと、スマホサイトぽくなります。
右側のメニューボタンからグロナビにアクセスできます。
カテゴリー名にアイコンをつけてみる
はてなブログは専用のアイコンが用意されています。
例えば、 こんなものや。
といったものですね。
使い方は簡単。
であれば、
<i class="blogicon-home">ホーム</i>
と書くだけです。
簡単ですね。
affiliate-couple.hatenablog.com
更に色んなアイコンがありますので以下を見てみてください。
カテゴリに付けたいものは大体揃っているかと思います。
便利ですね。
アイコンが加わることでキャッチーな見た目になりますね。有りと無しでは見た目が大きく変わるポイントだと思いますのでオススメです。
ヘッダーを変更する
ヘッダーはサイトの「ホームへ戻るボタン」の役割があったり、サイトを印象づけるパーツです。
こういう時に絵心があればな・・といつも思わさせられます。
今回は、絵が描けないのでタイポグラフィでいきたいと思います。
極太のフリーフォントを見つけてきて、サイト名で簡単ではありますがヘッダーにするロゴの完成です。今回は凸凹感がなんともたまらない「キルゴ」フォントを使わせていただきました。
ありがとうございます。ステキです・・
サイズはレスポンシブなので制限はありませんが、799 X 108ピクセルとしました。
設置します。
「 設定 > デザイン > ヘッダー 」から、画像選択をしてアップロードします。
保存して作業終了です。
ここで不具合発生
ここで問題が発生しました、
どうやらヘッダーのサイズが縦200pxに固定されてしまう問題が生じているようです。
私が作成したロゴのサイズは縦98pxなので上下に50pxずつ余白が入って間延びしたような感じになってしまいました。
これも「Brooklyn」には、皆さんぶつかる壁のようでこちらを参考に解決させていただきました。
上下ピッタリにできました。
これでバッチリです。
さらに不具合発生
がしかし!
スマホにした時に先ほど設置したグロナビの帯にロゴが掛かってしまう結果になってしまったため更に改良しました。
以下のとおりCSSを調整してきれいに表示できるようになりました。
一件落着です。
/* タイトルイメージ調整 */ #blog-title { padding-top: 5px; /* 画像上部の余白*/ padding-bottom: 5px; /* 画像下部の余白*/ height: initial; } .header-image-only #blog-title #blog-title-inner { height: 90px; /* 画像の高さ */ background-size: contain; } /* タイトルイメージ調整 レスポンシブ */ @media (max-width: 680px) { .header-image-only #blog-title #blog-title-inner { height: 50px; /* 画像の高さ */ } #blog-title { padding-top: 45px; /* 画像上部の余白*/ padding-bottom: 0px; /* 画像下部の余白*/ height: initial; } }
- 作者: 鈴木利典
- 出版社/メーカー: 翔泳社
- 発売日: 2016/04/15
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
まとめ
グロナビとヘッダーを変更したことで、オリジナルぽいブログになってきてさらに愛着が湧いてきました。
しかし、ここは各ブロガーの皆さんのデザイン次第ですが、細かいサイズ調整などそれぞれ不具合がでるところでもあると思います。
CSSの勉強にもなりますのでじっくりソースをいじって確認しながら作業をすすめてください。
更に次回はバナーの設置などカスタマイズをすすめていきたいと思います。