[対応:5]本文の行間や改行幅、フォントサイズの変更方法
本日は、賢威の本文(コンテンツ部分)の
行間やフォントサイズの変更方法をご紹介します。
賢威テンプレートは、
最初からフォントサイズを大きめに、行間を広めに設定しています。
デフォルト状態でも十分に見やすいですが、
ブログスタイルによって調整したい方もいると思います。
そこでフォントサイズと行間の調整方法をご紹介します。
WordPressの場合は、
ログインしてダッシュボードから⇒外観⇒テーマ編集をクリックします。
中のスタイルシートを選択して
cool-whiteg○.cssをクリックします。
中央にある、
/*——————————————————–
メインコンテンツ(本文)
——————————————————–*/
のすぐ下にある、下記ソースを探します。
#main-contents{
float: right;
width: 570px;
font-size: 1.4em;
}
フォントサイズの変更方法
まずはフォントサイズの変更について説明します。
この#main-contentsに書かれている、
「font-size: 1.4em;」を変更します。
1.0em~2.0emの範囲ぐらいで調整してあげると良いでしょう^^
数を小さくすると、文字も小さくなります。
文字と文字の行間設定方法
次に行間の設定方法についてご説明します。
行間とは、タグで言うと<br />の幅で、
「shift+enter」で行う文字の折り返しを指します。
行間についてですが、main-contents内に
新しくソースを加えて上げる必要があります。
line-height: 1.5; ←これを新しく挿入して加えます。
#main-contents{
float: right;
width: 570px;
font-size: 1.4em;
}↓↓↓↓
#main-contents{
float: right;
width: 570px;
font-size: 1.4em;
line-height: 1.5;
}
これで行間の調節が可能になります。
デフォルト状態だとたぶん1.5ぐらいなので、
1.5を目安に上下させて上げれば良いと思います。
改行幅の設定方法
最後に改行幅の設定方法をご紹介します。
行間と違い改行幅はタグで言うと<p>~</p>を指します。
キーボード操作だと「enter」を押す、文字の2行目になります。
改行幅の設定方法は#main-contentsでは無く、
もう少し下にある下記部分で設定出来ます。
/*●コンテンツ*/
#main-contents .contents{
margin-bottom: 20px;
padding: 20px;
background-color: #fff;
border: 1px solid #666;
color: #333;
}#main-contents .contents p{
margin-bottom: 30px;
padding: 0 10px;
}
この部分の
「margin-bottom: 30px;」
を調整します。
これで改行幅を調整出来ます。
今回は本文(コンテンツ部分)の調整について説明しました。
賢威は場所場所によって、フォントサイズや行間の変更が可能です。
サイドバーやフッターなど該当部分を見つける事で同じカスタムが出来ます。
以上
賢威カスタマイズ 本文の行間や改行幅、フォントサイズの変更方法
でした。