ブログ名考案中(ぶろぐみは仮名です)

【SWELL】記事全体の余白を一括で設定する方法!初心者でも出来る!

なやみさんのアイコン画像なやみさん

もう少し全体的に余白が欲しい!
簡単に設定できる方法はないかな?

このような悩みを解決します。

ブロックの余白を広げるために毎回スペーサーを入れたり、ブロック下の余白量をぽちぽちしていませんか?

記事全体規模で考えるとかなりの量になってしまい、労力もかかってしまいます。

今回は追加CSSに超簡単なコードをコピペするだけで、記事全体の余白の調整ができるようになりますよ。

コードの知識がない初心者でも出来るので、是非参考にしてみてくださいね。

HISASHIのアイコン画像HISASHI

僕も初心者だけど簡単にできたよ!

目次

記事全体の余白を一括で設定する方法

記事全体の余白を設定する方法は、追加CSSに「簡単なコード」を追加するだけです。

追加するコードはこちら。

コピーしてね!

/* ブロック間余白 */
.post_content > * {
margin-bottom:4em;
}

上記のコードを追加CSSに貼り付けると、以下の様になると思います。

追加CSSはどこにある?

追加CSSはWordPressの管理画面から「外観」→「カスタマイズ」をクリック。

一番下辺りに項目があります。

実際に投稿画面を見ると、余白量が変わっているかと思います。

余白量を変更したい場合は、「4em」から好きな数値に変更してくださいね。

SWELLのデフォルト設定は「2em」です。

HISASHIのアイコン画像HISASHI

投稿画面を見ながら調整してね!

自分好みの余白が見つかったら、「公開」をクリックして完了です。

【2020.9.12追記】テーブルスクロールテキストに関しての追加コード

SWELLのアップデートで、テーブル(表)スクロール可能な場合「スクロールできます」と表示されるようになりました。

上記のコードのみだと、記事全体の要素に反映されるため、スクロールテキスト下の余白にも影響してしまいます。

SWELL 余白設定
上記コードのみの場合

ここを修正するために、以下のコードも追加しておくことをおすすめします。

追加でコピペ!

/* テーブルスクロールテキスト余白 */
.c-scrollHint {
	margin-bottom:0px;
}
SWELL 余白設定
コード追加後

段落だけに余白の設定をする場合

段落ブロックだけに余白を設定したい場合は、最初のコード2行目にある「*(アスタリスク)」を「p」に変更するだけ。

豆知識
  • 全ての要素が対象→「*」
  • 段落要素が対象→「p」

このままコピペでOK

/* ブロック間余白 */
.post_content > p {
margin-bottom:4em;
}

段落のブロックにだけ余白を増やしているので、全体の見え方が変わってきます。

好きな方で指定してみてください。

段落(p要素)のみ場合は、追記「テーブルスクロールテキストの追加コード」は必要ありません。

個別に余白を設定する方法

ご存知の方も多いですが、一応。

SWELLはツールバーの中に余白設定を備えているので、簡単に数値を変更することが可能です。

例えば0にしてみたり。

特大の余白を空けてみたり。

お茶の子さいさい。

幅広く設定できるので、スペーサーブロックはほとんど必要ありません

1箇所だけ余白を調整したい場合でも2クリックで設定可能です。

HISASHIのアイコン画像HISASHI

書くことが楽しくなるテーマ「SWELL」!

\ ココだよ /

ブロック間の余白設定まとめ

以上、ブロック間の余白設定の方法について解説してきました。

  • 余白を制するものはデザインを制する。
  • デザインは余白が命。
  • けっきょく、よはく。

デザインやサイトの見やすさは、余白が大きく関わってきます。

自分自身、まだまだ最適な余白を手探り中の身ですが、この記事が少しでもお役に立てたなら嬉しいです。

以上、余白設定の方法でした。

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる