ものものブログ

ものものブログ

いろんな物の購入レビューと、生活の改善をしていくブログです。DIYもあるよ。360度画像もあるよ。

CSSではてなブログのデザイン変更をはじめました!保存場所とか開発方法とかまとめ。

やっとデザイン面に着手することにしました!

これまでは見出しも無色のままカエレバのリンクもCSSなしのままベタ張りしていたのでやっと綺麗にできます。嬉しい。

  • ブログ開始から1ヶ月続いている。
  • 毎日更新している。
  • はてなブログProになった。
  • Proになった事で、スマホでの閲覧時にもCSSを適応させる事ができる。

という理由で、ブログ更新に挫折すること無く進めていけそうな確信を得たので、少しづつデザインをいじっていこうと思います。

今回はどこにCSSを記述したらいいのかどうやったら効率よくCSS開発ができるのかをまとめました。

※CSSを自力で作成できるエンジニア向けの記事です。

目次

CSSを記述する場所

PC、スマホそれぞれ以下の箇所にCSSを記述して保存することで反映されます。

f:id:joko0108:20170313080940j:plain

f:id:joko0108:20170313080956j:plain

しかし、このCSS記入欄が狭くて使いづらいのです。

しかも一度編集したあとでプレビューされるまでにタイムラグがあるし、一旦編集画面からフォーカスを外す必要があったりと何かと使いづらい。

なので僕はChrome拡張を使ってCSSを編集しつつ反映させながら作っていって、ある程度決めてからこの欄に貼り付けるようにしました。

Chrome拡張「Stylish」が便利

CSSを編集できるくらいの人なら詳細は無くても拡張を導入して使う事ができると思うので詳細は省きますが、Stylishという拡張を入れることでどのサイトに対しても自分で作成したCSSを適応することができます。

例えばGoogleの背景を赤く染めたり、Yahooのトップページの不要な項目を消し去ったりとCSS次第でなんでもできます。

chrome.google.com

この拡張で自分のブログに対して反映されるCSSを編集する画面がこちら。

f:id:joko0108:20170313081843j:plain

他のタブで実際にブログページを開きながら、この画面でCSSを作っていきます。

編集したらCommand+Sで保存するだけで即時反映されるので便利。

もちろん自分の環境下だけの反映なので、他の人がブログを見たときにはまだ反映されていないので安心して開発できますね。

Chrome上でスマホ表示を試す方法

とりあえずブログページを開いてみましょう。

例えばこれ。

【Amazonで買える】お花見やピクニックに持っていくといい物をまとめました。

普通に開くともちろん以下のようなPC表示です。

f:id:joko0108:20170313082248j:plain

ここで開発者モードで表示を切り替えることでスマホでの見た目を確認することができます。

Command + option + i を同時押しすると画面下部に以下のように表示されます。

あ、僕は黒くなっていますが、標準では白色で表示されます。

f:id:joko0108:20170313082442j:plain

この左上にあるスマホアイコンをクリックするとこうなります。

f:id:joko0108:20170313082638j:plain

画面がスマホっぽくなりましたね!

この状態ではまだPC表示なので、一度ページを再読込すると...

f:id:joko0108:20170313082741j:plain

スマホ表示になりました。

あとはこれを見ながらStylishでCSSを編集する、というのを繰り返していけば好きなデザインを作っていくことができます。

で、いい感じのCSSができたら、実際にはてなブログ管理ページにある該当箇所にCSSを入れて保存します。

この時にStylishによるCSSをオフにしてから実際にブログページを開いて最終確認を行いましょう。

f:id:joko0108:20170313083200j:plain

まとめ・感想

やっとやっと着手できたCSSいじり。

CSSの編集とテスト、反映方法がわかったので自由に開発していくことができます。

あの見づらいh1とかh4とか、気になってたあの隙間とかを直せます!

少しづつ改善していくのでまたそれも記事に残しておきますね。