やっとデザイン面に着手することにしました！
これまでは見出しも無色のまま、カエレバのリンクもCSSなしのままベタ張りしていたのでやっと綺麗にできます。嬉しい。
- ブログ開始から1ヶ月続いている。
- 毎日更新している。
- はてなブログProになった。
- Proになった事で、スマホでの閲覧時にもCSSを適応させる事ができる。
という理由で、ブログ更新に挫折すること無く進めていけそうな確信を得たので、少しづつデザインをいじっていこうと思います。
今回はどこにCSSを記述したらいいのか、どうやったら効率よくCSS開発ができるのかをまとめました。
※CSSを自力で作成できるエンジニア向けの記事です。
目次
CSSを記述する場所
PC、スマホそれぞれ以下の箇所にCSSを記述して保存することで反映されます。
しかし、このCSS記入欄が狭くて使いづらいのです。
しかも一度編集したあとでプレビューされるまでにタイムラグがあるし、一旦編集画面からフォーカスを外す必要があったりと何かと使いづらい。
なので僕はChrome拡張を使ってCSSを編集しつつ反映させながら作っていって、ある程度決めてからこの欄に貼り付けるようにしました。
Chrome拡張「Stylish」が便利
CSSを編集できるくらいの人なら詳細は無くても拡張を導入して使う事ができると思うので詳細は省きますが、Stylishという拡張を入れることでどのサイトに対しても自分で作成したCSSを適応することができます。
例えばGoogleの背景を赤く染めたり、Yahooのトップページの不要な項目を消し去ったりとCSS次第でなんでもできます。
この拡張で自分のブログに対して反映されるCSSを編集する画面がこちら。
他のタブで実際にブログページを開きながら、この画面でCSSを作っていきます。
編集したらCommand+Sで保存するだけで即時反映されるので便利。
もちろん自分の環境下だけの反映なので、他の人がブログを見たときにはまだ反映されていないので安心して開発できますね。
Chrome上でスマホ表示を試す方法
とりあえずブログページを開いてみましょう。
例えばこれ。
【Amazonで買える】お花見やピクニックに持っていくといい物をまとめました。
普通に開くともちろん以下のようなPC表示です。
ここで開発者モードで表示を切り替えることでスマホでの見た目を確認することができます。
Command + option + i を同時押しすると画面下部に以下のように表示されます。
あ、僕は黒くなっていますが、標準では白色で表示されます。
この左上にあるスマホアイコンをクリックするとこうなります。
画面がスマホっぽくなりましたね！
この状態ではまだPC表示なので、一度ページを再読込すると...
スマホ表示になりました。
あとはこれを見ながらStylishでCSSを編集する、というのを繰り返していけば好きなデザインを作っていくことができます。
で、いい感じのCSSができたら、実際にはてなブログ管理ページにある該当箇所にCSSを入れて保存します。
この時にStylishによるCSSをオフにしてから実際にブログページを開いて最終確認を行いましょう。
まとめ・感想
やっとやっと着手できたCSSいじり。
CSSの編集とテスト、反映方法がわかったので自由に開発していくことができます。
あの見づらいh1とかh4とか、気になってたあの隙間とかを直せます！
少しづつ改善していくのでまたそれも記事に残しておきますね。
