Recommended!2020年オススメする有料WordPressテーマ7選 Read More
はてなブログカスタマイズ

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

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

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

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

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

はてなブログをやるなら、制限が少ないはてなブログ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>

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

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

<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つしか使わないし・・・

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

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

<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


残念ながらWordPress上ではてなブログのアイコンフォントは表示されませんので、数字だけの表になりました。

画像にての表示で、ご容赦ください。

まとめとして

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

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

先人たちに感謝です。

はてなブログを運営していましたが、訳あって閉鎖しました。

そちらのサイトから「はてなブログのカスタマイズ」だけをピックアップし、コチラに移行しました。

フォントの変更や文字色の変更など、<span class=”zebline-maker zebline-color-c”>WordPressに合わせてモデファイしておりますが、文章的におかしいところもあります。
これは、なるべく「はてなブログユーザー」が理解しやすくするため</span>です。

2020年11月

関連記事
はてなブログカスタマイズ

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

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。…
はてなブログカスタマイズ

はてなブログ グローバルメニューの文字をホバーしたら他の文字が半透明表示になるCSS

はてなブログはWordPressみたいにカスタマイズできるというもので…
はてなブログカスタマイズ

はてなブログのカスタマイズ!シンタックスハイライトを挿入する

はてなブログのカスタマイズを紹介する際、CSSやHTMLのシンタックス…
WordPressテーマをテストしているサブサイトはこちらからどうぞ ↓

テストサイトに各WordPressテーマを実際にインストールしてみました。
各テーマ毎に少しカスタマイズしたところもありますが、基本的に同じ画像、同じ記事で構成していますので、参考になるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です