ブログときどきオトン

ブロガーを目指すオトンのブログ

グローバルナビゲーションとヘッダーを変更しました。【レスポンシブ対応】

スポンサーリンク

f:id:coizne:20170712200424j:plain:w350

はてなブログのカスタマイズの話題になります。

前回は、デザインテンプレートを人気の「Brooklyn」にして、シェアボタンやフォローボタン、上に戻るボタンなどボタンをいろいろ付けました。

www.tokidokioton.com

今回はさらに改良を加えていきたいと思います。
こうやってデザインやレイアウトを弄っているときが、いちばん楽しいですね。

ついついあれもこれもと夢中になってしまいます。

前回に続いてデザイン変更するのはヘッダーとグローバルナビゲーションの部分になります。

ブログで書く話題が大体固まったので、ヘッダーデザイン変更とグローバルナビゲーションを付けることにしました。

最初に目につくところなので、かなり印象が変わるかと思います。

まさにブログの顔になる部分ですからね。

グローバルナビゲーションを設置する

書きたいことが決まってきたらグロナビを設置したいと思っていました。
グローバルナビゲーションがあることで、他の記事も見てもらえる機会が増え、直帰率を下げることも期待できます。

デサインテンプレートである「Brooklyn」にはあらかじめグローバルナビゲーションを想定した作りのようですね。

グロナビの設置方法については、こちらを参考にさせていただきました。
注意としては、「はてなブログPro」用と「はてなブログ」用と分かれていることですね。

www.notitle-weblog.com

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>


スマホのグロナビはこんな感じで上部に帯が入る感じですね。
これが付くだけでぐっと、スマホサイトぽくなります。

右側のメニューボタンからグロナビにアクセスできます。

f:id:coizne:20170712201619p:plain:w350

カテゴリー名にアイコンをつけてみる

はてなブログは専用のアイコンが用意されています。

例えば、 こんなものや。
といったものですね。

使い方は簡単。

であれば、

<i class="blogicon-home">ホーム</i>

と書くだけです。
簡単ですね。

affiliate-couple.hatenablog.com

更に色んなアイコンがありますので以下を見てみてください。
カテゴリに付けたいものは大体揃っているかと思います。

便利ですね。

shirokai.hatenablog.com

アイコンが加わることでキャッチーな見た目になりますね。有りと無しでは見た目が大きく変わるポイントだと思いますのでオススメです。

ヘッダーを変更する

ヘッダーはサイトの「ホームへ戻るボタン」の役割があったり、サイトを印象づけるパーツです。

こういう時に絵心があればな・・といつも思わさせられます。

今回は、絵が描けないのでタイポグラフィでいきたいと思います。

極太のフリーフォントを見つけてきて、サイト名で簡単ではありますがヘッダーにするロゴの完成です。今回は凸凹感がなんともたまらない「キルゴ」フォントを使わせていただきました。

ありがとうございます。ステキです・・

キルゴ・キルゴU


f:id:coizne:20170712210127p:plain

サイズはレスポンシブなので制限はありませんが、799 X 108ピクセルとしました。

設置します。

「 設定 > デザイン > ヘッダー 」から、画像選択をしてアップロードします。
保存して作業終了です。

f:id:coizne:20170712210518j:plain

ここで不具合発生

ここで問題が発生しました、

どうやらヘッダーのサイズが縦200pxに固定されてしまう問題が生じているようです。

私が作成したロゴのサイズは縦98pxなので上下に50pxずつ余白が入って間延びしたような感じになってしまいました。

f:id:coizne:20170712211644j:plain

これも「Brooklyn」には、皆さんぶつかる壁のようでこちらを参考に解決させていただきました。

mshitech.hatenablog.com

上下ピッタリにできました。
これでバッチリです。

さらに不具合発生

がしかし!

スマホにした時に先ほど設置したグロナビの帯にロゴが掛かってしまう結果になってしまったため更に改良しました。

f:id:coizne:20170712212718p:plain:w350

以下のとおり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;
}
}

プラス月5万円で暮らしを楽にする超かんたんアフィリエイト

プラス月5万円で暮らしを楽にする超かんたんアフィリエイト

まとめ

グロナビとヘッダーを変更したことで、オリジナルぽいブログになってきてさらに愛着が湧いてきました。

しかし、ここは各ブロガーの皆さんのデザイン次第ですが、細かいサイズ調整などそれぞれ不具合がでるところでもあると思います。

CSSの勉強にもなりますのでじっくりソースをいじって確認しながら作業をすすめてください。

更に次回はバナーの設置などカスタマイズをすすめていきたいと思います。

© 2017 ブログときどきオトン