カテゴリー
Twenty Nineteen

Twenty Nineteen、見出しの余白とFont Awesome

ワードプレステーマ、Twenty Nineteenの見出しの上部余白が窮屈に感じたので、余白を大きくしました。ついでなので、Font Awesomeのフォントを使って挿し色をつけてみました。H2タグの時だけ既存の設定を上書きしなければならないので、ちょっと面倒くさいかも。

ワードプレステーマ、Twenty Nineteenの見出しの上部余白が窮屈に感じたので、余白を大きくしました。

ついでなので、Font Awesomeのフォントを使って挿し色をつけてみました。

大区分、H2タグ

上部余白は2rem (16px x 2)分。

.entry-content h2 {
	padding: 2rem 0 0;
}

Font Awesomeを使用したい場合、H2タグの時だけ既存の設定を上書きしなければならないので、ちょっと面倒くさいかも。

h1:not(.site-title):before,
h2:before {
  background: #FFFFFF;
 content: "";
  display: block;	
  height: 0px;
 margin: 1rem 0;
  width: 1em;
}

挿し色を入れる程度の装飾ですけど。スッキリして個人的に気に入っています。

.entry-content h2:before {
	font-family: FontAwesome;
	content: "\f219\00a0";
	color: #ff7f7f;
	display: inline;
}

Contentの「f219」部分のアイコンコードを変えたり、colorの「ff7f7f」部分の色コードを変えたり、色々試しても面白いかも。

Twenty Nineteenをお使いなら、「外観→CSS編集」に追記するだけです。

twenty nineteen subheading css update

中区分、H3タグ

H3タグ~H6タグは、CSSの構成は同じでOK。上段が余白調整で、下段がフォント追加。

.entry-content h3 {
	padding: 1.75rem 0 0;
}

.entry-content h3:before {
	font-family: FontAwesome;
	content: "\f0e7\00a0";
	color: #ff7f7f;
}

小区分、H4タグ

.entry-content h4 {
	padding: 1.5rem 0 0;
}

.entry-content h4:before {
	font-family: FontAwesome;
	content: "\f138\00a0";
	color: #ff6a6a;
}
コードエディタ、H5タグ
.entry-content h5 {
	padding: 1.5rem 0 0;
}

.entry-content h5:before {
	font-family: FontAwesome;
	content: "\f14a\00a0";
	color: #ff7f7f;
}

H5とH6の見出しは、「見出し」ブロックからは選べないので、「フォーマット→カスタムHTML」ブロックを選んで、<h5></h5>の様に手書き。

adding custom html in gutenberg

殆ど使わないと思うけど、念のため調整。

コードエディタ、H6タグ

.entry-content h6 {
	padding: 1.5rem 0 0;
}

.entry-content h6:before {
	font-family: FontAwesome;
	content: "\f0a9\00a0";
	color: #ff7f7f;
}

Font Awesomeリンク

フォントはFont Awesomeの「Icons」のページから好きなのを選べばいいハズですが、最新版のバージョン5.8.1のリストでは使えないフォントもあったので、4.7.0のリストから選択しました。

最後までお読みいただきありがとうございます。

作成者: のろのろ

ゲーマーで、トレッキーに片足突っこんでいる、SF好きの、雑記ブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください