【AFFINGER】h1~h4までの見出しを変更する

投稿日:2017年4月19日 更新日:

今回はアフィンガーのカスタマイズということで、見出しのデザインを変更していきたいと思います。

別に元から設定してある見出しのままでも構わないのですけれど、やはり自分好みのデザインって誰しもありますよね?

というわけでやっていきましょう。

スポンサーリンク

個別記事に使われているタグを把握する

個別記事に使われているh1~h4のタグは以下の通りです。

/* 記事タイトル */
	.entry-title, 
	.post .entry-title {
	}
	.post h1 {
	}
/* 中見出し */
	h2 {
	}
/*小見出し*/
	.post h3 {
	}
	.post h4 {
	}

これらの{}の中にどのようなデザインにするかが記述されており、それを変更することで見出しのデザインを変更できます。

見出しのデサインなんか変更の仕方がわからないよ……という方は、これらの{}の中に『CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選|サルワカ』こちらのサイトで紹介されているコードでも使ってみてはいかがでしょう?

コピペするだけでいいので、何も悩むことはありません。今回は私もこちらのサイトからコピペ+少しの改変でデザインを変更してみたいと思います。

タイトルのデザインを変更する

タイトルに使われているのは『.entry-title,.post .entry-title』と『h1』ですので、これを自分の好みの設定に変えていきます。

/* 記事タイトル */
	.entry-title, 
	.post .entry-title {
  		font-size: 21px;
		line-height: 120%;
		color: #333;
		margin-bottom: 10px;
		font-weight:bold;
	}
	h1 {
		padding: 4px;
		border-left: solid 5px #7db4e6;/*左線*/
	}

デフォルトからの変更点は、タイトルの左側にボーダーをつけて『padding』の設定を行ったこと。
フォントサイズが22pxでは大きすぎる気がしたので21pxに縮小したこと。『line-height』の設定をpxから%に変えたことです。
これでタイトルの『h1』の見出しデザインが変更できました。

h2のデザインを変更する

h2タグは記事ないでもh3と同じく使用頻度の高い見出しです。
少し小洒落た感じにしてみたいので、こんな風にしてみましょう。

/* 中見出し */
	h2 {
		position: relative;
		padding: 5px 5px 5px 42px;
		background: #4188C9;
		font-size: 20px;
		color: white;
		margin-left: -33px;
		line-height: 1.3;
	}
	h2:before {
		position: absolute;
		content: '';
		left: -2px;
		top: -2px;
		border: none;
		border-left: solid 40px white;
		border-bottom: solid 79px transparent;
	}

これで少し小洒落た感じになったと思います。
アフィンガーでこのコードを使う場合は『z-index』の部分を消してやらないと正常に表示されないので、同じコードを使おうと思った方は注意してください。

h3タグのデザインを変更する

続いてh3タグです。

/*小見出し*/
	.post h3 {
		position: relative;
		background: #eff4ff;
		padding: 2px 5px 2px 25px;
		font-size: 20px;
		color: #474747;
		border-radius: 0 10px 10px 0;
	}
	.post h3:before {
		font-family: FontAwesome;
		content: "\f064";
		display: inline-block;
		line-height: 40px;
		position: absolute;
		padding: 0em;
		color: white;
		background: #4188C9;
		font-weight: normal;
		width: 40px;
		text-align: center;
		height: 40px;
		line-height: 40px;
		left: -1.35em;
		top: 50%;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border: solid 3px white; 
		border-radius: 50%;
	}

少し長いですがこんな感じにしてみました。
公開されているコードからの変更点は背景色とアイコンぐらいだと思います。
アイコンの設定は『Font Awesome』このサイトの物をアフィンガーで使用できますので、『content:』のあとを変更してやればアイコンが変わると思います。

これで表示してもらったらわかると思うのですが、元々の設定に『border-bottom: 1px #999999 dotted;』というものが挿入されていますので、これを削除してやらないとコピペ前のデザインと少々違う部分が出てきます。

私は残しておいたほうが好みのデザインなので残しておきますが、

	.post h3 {
		position: relative;
		background: #eff4ff;
		padding: 2px 5px 2px 25px;
		font-size: 20px;
		color: #474747;
		border-radius: 0 10px 10px 0;
		border-bottom:none;
	}

としてやれば、参考元のサイトと同じデザインになるかと思います。

実は下部のコメントのところにもh3が使われている

そのため、このままでは『comment』と表示されている部分も表記が変わります。

というか、崩れて『mment』しか見えなくなってしまうので、この部分だけ通常のh3に戻す処理を施しましょう。

※他にも確認した時に表記が崩れる箇所があると思いますので、あれば報告ください。

	.post #comments h3 {
		font-size: 18px;
		line-height: 27px;
		margin: 20px 0;
		padding: 10px 15px;
		color: #1a1a1a;
		line-height: 27px;
		background-repeat: no-repeat;
		background-position: left center;
		border-bottom: 1px #999999 dotted;
	}
	.post #comments h3:before{display: none;}

としてやることで、初期表示のままになります。

h4タグのデザインを変更する

私はh4まで使うことは滅多にないのですが、滅多にないからこそ注目させたい部分であるということを強調していきたいと思います。

ですので選んだのはこちら。

POINTとつけることで特に気にしてほしい場所を示す

	.post h4 {
		position: relative;
		border-top: solid 2px #80c8d1;
		border-bottom: solid 2px #80c8d1;
		background: #f4f4f4;
		line-height: 1.4;
		padding: 0.4em 0.5em;
		margin: 2em 0 0.5em;
	}
	.post h4 :after {/*タブ*/
		position: absolute;
		font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
		content: '\f0a7\ POINT';
		background: #80c8d1;
		color: #fff;
		left: 0px;
		bottom: 100%;
		border-radius: 5px 5px 0 0;
		padding: 5px 7px 3px;
		font-size: 0.7em;
		line-height: 1;
		letter-spacing: 0.05em;
 	 }

配色等も変えることなく、そのまま流用させていただいています。

色を揃えてしまったほうが統一感があっていいとは思うのですが、強調したい部分である! という意味合いが薄れてしまいます。

ですので、このまま使用させていただいております。

関連記事の見出しにもh4が使われているので対応する

上記のままだと、投稿記事内の下部に表示される関連記事の部分にもこの見出しが適用されてしまいます。

なので、以下のコードも追加しましょう。

	.post h4.point {
  		border: 0;
		margin:0 0 20px;
		position:relative;
		border-bottom:solid 1px #f3f3f3;
		padding:20px 15px 10px;
		background-color:transparent;
	}
	.post h4.point :after {
		display: none;
		}

これで関連記事部分の上に見出しの設定が適用されなくなり、今まで通りの表記がされると思います。

私の改変ではマージンを40pxから20pxに変えてしまっているので、20pxでは狭いという人は各自で変更をお願いします。

レスポンシブにしっかりと対応していないためスマホで見ると表記が崩れる

実はこれ、モバイル端末で見ると微妙に表示が崩れます。

それは『見出しが2行や3行になることを前提にしていないから』なんですよね。

なので、モバイル用には別で見出しのCSSを設定していきます。

モバイル用の見出しデザインを変更する

モバイルはごちゃごちゃすると見づらくなるのでシンプルにしていきましょう。

/*--------------------------------
見出しの設定
---------------------------------*/
/* 中見出し */
	h2 {
  		font-size:18px;
		background: #4188C9;
		box-shadow: 0px 0px 0px 5px #4188C9;
		border: dashed 1px #eff4ff;
		padding: 0 2px;
  		margin:16px 0 8px;
		color: #FFF;

	}
	h2:before {	display: none;}
/*小見出し*/
	.post h3 {
		position: relative;
		background: #eff4ff;
		padding: 2px 5px 2px 5px;
		font-size: 17px;
		color: #222;
		border-radius: 0;
	}
	.post h3:before {display: none;}
	
	.post h4 {
		font-size:15px;
	}

これでモバイル用に見出しのデザインを変更することが出来ました。

PCやタブレットで見るのとは表示が変わっているので、各自好きなデザインで表示が崩れないよう対応してみてください。

このようにデザインは簡単に変更できますので、デザインを変えたいなーと思っている方は一度お試しください。

スポンサーリンク

-AFFINGER
-, , ,

Copyright© ビブリオテーク , 2017 All Rights Reserved.