MUTANT

SEOやブログマネタイズの手法を紹介しています。ブログを運営する上での役立つtipsを紹介していきます。

はてなブログのメニューにアイコンを設定する方法

f:id:mutant-tetsu:20160711133426j:plain

こんにちは、てつです。

昨日、『ブロガーのテンションを上げるオススメ曲51選』ってエントリーを公開したのですが、

Youtubeのリンク貼りまくりすぎてブログが重くなり、スマホでブログが閲覧できないという自体に。友人に指摘されて初めて気付きました。

なので、この記事は非公開にしました。Youtubeのリンク51個も貼ったらダメですね。

BGMS.meっていうYoutubeを連続再生できるwebサービスの方にはそのまま残っているので、作業用にでも聴いてみてください。

bgms.me

 

今日は、はてなブログのメニューにアイコンを設定する方法について。

私が使っているはてなブログのデザインテーマ『CONTENTS』を時々いじってカスタマイズしています。

新しくメニューにアイコンを設定してみたので、はてなブログのメニューにアイコンを設定する方法を紹介します。

アイコンを設置するとこんな感じになりますね。

f:id:mutant-tetsu:20160710152039j:plain

とても簡単なので、デザインを少し変えたいという人はぜひ参考にしてみてください。

 

はてなブログのメニューにアイコンを設定する

はてなブログでアイコンを設置する時、最初はfontawesomeを使おうかと思っていました。

でも調べていると気付いたのですが、はてな側でアイコン使えるように用意されているんですね。

使い方はとても簡単です。メニュー名の前にコードを入れ込むだけです。

以下で詳しく解説していきます。

 

メニューにアイコンを設定する

それではさっそくメニューにアイコンを設定していきます。

なお、自分が設定しているブログテーマ『CONTENTS』をもとに話しを進めていきます。

管理画面から『デザイン』>『カスタマイズ』>『ヘッダ』>『タイトル下』に遷移します。

当ブログのコードを例に取ってみると、メニューで『トップ』と表示されている場所のコードはこんな感じ。

 

<div class="navi">
  <ul>
    <li><a href="http://www.mutant-tetsu.com">トップ</a></li>
    <li>

 この『トップ』の直前に以下のコードを貼り付けるだけです。

<i class="好きなアイコン"></i>

今回はトップに家のアイコンを使ってみます。

家アイコンのクラスはblogicon-homeなので、『好きなアイコン』の箇所にそのまま挿入します。

なので、コードはこのような感じになります。

<div class="navi">
  <ul>
    <li><a href="http://www.mutant-tetsu.com"><i class="blogicon-home"></i>トップ</a></li>
    <li>

好きなアイコンを選んで挿入しただけです。

アイコンの一覧はこちらのブログで詳しく紹介されています。

f:id:mutant-tetsu:20160710152038j:plain

shirokai.hatenablog.com

たくさんアイコンが一覧でまとめられているので、あとは自分の好きなアイコンを挿入していきます。

当ブログでは『SEO』の箇所にはblogicon-analyticsと言った具合にアイコン一覧からそれっぽいアイコンを探して挿入するだけです。簡単ですね。

 

まとめ

今回、はてなブログのメニューにアイコンを設置する方法をシンプルに紹介しました。

メニューのデザインを変えたいなぁという方は参考にしてみてください。

自身が設定しているデザインテーマによってはメニューがないテーマもあります。

 

当ブログで使っているデザインは『CONTENTS』というテーマなのですが、かなりデザインが気に入っているのでこのテーマにしました。

レスポンシブ対応ですしね。スマホで見た時もデザインがいい感じです。

興味ある人は参考にしてみてください。

CONTENTS - テーマ ストア

ちなみにテーマ作成者のJOEさんのブログにはカスタマイズ方法が詳しく紹介されています。

www.dreamark.tokyo

 

Copyright © 2016 MUTANT All rights reserved.