うぇぶ活

沖縄に移住していたが、故あって名古屋へ移住したカップルweb人がアフィリエイトでダブルフリーランスを目指すための活動雑記

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

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

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

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

 

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

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

参照にしたというか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さんのサイトを参考に・・・いやコピペしました。

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

www.style-yry.com


ブログタイトルの下にあるメニューバーのカスタマイズはてな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つしか使わないし・・・

 

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

shirokai.hatenablog.com

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

 

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

 

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

例えば <i class="blogicon-home">ホーム</i> と挿入すれば ホーム とホームマークが表示されます。

しかし,アイコン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

 

まとめとして

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

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

先人たちに感謝です。