このブログを開設した時に行ったカスタマイズを紹介いたします。
グローバルメニューを設置しているブログは多いですね。
そのメニューの先頭に はてなブログのアイコンWebフォントを表示させ、見た目の印象を変えてみました。
使用したテーマははてなブログテーマで一番人気がある「Brooklyn」です。
がオススメ！
グローバルメニューの設置
参照にしたというかCSSをコピペしたサイトは制作者さんのサイトですが、現在はWordPressで運営しているようで、サイトはストップしています。
一般ユーザ向けとはてなPro向けとありますが、私がProなのでそちらを設置しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <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> |
デザイン ⇨ カスタマイズ ⇨ ヘッダ ⇨ タイトル下 にコピペするだけです。
変更するところは２ヶ所です。
1 | <a href="ここにリンク先のアドレス">ここにメニューの名前</a> |
「ここにリンク先のアドレス」にカテゴリーのURLを入れて下さい。
「ここにメニューの名前」にカテゴリー名を入れて下さい
メニューは5項目を超えると装丁が崩れる可能性があるということで注意して下さい。
グローバルナビのカスタマイズ
グローバルナビのカスタマイズですが，Style 21世紀×Deaf×INFPさんのサイトを参考に・・・いやコピペしました。
現在は非公開のようです。
ブログタイトルの下にあるメニューバーのカスタマイズはてなProのみです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /*ナビメニューの色変更*/ #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です。
1 | <i class="使用したいアイコンのクラス名"></i> |
使用したいアイコンのクラス名は上のサイトしろかい！さんの記事を参照下さい。
例えば <i class=”blogicon-home”>ホーム</i> と挿入すれば(これはFont Awesomeのアイコンです。)とホームマークが表示されます。
しかし，アイコンWebフォント一覧は公式に用意されていないとは驚きです。
いや〜，しろかい！さんに感謝です。
| クラス名 | コード |
|---|---|
| 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 |
画像にての表示で、ご容赦ください。
まとめとして
はてなブログに限らずグローバルメニューは訪問者がサイトを巡回する時に必ず利用し，ユーザビリティがアップするので設置は必須ですね。
いろんな方々が設置方法を記事にしていますので「(ブログテーマ名) グローバルメニューカスタマイズ」などで検索するとすぐにヒットしますね。
先人たちに感謝です。
はてなブログを運営していましたが、訳あって閉鎖しました。
そちらのサイトから「はてなブログのカスタマイズ」だけをピックアップし、コチラに移行しました。
フォントの変更や文字色の変更など、<span class=”zebline-maker zebline-color-c”>WordPressに合わせてモデファイしておりますが、文章的におかしいところもあります。
これは、なるべく「はてなブログユーザー」が理解しやすくするため</span>です。
2020年11月
はてなブログカスタマイズ トップに戻るを簡単に設置する
はてなブログカスタマイズ 人気テーマBrooklynの吹き出しを削除
コメントはありません！最初の一人になる