はてなブログカスタマイズ グローバルメニューにアイコンWebフォントを使う

最終更新日2020年11月27日 by samurai

このブログを開設した時に行ったカスタマイズを紹介いたします。

グローバルメニューを設置しているブログは多いですね。

そのメニューの先頭に はてなブログのアイコンWebフォントを表示させ、見た目の印象を変えてみました。

使用したテーマははてなブログテーマで一番人気がある「Brooklyn」です。

「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。

WordPress侍

役に立つ！はてなブログのカスタマイズ20選

https://wordpress-samurai.com/hatenablog_customize_20

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。しかし、はてなブログのカスタマイズ記事を多数掲載していたので、そのまま無くすというのも勿体ないと思い、WordPressサイトではありますが、カスタマイズ記事だけをこちらのサイトに移設いたしました。記事文章につきましてはなるべく原文を使用しているため、おかしな内容になっているかもしれませんが、「はてなブログ」を利用されている方にはご理解いただけると思っています。また、はてなブログと動作が違うものもいくつかあります。それは、イメージを持...

はてなブログをやるなら、制限が少ないはてなブログProがオススメ！

グローバルメニューの設置

参照にしたというかCSSをコピペしたサイトは制作者さんのサイトですが、現在はWordPressで運営しているようで、サイトはストップしています。

一般ユーザ向けとはてな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>

デザイン ⇨ カスタマイズ ⇨ ヘッダ ⇨ タイトル下 にコピペするだけです。

変更するところは２ヶ所です。

<a href="ここにリンク先のアドレス">ここにメニューの名前</a>

「ここにリンク先のアドレス」にカテゴリーのURLを入れて下さい。

「ここにメニューの名前」にカテゴリー名を入れて下さい

メニューは5項目を超えると装丁が崩れる可能性があるということで注意して下さい。

グローバルナビのカスタマイズ

グローバルナビのカスタマイズですが，Style 21世紀×Deaf×INFPさんのサイトを参考に・・・いやコピペしました。

現在は非公開のようです。

ブログタイトルの下にあるメニューバーのカスタマイズはてなProのみです。

/*ナビメニューの色変更*/
#global-menu {
 background-color: #111; /*ナビメニューの両サイド背景の色変更*/
 border-bottom: 2px solid #111;　/*ナビメニュー下部のラインカラー変更*/
 }
 .global-menu-list li a {
 color: #fff; /*ナビメニューの文字色変更*/
 background-color: #111; /*ナビメニューの背景色変更*/
 }
 #mobile-head {
 background-color: #111; /*スマホ版 ナビメニューの背景色変更*/
 }
 #blog-title {
 border-bottom: 1px solid #111;　/*ナビメニュー上部のラインカラー変更*/
 }

このブログのメインの色が#B01C1Cなので#111のカラーを入れ替えました。

CSSをデザイン ⇨ カスタマイズ ⇨ デザインCSS　に追加します。

アイコンWebフォントを使う

Font Awesomeを利用するという方法もありますが，グローバルメニューにしか使用しないのではてなブログに標準で装備されている116種類のアイコンで十分でした。

というか5つしか使わないし・・・

参照したのはここのサイトです。

しろかい！

はてなブログで使えるアイコンWebフォントの一覧と使い方まとめ - しろかい！

https://shirokai.hatenablog.com/entry/hatenablog-icon-webfont

はてなブログでは，デフォルトで読み込まれるCSS「globalheader.css」で，79種類のアイコンWebフォントを読み込んでいます．これらのアイコンで間に合うのならわざわざ「Font Awesome」を読み込む必要もなく，ページの軽量化が期待できます．そこで，本記事では，それらのアイコンの一覧と使い方をまとめました．

アイコンを表示したいところに下記の記述をすればOKです。

<i class="使用したいアイコンのクラス名"></i>

使用したいアイコンのクラス名は上のサイトしろかい！さんの記事を参照下さい。

例えば <i class=”blogicon-home”>ホーム</i> と挿入すれば(これはFont Awesomeのアイコンです。)とホームマークが表示されます。

しかし，アイコンWebフォント一覧は公式に用意されていないとは驚きです。

いや〜，しろかい！さんに感謝です。

まとめとして

はてなブログに限らずグローバルメニューは訪問者がサイトを巡回する時に必ず利用し，ユーザビリティがアップするので設置は必須ですね。

いろんな方々が設置方法を記事にしていますので「(ブログテーマ名) グローバルメニューカスタマイズ」などで検索するとすぐにヒットしますね。

先人たちに感謝です。