redoブログ

redoブログ

現役スピーカー設計者によるお役立ち情報発信ブログ

【ブログカスタマイズ】「はてなブログ」のアイコンフォントを使いこなす|グローバルメニューにオススメ

f:id:redo5151:20191022210311p:plain

今日ははてなブログ」でデフォルトで使えるアイコンフォントの表示方法を紹介したいと思います。

 

実は先日私のTOPページのグローバルメニューに以下の様なアイコンフォントを追加しました。

f:id:redo5151:20191022210632p:plain

これが有ると無いとでは見栄えが全然違いますよね。

 

 

今回は最も簡単な方法を紹介します。ちなみに”HTML”上でしか適用されませんので注意してください。

 

 

アイコンフォントの使い方

このアイコンフォントを使う時は、<i>タグを使って、”HTML”上で下記のように記入します。

<i class="クラス名"></i>

f:id:redo5151:20191022215438p:plain

すると上の様に”クラス名”にあわせて色んなアイコンが表示されます。

例えば

<i class="blogicon-home"></i> TOP

 この様に記述すると、

f:id:redo5151:20191022213650p:plain TOP」という感じで表示されます。各自必要に応じて、アイコンフォントを使ってみましょう。

アイコンフォントのサイズを変えたい場合

「lg」をクラス名の後に半角スペースをあけて記述します。

<i class="blogicon-home lg"></i> TOP

f:id:redo5151:20191022213650p:plain TOP 」と少し協調した感じになりますね。

 

私のグローバルメニューでアイコンフォントを使った一例を紹介しておきますね。

<ul id='menu'><div class="menu-inner"><li>
<a href='https://redo5151.hatenablog.com/archive'>
<i class="blogicon-home"></i> TOP</a></li><li>
<a href='https://redo5151.hatenablog.com/archive/category/山登り'>
<i class="blogicon-star"></i> 山登り</a></li><li>
<a href='https://redo5151.hatenablog.com/archive/category/節約術'>
<i class="blogicon-good"></i> 節約術</a></li><li>
<a href='https://redo5151.hatenablog.com/archive/category/便利商品'>
<i class="blogicon-check"></i> 便利商品</a></li><li><a href='https://redo5151.hatenablog.com/archive/category/Amazon'>
<i class="blogicon-amazon"></i> Amazon</a></li><li>
<a href='https://redo5151.hatenablog.com/archive/category/音楽'>
<i class="blogicon-music"></i> 音楽</a></li><li>
<a href='https://redo5151.hatenablog.com/archive/category/SEO対策'>
<i class="blogicon-search"></i> SEO</a></li><li>
<a href='https://redo5151.hatenablog.com/entry/2019/10/03/privacy'>
<i class="blogicon-account"></i> privacy policy</a></li><li>
<a href='https://redo5151.hatenablog.com/entry/2019/09/21/question'>
<i class="blogicon-mail"></i> お問い合わせ</a></li></div></ul>

 このままコピーしてしまうと、私のURLにリンクしてしまうので、各自のURLに置き換えてグローバルメニューを見やすくしましょう。なんとAmazonツイッター,Facebookさらにはmixiのアイコンまで合計”116種類”登録されている様なんです。

 

今回紹介したアイコンは下記”しろかい”さんの記事を参考にさせて頂きました。下記サイトにその他のアイコンも紹介されているので、参考にしてみて下さい。

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

※しろかいさんありがとうございます。

 

他にもブログのレイアウト方法を紹介してます♪

まとめ