読者です 読者をやめる 読者になる 読者になる

Without Me

自分の自分による自分のための記録

【はてなブログ】グローバルメニューの導入(スマホではPROのみだった)

Tips Tips-Hatena

前回に引き続き、はてなブログカスタマイズです。超年末なのですが、今年中に記録しておきます。グローバルメニューってのは、webサイトや凝ったデザインのブログなんかで見るこれ。
f:id:demacassette:20151231161149p:plain


さっそくブログカスタマイズの先生である"りさこぶろぐ"さんから情報を拝借
matsuda-risako.hatenablog.com
ここに書いてある通りにやってます(恥)。

まずはヘッダーHTMLに以下をぺたり

<nav id="global">
    <ul>
        <li><a href="http://demacassette2.hateblo.jp">Home</a></li>
        <li><a href="http://demacassette2.hateblo.jp/archive/category/own">Profile</a></li>
        <li><a href="http://demacassette2.hateblo.jp/archive/category/memo">Memo</a></li>
        <li><a href="http://demacassette2.hateblo.jp/archive/category/Tips">Tips</a></li>
    </ul>
</nav>

それぞれのリンク先は察してください。このままではメニューが縦並びになるらしいので微調整します。

デザインCSSの部分に以下をぺたり。

#global ul{
    text-align: center;
}
#global ul li{
    display: inline-block;
}
#global ul li a{
    padding: 1em;
}

あと、個人的に自分のブログカラーに統一感を持たせたいので、メニューにマウスオーバーした際のテキスト色を変更します。

/*メニューのテキスト色指定*/
#global ul li a{
    color:gray;
}

/* マウスオーバー時のテキスト色指定*/
#global ul li a:hover {
    color: darkcyan;
}

この部分は私で追加しました。実は"darkcyan(ダークシアン)"という色が結構好きで使っています。パーソナルカラー的な。


これをスマホで見るときも表示したいと思ったのですが、それはproにアップグレードが必要のようです。ですので、スマホでもPCと同じようにひょうじされればグローバルメニュー使えるなぁと思って、その設定をしてみます。
デザイン設定画面→スマホ→詳細設定→レスポンシブデザイン→チェックを入れる
f:id:demacassette:20151231162816p:plain

これで、スマホ画面でもPCと同じ表示になることが確認できました。これでいったんブログとしてもwebサイトとしても最低限の見易さは確保したかな?と思いきや、また別の言葉を発見。

wepli-dot2.hatenablog.com

これは別途記録します。ブログカスタマイズってやりだしたらキリがないのかもしれない。。。とりあえず一歩一歩進んでいこう。