思うこと

FF14と面白そうなことを探していく

はてなブログ「スマホサイトデザイン」を変えよう!

f:id:orangelounges:20170727073637p:plain

なんでも最近では5割くらいがスマホからのアクセスらしいじゃあないか
せっかくならシュッとしてビシッとした見た目にしたい…

ほい!ほい!ほい! f:id:orangelounges:20170727073736p:plain

ほい!
hitsuzi.hatenablog.com

今回こどみすさんのひつじの雑記帳よりデザインを参考にさせていただきました!
本当にありがたい…

記事の通り指定された部分にコードをペタペタ貼っていけ素晴らしいデザインに仕上がっていきます
ヘッダー、記事ページなどで細かく別れている項目(記事上や記事下、ページャ下等)があるけど
指定されてない部分は基本的に先にあるところにペタペタして問題ありませんでした。

ただ一点詰まったところがあって

  • タイトルバーの左右にあるアイコン
  • フッターのフォローアイコン
  • 記事下のSNSアイコン

f:id:orangelounges:20170727075337p:plain
f:id:orangelounges:20170727075501p:plain
f:id:orangelounges:20170727075514p:plain

が表示されてませんでした。
なんでじゃろなーと該当箇所のコードを検索してみるとどうやらこのアイコンは
Font Awesomeというところから来ていることが分かりました。
そこで早速その使い方を調べてみると

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

この一文が必要とのこと。
これを設定→詳細設定→検索エンジン最適化→headに要素を追加に貼り付けて変更すればOKでした!

最後に

無事に我がブログがシュッとしてビシっとした見た目になりました
大したこと書いてないのになんかすごくいい感じのブログに見える、すごい本当にすごい。
こどみすさんありがとうございます。 こういう風に見やすいデザインかけるようになりたい…
でもその前にPCサイトもきれいにしよう

Copyright ?okuplus All rights reserved.