ブログの見出しデザインh2、h3、h4 を変更しました。設定したコードも記載します。

デザイン変更

当ブログの見出しをカスタマイズいたしました。

最初に設定して以来、数ヶ月ぶりの変更です。

この記事では変更内容と設定コードを記載したいと思います。

※見出しを紹介するという記事の都合上、見出しが重複し、読みにくい記事となっております。

h2見出しデザインの変更

h2見出しデザインをこの様に変更しました。

見出しの変更h2

 

変更前

もともとデザインを変更しようと思ったきっかけは、このh2のデザインがちょっと気になってきたからです。

2014-08-30_16h45_47

これはCSSだけで記述しており、CSSのコードはこうです。

リボン型で、カラーは「まなびや」のイメージカラーであるスカイブルーを配色していました。

こだわりを持って作ったのですが、小見出しとしては、視認性があまり良くありませんでした。

おそらく、青と黒の組み合わせがいまいちなのだと思います。

 

変更後

見出しの文字を読みやすくするために、黄色と黒の組み合わせにしつつ、「まなびや」のイメージカラーである青系も配色しようと思いました。

2014-08-30_17h09_34

こちらもCSSのみで設定しております。

CSSのコードはこうです。

 

スマホ表示との違い

正直言って、CSSは理解出来ていないもので、数字を入れてはプレビュー、数字を入れてはプレビュー、の繰り返しで設定していきました。

なんとか、スマホでも表示は出る様になったものの、iphone5の画面では左側のボーダー(紫)は表示されません。

おそらく、[margin]か[padding]あたりの数値をいじれば良いのだと思いますが、まぁスマホはこれでもいいかなと思い、ここ止まりにしております。

なお、CSSが苦手な方には、jetpackというプラグインがおすすめです。

jetpackにはCSS編集の機能があり、確認しながら作業を進めることが可能です。

 

h3見出しデザインの変更

h3の見出しデザインをこの様に変更しました

h3変更

変更前

h3はstinger3デフォルトのデザインを使用していました。

2014-08-30_17h36_58

これはデフォルトの設定ですので、コードの記載は省略させていただきます。

 

変更後

h2とデザインを揃えるために、次の様に変更しました。

2014-08-30_17h40_59

コードはこうです。

※上記コードの中に、.kiziという記述が入っています。

これは、このブログで使用しているstinger3の記述に合わせたものです。

これを外すと上手く表示が反映されなかったため、残したままにしています。

ご自身の環境に合わせて、ご利用ください。

 

h4見出しデザインの変更

h4の見出しデザインをこの様に変更しました。

h4変更

変更前

これも初期設定からいじっていませんでした。

2014-08-30_17h50_08

こちらもstinger3初期設定のままなので、コードは省略させていただきます。

 

変更後

h2,h3と合わせるために、ブルー系に配色を変更しました。

2014-08-30_17h49_34

コードはこちらです。

これは、初期設定のコードから、background-colorの値を変えただけです。

ちなみに、今回設定したf0f8ffという色は、別名「アリスカラー」と呼ばれています。

名前が良かったので、この色にしました(^^)

 

今後も、気になることがあれば随時変更し、ブログでも内容を開示していきたいと思います^^

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です