WordPressのテーマをSimplicity2に変更!文字サイズと行間、見出しのカスタマイズ方法

これまでのWordPressテーマは『STINGER8』でしたが、先日『Simplicity2』に変更しました。

今回はWordPressのテーマをSimplicity2に変更して初めにやった、記事の文字サイズと見と行間、見出しの変更方法をご紹介します。

(Simplicity2子テーマでのカスタマイズを前提としています。直接変更したい場合は、親テーマのデフォルトのコードも記載しているので、それを参考に書き換えてください。変更の前にはバックアップをお忘れなく。)

 

記事の文字サイズと行間の変更

こちらがSimplicity2デフォルトの記事の文字サイズと行間のCSSのコードです。

.article{
  font-size:16px;
  line-height:170%;
}

文字サイズを17pxに変更するために下記のコードを子テーマに追加。

.article{
 font-size:17px;
 line-height:170%;
}

行間(line-height)はこのままで良かったので今回は文字サイズしか変更していません。

子テーマを使用せずに変更する場合は、管理画面から外観⇒テーマの編集から、スタイルシート(style.css)の内の「.article」を探して文字サイズと行間を変更してください。

見出しタグ(h2)の変更

こちらがSimplicity2デフォルトの見出しタグ(h2)のCSSのコードです。

.article h2 {
  border-left:1px solid #000;
  margin: 40px -29px 20px;
  padding:25px 30px;
  font-size:26px;
}

緑色のボックスに影を付けた見出しに変更するために、下記のコードを子テーマに追加。

.article h2 {
 font-size: 24px;
 background:#38b48b;
 color:#fff;
 padding: 11px 13px;
 margin: 40px 0 30px 0;
 box-shadow:0px 5px 4px -2px #a0a0a0;
}

見出しのボックスの色を変更するには、background:のカラーコードを変更、ボックス内の文字色を変更するには、color:のカラーコードを変更してください。

見出しタグ(h3)の変更

こちらがデフォルトの見出しタグ(h3)のCSSのコードです。

.article h3{
  font-size:23px;
  border-bottom:5px solid #e7e7e7;
  padding:10px 0;
}

タイトル下に緑色でボーダー(点線)を引いたものに変更するために、下記のコードを子テーマに追加。

.article h3 {
 font-size: 23px;
 line-height: 22px;
 margin: 40px 0 30px 0;
 padding: 10px 13px;
 color: #1a1a1a;
 background-repeat: no-repeat;
 background-position: left center;
 border-bottom: 3px dotted #38b48b;
}

ボーダーの色を変更するには、border-bottom:のカラーコードを変更してください。

ボーダーのスタイルを変更するには、border-bottom:の「dotted」のところを変更します。

  • solid:1本線
  • double:2本線
  • dashed:破線
  • dotted:点線

他の見出しデザインに変更

このブログの他の記事で見出しのデザインサンプルを紹介しています。

コピペでOK!HTMLとCSSの見出しデザインパターン

コピペだけで簡単に変更できるので、配色など自分好みにカスタマイズしてご利用ください。

 

おわりに

今回はWordPressのテーマをSTINGER8からSimplicity2に変更して初めにやった、記事の文字サイズの変更、行間と見出しの変更方法をご紹介しました。

行間と文字サイズはCSSの数字を入れ替えるだけで変更が可能ですし、見出しのデザインはコピペでOK!HTMLとCSSの見出しデザインパターンを参考にコピペするだけで変更ができるので、ぜひお試しください。

(色を変更したい場合は、カラーコード(#+6桁の英数字)を変更してください。カラーコードは、原色大辞典HTMLカラーコードなどのサイトから簡単に探せます。)

スポンサーリンク
記事下広告
記事下広告

シェアする

フォローする

スポンサーリンク
記事下広告