TABI-TATSU BLOG

衣食旅

【2019年最新版】はてなブログのスマホデザインのカスタム(アイコンの表示エラーの改善等)

f:id:tabitatsu:20181023095223j:plain

 

 

 

僕、

いや、

私、

いや、

拙者、はてなブログを初めてもう2か月になりますが、

色んな記事を読んでいると、

 

 

今の時代、スマホからのブログアクセス数が馬鹿にならない

→スマホ用の画面をカスタマイズして滞在時間を増やそうぜ!!

 

っていうのをよく拝見しました。

 

単純な僕、いや、拙者は

 

はっっっ!!まだ何も対策してない、、、

 

となったため、焦って検索し、カスタマイズを始めました。

 

 

 

 

 

 

 

 

そこで参考にしたサイトがこちら(ただ、注意点があるので当ブログを最後まで拝読いただくことをお勧めいたします。)

↓↓↓

hitsuzi.hatenablog.com

 

 

 

ご丁寧にHTMLまですべて記載してくださっているので、

指示された箇所にコピペしていくだけで簡単に改造できます。

 

 

 

 

 

ただ!!

 

上の記事の更新日を見ていただけたら、お分かりになると思いますが、

一年半も前(※2018年10月現在)の記事です。

 

 

したがって、

Font Awesomeのアップデートにより対応できていないHTMLがあり、

拙者、それに大変苦労しました。笑

 

コピペしか能のないポンコツ野郎なもんで。笑

 

 

 

そこから、めちゃくちゃ調べてっていう手間があったので、自分用の忘備録もかねて、今回はその改善策を紹介しておこうと思います。

 

 

 

 

 

 

 

1.Font Awesomeの最新のHTMLをヘッダに貼り付ける

 

 

参考にしたのは下記サイト

↓↓↓

teratail.com

 

 

その中に

 

f:id:tabitatsu:20181023093108p:plain

 

このHTMLがあるので、まずはこれをはてなブログの

 

設定→詳細設定→ヘッド内の要素に追加

 

に貼り付けてみてくださいな。

 

 

 

 

2.Font Awesomeのver5用にHTMLを書き換える

 

 

上でもまだ表示されないというときは、アイコンのHTMLを書き換える必要があります。

 

これも一見、かなり邪魔くさそうな響きですが、簡単でした。

 

 

参考にしたサイトはこちら

↓↓↓

www.genius-web.co.jp

 

 

こちらのサイトに記載の通りですが、

一番最初に紹介したカスタム用のHTMLを紹介しているサイトからコピペした既存のHTMLのある部分に

 

 

font-weight: 〇〇〇

 

を書き加えるだけ。

(〇〇〇の部分の数字は使用するアイコンにより異なります。その数字についての記載も上記のサイトに紹介されております。)

 

 

 

 

 

 

カスタムする際にこちらでいじらなければいけない点といえば、

もうこの2点くらいです。

 

 

もちろん、自分ブログのURL等は自分で用意する必要がありますが。(笑)

 

 

簡単なので、ぜひカスタムされておくことをお勧めします~