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

Contents

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

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

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

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

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

WordPress侍

2020.11.21

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

https://wordpress-samurai.com/hatenablog_customize_20

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

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

がオススメ！

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

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

一般ユーザ向けとはてなPro向けとありますが、私がProなのでそちらを設置しました。

&lt;div id="trigger-point"&gt;
&lt;/div&gt;
&lt;div id="global-menu"&gt;
 &lt;div id="mobile-head"&gt;
 &lt;div id="nav-toggle"&gt;
 &lt;div&gt;
 &lt;span&gt;&lt;/span&gt;
 &lt;span&gt;&lt;/span&gt;
 &lt;span&gt;&lt;/span&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;ul class="global-menu-list"&gt;
 &lt;li&gt;&lt;a href="ここにリンク先のアドレス"&gt;ここにメニューの名前&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="ここにリンク先のアドレス"&gt;ここにメニューの名前&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="ここにリンク先のアドレス"&gt;ここにメニューの名前&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="ここにリンク先のアドレス"&gt;ここにメニューの名前&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="ここにリンク先のアドレス"&gt;ここにメニューの名前&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(function (){
 // 変数に代入
 var $nav = $('#global-menu');
 var $content = $('#content');
 var $offsetTop = $('#trigger-point').offset().top;
 // 固定メニューの設定
 function fixedNav() {
 if($(window).scrollTop() &gt; $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');
 }
 })
});
&lt;/script&gt;

</div>

<div>

</div>

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

</ul>

</div>

$(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>

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

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

&lt;a href="ここにリンク先のアドレス"&gt;ここにメニューの名前&lt;/a&gt;

1	<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;　/*ナビメニュー上部のラインカラー変更*/
 }

/*ナビメニューの色変更*/

#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です。

&lt;i class="使用したいアイコンのクラス名"&gt;&lt;/i&gt;

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

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

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

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

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

2020年追記

はてなブログで使用できるアイコンフォントを、忘れないように表にまとめました。

クラス名	コード
blogicon-hatenablog	\f000
blogicon-plus	\f001
blogicon-minus	\f002
blogicon-reorder	\f003
blogicon-grid	\f004
blogicon-chevron-left	\f005
blogicon-chevron-right	\f006
blogicon-chevron-up	\f007
blogicon-chevron-down	\f008
blogicon-external	\f009
blogicon-plugin	\f00a
blogicon-member	\f00b
blogicon-account	\f00c
blogicon-design	\f00d
blogicon-cog	\f00e
blogicon-pages	\f00f
blogicon-edit	\f010
blogicon-addstar	\f011
blogicon-subscribe	\f012
blogicon-entry	\f013
blogicon-notify	\f014
blogicon-private	\f015
blogicon-user	\f016
blogicon-home	\f017
blogicon-setting	\f018
blogicon-draft	\f019
blogicon-search	\f01a
blogicon-analytics	\f01b
blogicon-help	\f01c
blogicon-comment	\f01d
blogicon-import	\f01e
blogicon-odai	\f01f
blogicon-truck	\f020
blogicon-group	\f021
blogicon-folder	\f022
blogicon-add	\f023
blogicon-pen	\f024
blogicon-close	\f025
blogicon-trash	\f026
blogicon-bookmark	\f027
blogicon-redirect	\f028
blogicon-check	\f029
blogicon-crop	\f02a
blogicon-repeat	\f02b
blogicon-logout	\f02c
blogicon-star	\f02d
blogicon-pro	\f02e
blogicon-myblog	\f030
blogicon-recent	\f031
blogicon-info	\f032
blogicon-good	\f033
blogicon-amazon	\f034
blogicon-twitter	\f035
blogicon-facebook	\f036
blogicon-share	\f037
blogicon-code	\f038
blogicon-list	\f039
blogicon-calendar	\f03a
blogicon-bracket	\f03b
blogicon-photo	\f03c
blogicon-color	\f03d
blogicon-public	\f03e
blogicon-realtime-preview	\f040
blogicon-warning	\f041
blogicon-link	\f042
blogicon-time	\f043
blogicon-markdown	\f044
blogicon-evernote	\f045
blogicon-music	\f046
blogicon-niconico	\f047
blogicon-heart	\f048
blogicon-heart-alt	\f049
blogicon-tag	\f04a
blogicon-mail	\f04b
blogicon-help-alt	\f04c
blogicon-sushi	\f04d
blogicon-rss	\f04e
blogicon-smartphone	\f051
blogicon-laptop	\f052
blogicon-mixi	\f053
blogicon-haiku	\f054
blogicon-amp	\f055
blogicon-editor-unorderedlist	\f700
blogicon-editor-orderedlist	\f701
blogicon-editor-link	\f702
blogicon-editor-seemore	\f703
blogicon-quote	\f704
blogicon-editor-blockquote	\f704
blogicon-editor-footnote	\f705
blogicon-editor-toolbar-show	\f706
blogicon-editor-toolbar-hide	\f707
blogicon-editor-bold	\f708
blogicon-editor-italic	\f709
blogicon-editor-strike	\f70a
blogicon-editor-underline	\f70b
blogicon-editor-fontsize	\f70c
blogicon-editor-color	\f70d
blogicon-others	\f710
blogicon-fotolife	\f711
blogicon-curation-bar-toggle	\f713
blogicon-paint	\f714
blogicon-gourmet	\f715
blogicon-flickr	\f716
blogicon-gist	\f717
blogicon-pixiv	\f718
blogicon-miil	\f719
blogicon-youtube	\f71a
blogicon-instagram	\f71b
blogicon-google-picker	\f71c
blogicon-toggle-on	\f71d
blogicon-toggle-off	\f71e
blogicon-star-o	\f720
blogicon-odaislot	\f721
blogicon-rakuten	\f722
blogicon-grid-3x3	\f723
blogicon-grid-vertical	\f724
blogicon-editor-insert-toc	\f725
blogicon-breadcrumb	\f726
blogicon-pinned	\f727
blogicon-profilecard	\f728
blogicon-snippet	\f72a