きまやのきまま屋

日常、本、映画、猫のこと。主婦で趣味人のきまやがきままに書いてます。たまにライター。

ブログ表示をカスタマイズしました(和色採用中)

久しぶりにブログ表示をカスタマイズしてみました

面白い記事を見つけたので、参考にさせていただいてブログをカスタマイズしました! 


はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally

 

せっかくはてなブログプロにしているので、プロでしかできないデザインをしてみたかったんです。スマホ表示のデザインをいじれるのはプロだけなんですね。

 

変えたところ

  • 記事中の見出しを変える
  • トップページの記事一覧のデザインにメリハリをつける

の2点を変更いたしました。少しアレンジを加えつつ…。

例えばトップページの、デフォルトでの画面はこちら。

f:id:kimaya:20141015142058j:plain 

 

カスタマイズ後は、こちら。

f:id:kimaya:20141015142113j:plain 

 

ちょっと自分なりにアレンジした点は、私はサムネイル画像の枠はいらないかな?と思って消したのと、見出しの背景色を水色にしてみました。

この色はちょっとこだわりです。色を選んだのは、こちら。 


日本の伝統色 和色大辞典 - Traditional Japanese Color Names

 

こちらの「勿忘草色(わすれなぐさいろ)#89c3eb」を採用しました。

またh4(中見出し)についても「勿忘草色(わすれなぐさいろ)#89c3eb」と「白菫色(しろすみれいろ)#eaedf7」を使っています。この名前に惚れました。ちょっと上の『変えたところ』、ちょっと下の『PCでの表示』のところです。地味なこだわり。

自分的に覚えておきたい点は、スマホデザインの変更はヘッダーのタイトル下にCSSを記入すること、それをstyleタグで囲むことです。

これな。<style type="text/css">~~~</style>。

 

PCでの表示 

PCビューについては、4ヶ月ぶりくらいにトップ画像を変えてみました。今度は空です。

あとはスマホで使ったh4のCSSをそのまま持ってきて、中見出しを色つけてみました。見やすくなりましたか?あれ?大見出しよりも目立っちゃった?

分かる範囲でまた改良していきたいです…。

 

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

 

【注意】画像の転載・無断引用は禁止させていただきます。文章についても同様に、許可のない転載はおやめください。