MENU
【今だけ13,000円】Uber Eatsで副業をお得に始める

【SWELL版】WordPressブログの行間や余白のカスタマイズ(コピペOK)

読者のアイコン画像読者

WordPress(SWELL)ブログの行間や余白のカスタマイズしたい。

この記事では上記のような疑問を解決します

この記事の想定読者
  • 行間や余白のカスタマイズしたい人
  • SWELLでブログの行間や余白をカスタマイズしたい人
ゴリランのアイコン画像ゴリラン

私(@Gorilancer)はブロガーとして4ヶ月目です。
実際に、このブログでは最後に紹介するコピペOKのカスタマイズを施しています。

目次

WordPressブログで行間や余白の重要性

ここでは、ブログにおいての行間や余白の重要性について触れます。

ツールイラスト

まず行間と余白が何を指すのか解説します。

●行間と余白について

行間と余白は以下の場所を指します。

行間、余白画像
手書きが汚くて。。。
  • 行間→文章と文章の間
  • 余白→段落ごとの間

余白は改行幅と言います。

ですが、ブログ界隈では余白と言う表現でよく見られるので、ここでは余白とします。

ちなみに段落ごとに余白(改行幅)をつける際、コードでいじる部分がmarginと言う部分です。

marginの訳が「余白」と言う意味で、皆さん余白と表現するのかなと思います。

●行間と余白は変更した方が良い


行間と余白は読みやすさに影響してきます。

私は読みやすいブログにするため、カスタマイズしました。

特に、スマホ表示の場合に変更をするのは必須かと。

私の場合PC版はあまりいじっていません。

実際に、PCで自分のブログを見るときにあまり文字の大きさや余白に違和感がなかったためです。

ゴリランのアイコン画像ゴリラン

これはSWELLテーマの既存の設定が私の好みだったためです。笑

実際に、行間と余白に幅を持たせることでスッキリとした印象になるかと。

私のWordPressブログはCocoonスタート

私はCocoon→SWELLへとテーマを移行しました。

SWELLイラスト

●Cocoon時代

私はCocoonでブログを始めました。

Cocoonは無料テーマですが、かなり有能です。

Cocoonの場合、テーマ自体の行間や余白、文字の大きさ等を細かく指定ができます。

他にも様々なカスタマイズ ができます。

ゴリランのアイコン画像ゴリラン

ブログ初心者で継続するかわからない人は、まずCocoonからブログをスタートさせるのはありかと。

ですが、私はブログを書く上で、カスタマイズに費やす時間を減らすのが得策と考えました。

ですのでブログ開始2ヶ月目から、デザインや操作性に優れたSWELLに移行しました。

●SWELL時代

SWELLの場合でも基本的に使いたい機能はほぼ直感で操作が可能です。

ただ、余白、行間のブログ全体の変更はできませんでした。

ただ、今後、製作者がアップデートしてくれると思います。

SWELLは頻繁にテーマのアップデートが行われているのはメリットの1つです。

ですので、余白、行間に関して、テーマ自体の変更はCSSをいじる必要があります。

とはいえ、少しのカスタマイズで変更できるので問題はないです。

ブログにおいてのモバイルファースト

モバイルファーストについて軽く触れます。

モバイルファースト

●Googleの評価

モバイルファーストはGoogleも推奨している考えです。

下記に公式サイトのマニュアルを載せておきます。

Google翻訳等を使用して読むことをお勧めします。

上記の記事を読んでわかると思いますが、サイトの読みやすさを意識することで、Googleの評価が上がります。

●読みやすさの向上

スマホの場合下記の問題が出てきます。

  • 文字が小さいと見にくい
  • 段落の間や行間が詰まって、読みにくい。


スマホの場合は画面も小さくなります。

そのため、画面全体に文章の羅列が来ると読みにくいです。

ですので、適度な余白や行間を入れることでストレスが減ります。

結果、ブログのUI(見た目)がよくなり読者ファーストになります。

WordPressのテーマSWELLでの余白を一部に適用させる

ここでは一部に余白を適用する方法を解説します。

●SWELL搭載の余白指定

SWELLには、記事執筆の際に1つの段落ごとに細かく余白を指定できる機能があります。

指定できる場所は下記の青枠の部分です。

実際の余白はこんな感じです。

この下の余白→なし

この下の余白→小

この下の余白→標準

この下の余白→大

この下の余白→特大

こんな感じ

SWELLに搭載されている余白は以下のサイズです。(一応記載)

  • 余白なし0em
  • 余白小1em
  • 余白標準2em
  • 余白大4em
  • 余白特大6em

emってなんだよって感じですよね。笑

この値は、わからなくて良いです。

気になる方は、「em rem 違い」等で検索して見てください。

重要なことは、これぐらいの余白が簡単な操作で、1つ1つの段落につけられると言うことです。

●WordPress搭載のスペーサー

念のため、スペーサーについても解説します。

この機能はWordPressに搭載されているので、どのテーマでも利用できます。

この下にスペーサー40pxの余白を挿入

こんな感じ

このスペーサーには注意点があります。

赤枠には「この下に…」の段落の下に規定の余白がついています。

そして、水色の枠が40px分の段落+規定の余白がつきます。

ゴリランのアイコン画像ゴリラン

ちょっとわかりにくくてすみません。笑

とにかく、スペーサーを使う際は、若干余白が多めに見えることもあります。

細かく修正する場合は、CSSの知識やGoogle検証機能が使えないと扱いにくいかもしれません。

Google検証機能は無料かつ有能ですので、気になる方はググってみてください。

【コピペOK】WordPressブログの行間や余白を全体に適用させる

ここでは全体に行間や余白を適用する方法を解説します。

注意してイラスト


私はモバイルファーストを意識して簡単にカスタマイズ しました。

ですので、スマホ表示のカスタマイズがメインです。

とはいえ、少ないコードをCSSで記述しているだけなので、簡単にできますしスマホ版だけで十分です。

私のカスタマイズした行間や余白(改行幅)は以下の感じです。

ゴリラゴリラゴリラゴリラゴリラゴリラゴリラゴリラ

こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。

あああああああああああ

こんな感じ。

ちなみに、このブログは全体の文字の大きさに対して以下のように指定されています。

  • タイトル若干大きめ
  • 目次若干小さめ

●コピペOKのカスタマイズコード

では私のカスタマイズのコードを記載しますね。

SWELLバージョンでバグが起きないようにカスタマイズ しました。

main { 
  width:100%;
	padding: 20px 15px;
}
@media only screen and (max-device-width : 480px) {
main p, ul {
	margin-top: 4em;
	line-height: 32px ;
	font-size: 17px ;
} }

まずこのコードをコピーします。

次にWordPress→「投稿の編集」→「外観」→「テーマエディター」と移動してください。

上記のコードが記載されている所に先ほどのコードをコピペして、「ファイルを更新」すればOKです。

ゴリランのアイコン画像ゴリラン

うまく反映されない等ありましたら、コメント欄、Twitter(@Gorilancer)のDM等でガンガン文句言ってください。笑

有料テーマに迷っているならSWELLテーマ

テーマならSWELL(デザインもSEOも)

WordPressテーマで悩んでいるなら、SWELLをオススメします。

SWELLを使用することで作業効率も上がり、デザインが綺麗な仕上がりに

私はブログ開始2ヶ月目で無料テーマからこのテーマに移行しました。

このテーマについて知るだけでも価値がありますよ。

SWELLの公式ページで詳細を確認する(お試し版あり)

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

この記事を書いた人

●就活、転職、自営業経験者として働き方について発信中。Uber Eatsやプログラミング、ブログなどの副業など働くことにフォーカスしたジャンルのブログです。「一人一人が働き方をデザインできるように」を第一にサイト運営しています。
【経歴】証券会社▶ベンチャー企業▶Uber Eats配達員(1500配達超え)▶現在プログラミング(プチ収入程)とブログ

コメント

コメントする

目次
閉じる