読者WordPress（SWELL）ブログの行間や余白のカスタマイズしたい。
この記事では上記のような疑問を解決します
- 行間や余白のカスタマイズしたい人
- SWELLでブログの行間や余白をカスタマイズしたい人
ゴリラン私(@Gorilancer)はブロガーとして4ヶ月目です。
実際に、このブログでは最後に紹介するコピペOKのカスタマイズを施しています。
WordPressブログで行間や余白の重要性
ここでは、ブログにおいての行間や余白の重要性について触れます。
まず行間と余白が何を指すのか解説します。
●行間と余白について
行間と余白は以下の場所を指します。
- 行間→文章と文章の間
- 余白→段落ごとの間
余白は改行幅と言います。
ですが、ブログ界隈では余白と言う表現でよく見られるので、ここでは余白とします。
ちなみに段落ごとに余白(改行幅)をつける際、コードでいじる部分がmarginと言う部分です。
marginの訳が「余白」と言う意味で、皆さん余白と表現するのかなと思います。
●行間と余白は変更した方が良い
行間と余白は読みやすさに影響してきます。
私は読みやすいブログにするため、カスタマイズしました。
特に、スマホ表示の場合に変更をするのは必須かと。
私の場合PC版はあまりいじっていません。
実際に、PCで自分のブログを見るときにあまり文字の大きさや余白に違和感がなかったためです。
ゴリランこれはSWELLテーマの既存の設定が私の好みだったためです。笑
実際に、行間と余白に幅を持たせることでスッキリとした印象になるかと。
私のWordPressブログはCocoonスタート
私はCocoon→SWELLへとテーマを移行しました。
●Cocoon時代
私はCocoonでブログを始めました。
Cocoonは無料テーマですが、かなり有能です。
Cocoonの場合、テーマ自体の行間や余白、文字の大きさ等を細かく指定ができます。
他にも様々なカスタマイズ ができます。
ゴリランブログ初心者で継続するかわからない人は、まずCocoonからブログをスタートさせるのはありかと。
ですが、私はブログを書く上で、カスタマイズに費やす時間を減らすのが得策と考えました。
ですのでブログ開始2ヶ月目から、デザインや操作性に優れたSWELLに移行しました。
●SWELL時代
SWELLの場合でも基本的に使いたい機能はほぼ直感で操作が可能です。
ただ、余白、行間のブログ全体の変更はできませんでした。
ただ、今後、製作者がアップデートしてくれると思います。
ですので、余白、行間に関して、テーマ自体の変更はCSSをいじる必要があります。
とはいえ、少しのカスタマイズで変更できるので問題はないです。
ブログにおいてのモバイルファースト
モバイルファーストについて軽く触れます。
●Googleの評価
モバイルファーストはGoogleも推奨している考えです。
下記に公式サイトのマニュアルを載せておきます。
Google翻訳等を使用して読むことをお勧めします。
上記の記事を読んでわかると思いますが、サイトの読みやすさを意識することで、Googleの評価が上がります。
●読みやすさの向上
スマホの場合下記の問題が出てきます。
- 文字が小さいと見にくい
- 段落の間や行間が詰まって、読みにくい。
スマホの場合は画面も小さくなります。
そのため、画面全体に文章の羅列が来ると読みにくいです。
ですので、適度な余白や行間を入れることでストレスが減ります。
結果、ブログのUI(見た目)がよくなり読者ファーストになります。
WordPressのテーマSWELLでの余白を一部に適用させる
ここでは一部に余白を適用する方法を解説します。
●SWELL搭載の余白指定
SWELLには、記事執筆の際に１つの段落ごとに細かく余白を指定できる機能があります。
指定できる場所は下記の青枠の部分です。
実際の余白はこんな感じです。
この下の余白→なし
この下の余白→小
この下の余白→標準
この下の余白→大
この下の余白→特大
こんな感じ
SWELLに搭載されている余白は以下のサイズです。（一応記載）
- 余白なし0em
- 余白小1em
- 余白標準2em
- 余白大4em
- 余白特大6em
emってなんだよって感じですよね。笑
この値は、わからなくて良いです。
気になる方は、「em rem 違い」等で検索して見てください。
重要なことは、これぐらいの余白が簡単な操作で、１つ１つの段落につけられると言うことです。
●WordPress搭載のスペーサー
念のため、スペーサーについても解説します。
この機能はWordPressに搭載されているので、どのテーマでも利用できます。
この下にスペーサー40pxの余白を挿入
こんな感じ
このスペーサーには注意点があります。
赤枠には「この下に…」の段落の下に規定の余白がついています。
そして、水色の枠が40px分の段落+規定の余白がつきます。
ゴリランちょっとわかりにくくてすみません。笑
とにかく、スペーサーを使う際は、若干余白が多めに見えることもあります。
細かく修正する場合は、CSSの知識や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 ;
} }まずこのコードをコピーします。
上記のコードが記載されている所に先ほどのコードをコピペして、「ファイルを更新」すればOKです。
ゴリランうまく反映されない等ありましたら、コメント欄、Twitter(@Gorilancer)のDM等でガンガン文句言ってください。笑
有料テーマに迷っているならSWELLテーマ
テーマならSWELL（デザインもSEOも）
WordPressテーマで悩んでいるなら、SWELLをオススメします。
私はブログ開始２ヶ月目で無料テーマからこのテーマに移行しました。
このテーマについて知るだけでも価値がありますよ。
SWELLの公式ページで詳細を確認する（お試し版あり）
コメント