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

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

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

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

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

h2見出しデザインの変更

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

変更前

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

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

h2 {
	font-size: 24px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 35px;
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #4169e1;
	color: #333;
	line-height: 30px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: -40px;
}
h2 {
  position: relative;
  color: #111;
  background: #ccc;
  background-image: -webkit-linear-gradient(#9cf, #9ff);
  background-image: -moz-linear-gradient(#9cf, #9ff);
  background-image: -o-linear-gradient(#9cf, #9ff);
  background-image: -ms-linear-gradient(#9cf, #9ff);
  background-image: linear-gradient(#9cf, #9ff);
  font-size: 20px;
  line-height: 1;
  margin: 30px -40px 10px -40px;
  padding: 15px 5px 10px 40px;
}

h2:after,h2:before {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top: 5px solid #777;
}
h2:after {
  left: 0;
  border-right: 5px solid #777;
}
h2:before {
  right: 0;
  border-left: 5px solid #777;
}

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

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

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

変更後

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

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

ＣＳＳのコードはこうです。

h2 {
	font-size: 30px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 35px;
	border-left-width: 20px;
	border-left-style: solid;
	border-left-color: #99f;
	color: #333;
	line-height: 30px;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: -40px;
}

h2 {
	color: #111;
	background: #ccc;
	background-image: -webkit-linear-gradient(#ff9,#ffc);
	background-image: -moz-linear-gradient(#ff9,#ffc);
	background-image: -o-linear-gradient(#ff9,#ffc);
	background-image: -ms-linear-gradient(#ff9,#ffc);
	background-image: linear-gradient(#ff9,#ffc);
	font-size: 20px;
	line-height: 1;
	margin: 30px -40px 10px;
	padding: 15px 30px 10px;
}

スマホ表示との違い

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

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

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

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

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

h3見出しデザインの変更

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

変更前

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

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

変更後

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

コードはこうです。

.kizi h3 {
	font-size: 20px;
	margin-bottom: 30px;
	margin-top: 30px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	color: #000000;
	line-height: 20px;
	background-image: none;
	background-repeat: no-repeat;
	background-position: left center;
	margin-left: 0;
	border-bottom-width: 2px;
	border-bottom-style: dashed;
	border-bottom-color: #99f;
}

h3 a {
	color: #333;
	text-decoration: none;
}

h3 a:hover {
	color: #C03;
}

h3 {
	padding: 1px 10px 4px 15px;
	border-left: 15px double #99f;
}

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

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

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

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

h4見出しデザインの変更

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

変更前

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

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

変更後

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

コードはこちらです。

.post h4 {
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 20px;
	background-color: #f0f8ff;
	line-height: 28px;
}

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

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

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

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