[SWELLカスタマイズ] 記事本文の行間、マージン、フォントの指定方法

【PR】この記事には広告を含む場合があります。
SWELL記事本文カスタマイズ

当サイト「あふぃぶ」では、ワードプレスの設定、運用方法など、テクニカルな情報を中心にお伝えしています。

WordPresテーマ SWELLで、記事の行間などを細かくカスタマイズする方法をおしえてください

ワードプレステーマ「SWELL」では、細かいデザインの修正をテーマの設定で行うことができます。

  • 記事本文の行間
  • マージン
  • フォント

についても、SWELLのオプションから設定内容を変更することができますが、細かい修正についてはスタイルシートでのカスタマイズが必要です。

この記事では、ワードプレステーマ「SWELL」の記事本文の行間、マージン、フォントの細かいカスタマイズ方法について解説します。

ぺん

スタイルシートを使ったカスタマイズ方法について、初心者の方にも分かりやすく解説します。

この記事の内容
  1. SWELLのCSS設定方法
  2. 行間設定のカスタマイズ方法
  3. マージン設定のカスタマイズ方法
  4. フォント設定のカスタマイズ方法

ブログ用テーマには
SWELLが特におすすめです

目次

SWELLのCSS(スタイルシート)設定方法

SWELLでは、カスタマイズしたスタイルシート(CSS:Cascading Style Sheets)の適用範囲を、

  • サイト全体
  • 1つの記事のみ

に、指定することができます。

CSS(スタイルシート)の概要については、下記の記事をご覧ください。

>>WordPressのCSS(スタイルシート)の設定方法

サイト全体にCSSを設定する方法

サイト全体にCSSを適用

フォント設定など、サイト全体に共通するデザインは、以下の手順で設定します。

STEP
WordPressの管理画面にログインする
WordPressログイン画面
WordPressの管理画面のログインページ
STEP
外観>カスタマイズを選択
STEP
追加CSSを選択
STEP
追加CSSにスタイルシートを入力し、公開ボタンをクリックする
追加CSS入力画面

これで、追加CSSに登録したスタイルシートが、サイト全体に適用されます。

特定の記事のみCSSを設定する方法

特定の記事のみCSSを適用

特定のページだけで使うデザインは、以下の手順で設定します。

STEP
スタイルシートを適用する記事の編集画面を開く
STEP
カスタムCSS&JSの「CSS欄」にスタイルシートを記入して「公開」ボタンをクリックする
CSSの入力画面

これで、CSS入力欄に入力したスタイルシートが、編集中の記事だけに適用されます。

ぺん

スタイルシート(CSS)だけではなく、JS(JavaScript)も、ここで設定できます。

SWELLの行間カスタマイズ方法

行間とは、行の高さのことです。

行の高さの説明
記事本文の行の高さはline-heightで指定

ワードプレステーマ「SWELL」の行間のデフォルトは1.8(行)となっています。

記事本文の行間を指定するCSS

行間(line-height)で指定するのは、行間の高さです。

行間1.0

1を指定すると、行間に1文字分、

.post_content p {
line-height:1.0;
}
line-height:1.0
line-height:1.0

行間1.5

1.5を指定すると、行間に1.5文字分、

.post_content p {
line-height:1.5;
}
line-height:1.5
line-height:1.5

行間1.9

1.9を指定すると、行間に1.9文字分のスペースが開きます。

.post_content p {
line-height:1.9;
}
line-height:1.9
line-height:1.9

一般的には行間(line-height)のおすすめは、1.5から2.0程度でしょう。

ぺん

いろいろ試して、読みやすい行間を指定してください。

SWELLのマージンカスタマイズ方法

マージンとは余白のことです。

マージンの説明
記事本文のマージンは margin-bottom で指定

記事本文のマージンとは、文章と文章の間の余白です。

ぺん

文章と文章の間には、ある程度のマージンがあったほうが、記事を読みやすいですね。

記事本文のマージンを指定するCSS

マージン(margin-bottom)で指定するのは、文章と文章の間の余白で、Mサイズの文字の数(em)として指定します。

ぺん

1emは一文字分、2emは2文字分という意味ですね。

マージン1.0em

1.0emを指定すると1文字分、

.post_content>p {
margin-bottom: 1.0em;
}
margin-bottom:1.0em
margin-bottom:1.0em

マージン1.75em

1.75emを指定すると1.75文字分、

.post_content>p {
margin-bottom: 1.75em;
}
margin-bottom:1.75em
margin-bottom:1.75em

マージン2.5em

2.5emを指定すると2.5文字分の余白(マージン)が、 文章と文章の間に入ります。

.post_content>p {
margin-bottom: 2.5em;
}
margin-bottom:2.5em
margin-bottom:2.5em

Webフォントのカスタマイズ方法

ワードプレステーマ「SWELL」で、好きなWebフォントを使用する方法について解説します。

SWELLで指定できるフォント種別

SWELLでは記事本文のフォントとして、下記のフォントを指定することができます。

  1. 遊ゴシック
  2. ヒラギノゴシック>メイリオ
  3. Noto Sans JP
  4. 明朝体(Noto Serif JP)
ワードプレステーマ「SWELL」のフォント指定
ワードプレステーマ「SWELL」のフォント指定
  1. 遊ゴシック
  2. ヒラギノゴシック>メイリオ

は内蔵フォントですが、

  1. Noto Sans JP
  2. 明朝体(Noto Serif JP)

はWebフォント(Google Fonts)を使用しています。

Webフォントをつかうと、サイトスピードが遅くなる

Webフォントをつかうとサイトの印象を大きく変えることができますが、Webフォントの読み込みが必要になる分、サイトの描画速度が低下してしまいます。

SWELLの設定で指定できるフォントを使わない場合は、使用しないWebフォントを読み込ませないように、SWELLのフォント設定には「遊ゴシック」または「 ヒラギノゴシック>メイリオ 」を指定してください。

Google Fontsから使いたいWebフォントを選ぶ

Google Fontsでは、無料で使用できるWebフォントが多数公開されています。

好きなフォントを選んでみましょう。

Googleフォント
Google Fonts
リンク

記事本文のフォントを指定するCSS

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@500;700&display=swap');
.post_content>p {
font-family: 'Kaisei Decol', serif;
}

記事本文のフォントだけを変更する場合は、こちらのCSSを適用します。

Googleフォントを指定
Googleフォントを記事本文のみに指定した例

Webフォントを使うと、サイトの雰囲気がガラっと変わりますね。

サイト全体のフォントを指定するCSS

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@500;700&display=swap');
body {
font-family: 'Kaisei Decol', serif;
}

BODYタグにフォントを指定すると、記事本文だけではなく、タイトルやサイドメニュー(ウイジェット)などにも、指定したフォントが適用されます。

GoogleフォントをBODYに指定
Googleフォントをサイト全体に指定した例
ぺん

記事タイトルやヘッダー、記事本文が同じフォントだと、デザインに違和感がありませんね。

Google Fontsの使い方については、以下の記事でも解説しています。

>>[SWELLカスタマイズ] Google Webフォントの利用方法 >>[SWELLカスタマイズ] オリジナル見出しデザインの設定方法を解説

まとめ

今回は、ワードプレステーマ「SWELL」の記事本文の行間、マージン、フォントのスタイルシートでの指定方法をご紹介しました。

SWELLは自由度も高く、ほとんどのカスタマイズは設定変更で行えますが、より細かいカスタマイズを行うためには、スタイルシートの設定が必要です。

記事の行間、マージン、フォントを変えることで、サイトの見た目や読みやすさは驚くほど変化します。

今回ご紹介した方法で、あなたのサイトのデザインをカスタマイズしましょう。

ブログ用テーマには
SWELLが特におすすめです

このサイトでも使用している、ワードプレステーマ「SWELL」の詳しいレビューは、下記からご覧いただけます。

>>WordPress有料テーマ「SWELL」はおすすめ?移行後8か月の辛口レビュー
SWELL記事本文カスタマイズ

この記事が気に入ったら
フォローしてね!

よかったらシェアをお願いします!
目次