WordPressテーマ「Diver」ってステキなテンプレートなんですけど…。

ちょっと…文章と文章の間がギュッと縮まっていて見にくいですよね(> <)

見栄えを良くするために毎回改行を挟むのも良いのですが、
ここはCSSをカスタマイズして行間や文字サイズを変更してみましょう!

 バージョン4.3でCSSをカスタマイズしなくても行間や文字サイズを変更できるようになりました!
スポンサーリンク

Diverの子テーマで<P>タグをカスタマイズ

WordPressのシステムでは今お読みになっている、
こういった文章には自動的に<P>タグというのもが挿入されています。

簡単に言うと<P>タグは一つの文章と始まりと終わりを表すタグです。

この部分をカスタマイズしてあげれば行間文字の大きさを変更できます。

 外観 → テーマの編集 → diver_child → スタイルシート (style.css)

子テーマのスタイルシートに以下のコードを記載してください!

/* Pタグの行間 */
p {
	font-size: 16px;   /* ここで文字サイズ変更 */
	line-height:170%;  /* ここで行間を変更 */
	margin: 15px 0;  /* Pタグの間にスペースを挟む */
	padding-bottom:0;
}

これでOKです!必ず子テーマの方に書いてくださいね!

カスタマイズした結果

この通り!文章と文章の間にスペースが出来て見やすくなりましたね!

記事部分だけ変更したい場合

しかし、このままでは記事の部分だけでなく、
ブログ全体の<P>タグが変更されてしまいます。

記事部分だけの<P>タグを変更したい場合は…。

/* Pタグの行間 */
.content_area p {
	font-size: 16px;   /* ここで文字サイズ変更 */
	line-height:170%;  /* ここで行間を変更 */
	margin: 15px 0;  /* Pタグの間にスペースを挟む */
	padding-bottom:0;
}

先程のコードの「p」の前に「.content_area」を入れてあげればOKです!

これで記事中の<P>タグのみに文字サイズや行間の変更が適応されます。

ビジュアルエディターにも適応させる

さらに記事を書く時の画面、ビジュアルエディターにも
この行間変更を適応させましょう。超簡単ですよ!

 外観 → テーマの編集 → diver → ビジュアルエディターのスタイルシート (editor-style.css)

今度は子テーマの方ではなく、親テーマ
ビジュアルエディターのスタイルシートにコードを書きます。

/* Pタグの行間 */
p {
	font-size: 16px;   /* ここで文字サイズ変更 */
	line-height:170%;  /* ここで行間を変更 */
	margin: 15px 0;  /* Pタグの間にスペースを挟む */
	padding-bottom:0;
}

最初に紹介したコードですね。

「.content_area」はあくまでも記事部分の変更という意味なので必要ありません!

スポンサーリンク
おすすめの記事