これは便利!はてなブログで手っ取り早くサイドバータイトルにアイコンを表示する方法

私のブログでは、はてなの純正アイコンではなくて、Font Awesomeというウェブアイコンを使用していました。

もちろん現在も使っていますし、当ブログのスライドメニューのアイコンもFont Awesomeを使って表示しています。

f:id:oyomiyo:20181007193330p:plain

赤枠の彼らのことですね。

フォントの種類などからしてみてもFont Awesomeの方がたくさんあって良いっちゃ良いのですが、中にはサイトが重くなる可能性があるんじゃないのーとかぬかす虚弱体質…ことを少なからず心配される慎重派な方もおられるかもしれません。

なので今回は、速度を気にせずアイコンを乱用する方法を紹介します。

 

はてなブログの純正アイコンを使います。新たに外部ファイルを追加する必要はありませんから速度的にも安心でしょう。

本来我々がブログのカスタマイズに使うために用意されてるわけではないようですが、どっちみち準備されてるのであれば使ってやろうではないかという魂胆です。

googleを怒らせない程度に適度に乱用して、ブログにドーピングしてあげてください。

 

アイコン乱用。ダメ?絶対???

 

はてな純正アイコンの問題点を挙げるとすれば、種類が少ないということでしょうか。

ほんとそれくらいです。

ほとんどの人が使わない物をブログに読み込んでいるワケですから極力軽くしてあげたいというはてな側の配慮の表れととりましょう。(ええこと言う)

 

以下注意点です。

念のためにバックアップはとっておいてください。

またこの記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご理解ください。

PLAIN - テーマ ストア

サイドバータイトルにアイコンを表示する方法

デザイン設定のタイトル下部分から行います。

f:id:oyomiyo:20180909220240p:plain

赤枠の部分に以下のコードをコピペしてください。

CSS

<style type="text/css">

.hatena-module-title:before { 
    font-family:blogicon;
    padding-right: 5px; /*アイコン右余白*/
    font-size:; /*アイコンサイズ*/
    color:; /*アイコン色*/
}

.hatena-module-profile .hatena-module-title:before {
    content: '\f016'; /*プロフィール*/
}

.hatena-module.hatena-module-search-box .hatena-module-title:before {
    content: '\f01a'; /*検索*/
}

.hatena-module.hatena-module-recent-entries .hatena-module-title:before {
    content: '\f024'; /*最新記事*/
}

.hatena-module.hatena-module-entries-access-ranking .hatena-module-title:before {
    content: '\f050'; /*注目記事*/
}

.hatena-module.hatena-module-related-entries .hatena-module-title:before {
    content: '\f00a'; /*関連記事*/
}

.hatena-module.hatena-module-category .hatena-module-title:before {
    content: '\f04a'; /*カテゴリー*/
}

.hatena-module.hatena-module-archive .hatena-module-title:before {
    content: '\f039'; /*月別アーカイブ*/
}

.hatena-module.hatena-module-recent-comments .hatena-module-title:before {
    content: '\f01d'; /*最近のコメント*/
}

.hatena-module.hatena-module-circles .hatena-module-title:before {
    content: '\f021'; /*参加グループ*/
}

.hatena-module.hatena-module-html .hatena-module-title:before {
    content: '\f000'; /*HTML*/
}

</style>

 

サイドバーの部分だけを切り取った画像を載せておきます。

取りあえず見た目はこんな感じ正しく表示されているのが確認できます。

 

f:id:oyomiyo:20181007190831p:plain

 

一応使う可能性のあるヤツは全部詰め込んでおきました。(画像に乗ってない物もあります)こんなの一生追加しないぜってやつがあれば消してもらって構いません。(参加グループとか使ってる人ほとんど見ないし…)

あと、先ほど載せたコードの一番最後の部分にあるHTMLという部分は、サイドバーに自分でHTMLを追加してモジュールを作ることができるヤツです。

 

上のコードを追加した時点でサイドバーにアイコンが表示されるようになるはずです。取りあえずピッタリなアイコンをワタクシの「たぐいまれなるセンス」でチョイスしておりますので恐らく不満が出る可能性は、ウン十億分の一だとは思いますが、、、

 

有難いことに当ブログの管理人さんは「たぐいまれなる親切心」も持ち合わせているとのことですので、アイコンの一覧表をわざわざ準備してくださ、、、

いませんでした。

 

はてなブログで使えるアイコンフォント一覧 2015/12/06 版 - MoonNote

この記事を参考にして下され。

アイコンのスタイルを変更する

アイコンのスタイルを変更することももちろん可能です。

冒頭に乗せたコードのうち以下の部分を使用します。

CSS

.hatena-module-title:before { 
    font-family:blogicon;
    padding-right: 5px; /*アイコン右余白*/
    font-size:; /*アイコンサイズ*/
    color:; /*アイコン色*/
}

まずは余白設定から。

アイコン右の余白を指定する

この部分をいじります。

padding-right: 5px; /*アイコン右余白*/

 

ちょっとやそっと変更したぐらいでは気付いてくれない可能性もありますので大きめに余白を入れてみたいと思います。

取りあえず50pxでかましてみましょう。

padding-right: 50px; /*アイコン右余白*/

見た目はこんな感じ。

f:id:oyomiyo:20181007200021p:plain

赤の所が設定された余白ということになりますね。

もうちょっと過激にカスタマイズしてほしかったという大多数の意見にも同意しつつ、、、

次は文字のサイズを変更します。

アイコンの文字サイズを変更する

デフォルトでは何も設定せずに空欄にしています。

実はこの部分、アイコン自体に設定しなくてもサイドバータイトルの文字の大きさを自動的に引き継ぐ形になっている(アイコンは文字として認識されます)ため、ほとんどの場合は丁度いい大きさでアイコンが表示されているはずです。

サイドバータイトルの文字が大きくなればなるほど、アイコン自体も大きくなります。

例えば、サイドバータイトルの文字を175pxという「そんな数字使うヤツどこにおんねん」と言われそうな大きさで表示した場合こうなります。

f:id:oyomiyo:20181007201502p:plain

ここにおんねん。

よく見るとこのアイコンは男性という事実。

それはいいとして、重要なのは、アイコンの大きさはサイドバータイトルの文字の大きさを引き継ぐからカスタマイズはほぼ必要ないということと、どうしてもアイコンだけ大きさを変更したい場合はさっきの部分で指定すればいいですよということです。

サイドバータイトルのカスタマイズうんぬんについてはこの記事を参考にされたし。

「コピペで解決!」はてなブログでサイドバーのタイトル部分をカスタマイズする方法

 

アイコンの色を変更する

アイコンの色に関しても、文字の大きさと同じでサイドバータイトルの文字色を引き継ぎます。

ただしアイコンだけ別の色で表示したいというケースは多いかもしれません。

その場合先程のコードのうちのこの部分を変更することで、アイコンだけ色を変更できます。

color:; /*アイコン色*/

試しに青(#2d95de)でやってみましょう。

color: #2d95de; /*アイコン色*/

f:id:oyomiyo:20181007202929p:plain

アイコンだけ青表示になりました。

アイコンでカスタマイズが必要になる部分といえばこのくらいだと思います。

最後に

いつもお騒がせしております。。