そんな悩みが解決できる記事を書きました。

結論、その秘密のひとつは「余白」に隠されています。
※ここでいう余白とは、段落と段落の間の余白スペースのことです。

そこで、本記事の内容はこちら。

本記事の内容

• 有名ブロガーさんの余白の調査結果を公開
• 余白の調整方法

たかが余白、されど余白。

余白はブログのぱっとみのデザインに大きく影響するんです。

この記事を読んで、有名ブロガーさんの余白の取り方を参考にしてみてください。

さっそく解説していきます。

【ブログデザイン】有名ブロガーの余白の調査結果を公開します

被験者は僕も良く参考にしているこのお三方です。

• マナブさん manablog
• Tsuzukiさん tsuzuki Blog
• クニトミさん 副業コンパス

【ブログデザイン】余白の調査方法

Chromeの検証ツールを使用して、PC表示の場合のフォントサイズとmarginの値を調べました。

Chromeの検証ツールの使い方を知りたい方はこちらで分かりやすく解説しています。

【超簡単】Chrome検証ツールでブログデザインを調べる方法

2020年8月1日

【ブログデザイン】余白の調査結果

下表にまとめましたので、さっそくご覧いただきましょう。
※小数点は四捨五入。

でもこれには裏がありまして、ツヅキさんとクニトミさんはmargin-bottomの設定以外で余白の調整を行っていました。

ツヅキさん

Gutenbergには「スペーサー」というブロックタイプがありまして、それを使われているようです。

そのスペーサーを使って42px程度の余白が設けられていました。

このやり方だと、細かな調整がしやすそうです。

クニトミさん

いきなり<br>タグで改行し、1文字分の余白を取っておりました。

そんなやり方があるとは！

ということで、お二方の余白の調整を含めた結果はこちら。

やはりみなさん思った以上に余白を取られていますね。
僕のテーマ「スワロー」の初期設定と比べて頂ければ一目瞭然かと。

表示中の画面内に文字ばかりで埋め尽くされていると、読む気しませんよね。

余白はブログのぱっとみのデザインや印象に大きく影響するのは確かなようです。

余白を調整してみよう！

せっかく調べたので、これを機に僕も自サイトの余白とフォントサイズを調整してみました。

変更内容は以下のとおり。

• フォントサイズを16px→17pxに変更
• margin-bottomを29px→24pxに変更
• marginを狭くした代わりに、余白を開けたい箇所に32pxのスペーサーを挿入するようにした
  ※ツヅキさんと同じ方法

• フォントサイズを17px
• margin-bottomを24→48pxに変更
• スペーサー32px→0px

CSSコード公開

僕と同じワードプレステーマ「スワロー」の方なら、style.cssに以下のように定義すればよろしいかと。
※後で説明しますが、レスポンシブ対応もしてます。

.entry-content.cf {
  font-size: 17px;
}
.entry-content p {
  margin-bottom: 2.8em;
}
@media screen and (max-width: 480px) {
  .entry-content.cf {
    font-size: 16px;
  }
}

各々の値は適宜編集くださいね。

他のテーマでも同じでいけるかも。
分かる方はクラスの定義を確認してみてください。

最終的にはこれくらいになりました。
※赤文字が変更後です。

マナブさんやツヅキさんくらいのスペース幅は設けていませんが、横幅のサイズ感との兼ね合いから、これくらいにしておきます。

レスポンシブ対応もお忘れなく！

現代のWebサイトにおいて、レスポンシブ対応は必須要件です。

みなさん、スマホからのフォントサイズは16pxにされていました。

PCは気持ち大きめ。スマホは気持ち小さめが良いようですね。

実は、さきほどのコードの4行目 @media ～の記述がスマホで見た時のフォントサイズの調整になります。

一緒に実装しておきましょう。

【ブログデザイン】有名ブロガーの余白を調査【共通点あり】まとめ

いかがでしょうか。

ぜひ有名ブロガーさんの余白の取り方を参考に、あなたのサイトも調整してみてください。

本記事を読んで、余白を調整したいんだけどやり方がよく分からなかったと言う方は、Twiiterにてご連絡ください。

できる限り協力させて頂きます。

WordPressテーマ「スワロー」の紹介

僕の愛用中のテーマ「スワロー」は、駆け出しブロガーの方におすすめのテーマ。

初期設定がほとんど不要で、書くことに集中できます。

僕のブログでもカスタマイズ方法を紹介していますので、参考にしてもらえたら嬉しいですね。

＼当ブログで使用中のテーマ／

WordPressテーマ「スワロー」公式サイトはこちら

• 記事タイトル下のSNSボタン表示を削除したい
• ワードプレステーマはスワローを使っている

【朗報】SNSシェアボタン削除できました♪

左がビフォー
右がアフター
です。

もちろんフッターには残っています。

最後にトラップがあったので、
せっかくなので記事化しようかな😊#ブログ初心者 pic.twitter.com/yhJxjPQ0Nf

— コアラ🐨時間術ブロガー (@KoaraCom) February 14, 2020

WordPressテーマ・スワローは、デフォルトで各SNSボタンが表示されるようになっています。

ところが普通、記事を読む前にシェアはしませんよね・・・

本記事では、記事タイトル下の表示を削除したい方のためにその手順を説明します。

さっそく解説していきます。

ワードプレス・スワローカスタマイズ 投稿タイトル下のSNSボタンを削除

こちらがカスタマイズ手順です。

1. Xserverのインフォパネルにログイン
2. ファイルマネージャーを開く
3. 親テーマからsingle.phpをダウンロード
4. 子テーマにアップロード
5. SNSシェアボタン削除
6. 【注意！】キャッシュを削除すること

順に解説します。
とっても簡単なので安心してくださいね。

Xserverのファイルマネージャーにアクセス

Xserverのファイルマネージャーにアクセスします。

ログインしてファイルマネージャーを開く

ユーザーIDとパスワードを入力。

ログインして、ファイルマネージャーを開きます。

親テーマからsingle.phpをダウンロード

サーバー内のファイルが見れるようになりましたか？

次に親テーマを管理しているフォルダにアクセスしてください。

▼このあたりのURLにあると思います。

すると、single.phpがあると思いますので、ファイル名をクリックしてダウンロードします。

子テーマにアップロード

子テーマに先ほどダウンロードしたsingle.phpをアップロードしましょう。

▼子テーマの管理フォルダはこのあたりのURLにあると思います。

SNSシェアボタン削除

ワードプレスにアクセスし、[外観]→[テーマエディター]を開きます。

single.phpが選択できるようになっているので、それを選択します。

以下が記事タイトル下のSNSを表示するコード箇所になります。
※headerの閉じタグの直下にあるかと。

この3行を削除するか、コメントアウトしてください。

ここでSNSボタンが非表示になる方もいますが、僕の場合はもうひと手順必要でした。

【注意！】キャッシュを削除すること

僕はブログ速度改善の目的から、キャッシュ系プラグイン「WP Fastest Cache」を導入しています。

これにより、ワードプレス側にキャッシュが残っていると、デザインの変更が反映されないようです。

ワードプレス管理画面の上部にある、Clear All Cacheを押して変更を反映しました。

はい、これで記事タイトル下のSNSボタンは非表示となります。
フッターには表示されたままのはずです。

以上、記事タイトル下にSNSボタンは不要とお考えの方は、参考にしてみてください。

Twitter（@KoaraCom）でも情報発信しております。
お気軽にフォローまたは感想をツイートください^^