TwitterでWEB制作やWEBデザインについて発信しています。

【SWELL】記事の余白を一括で設定する方法!初心者でも簡単

WordPressのSWELL余白設定ブログアイキャッチ
なやみさん

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

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

毎回スペーサーを入れたり、ブロック下の余白量をぽちぽちするのって面倒ですよね。

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

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

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

目次

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

OLのベクター画像

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

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

コピーしてね!

/* 投稿記事の余白 */
.post_content > * {
	margin-bottom:4em;
}

/* テーブルスクロールテキストの余白をリセット */
.c-scrollHint {
	margin-bottom:0;
}

上記のコードを、追加CSSに貼り付けると反映されます。

追加CSSはどこにある?

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

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

WordPressのSWELLの余白設定
追加CSSの場所

コピペができたら実際に投稿画面を見てみましょう。

余白量が増えているはず。

WordPressのSWELLの余白設定

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

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

コードに関して少し解説

/* 投稿記事の余白 */
.post_content > * {
	margin-bottom:4em;
}

/* テーブルスクロールテキストの余白をリセット */
.c-scrollHint {
	margin-bottom:0;
}

投稿記事の余白

.post_contentは投稿記事のコンテンツ、>は直下、*は要素全体を指します。

それらをどうするか{}の中に反映させたいコードを入力します。


marginは余白、margin-bottomとすることで下の余白を指定することが出来ます。

つまり、投稿記事の要素の下側に4em(単位)を空けますよ!という意味です。

.から始まる文字列はクラス名といい、開発者が任意に命名したあだ名のようなものです。

テーブルスクロールテキストの余白をリセット

上記コードで要素全体の余白を上書きしたため、テーブルスクロールテキストにまで反映されてしまいました。

テーブルスクロールテキストは、スマホでテーブルがはみ出した場合に現れる案内テキストです。(横スクロール設定ありの場合)

これをリセットするためのコードになります。

WordPressのSWELLの余白設定
コード追加前
WordPressのSWELLの余白設定
コード追加後

コードの内容は.c-scrollHintの下の余白を0にします!
という意味です。簡単ですね!

HTML&CSSは少しだけでも覚えたら、カスタマイズの幅が広がって面白いですよ!
ぜひ挑戦してみてくださいね。

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

WordPressのSWELLの余白設定

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

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

1箇所だけ余白を調整したい場合でも2クリックで設定可能なので大変便利ですね…!

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

パソコンとコーヒーのベクター画像

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

余白の設定するだけで雰囲気が大きく変わるので、是非「最適な大きさ」を探してみてください。

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

ブログのカスタマイズでお困りではないですか?

CSSの設定やWordPressの設定、もっと好みにカスタマイズしたいと思ったら「Web制作のスクール」がおすすめです!

おすすめするのは業界最安値、SNSでも話題のデイトラ

私はWebデザインとWeb制作の2コースを受講して、現在フリーランスとして活動中。
どんなデザインも自由にカスタマイズできるようになりました。

その他にも動画作成、ドローン、Webマーケティングなどさまざまなコースがありサポートも充実。気になった方は是非アクセスしてみてください!

>>Web制作コースを見てみる
WordPressのSWELL余白設定ブログアイキャッチ

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

よかったらシェアしてね!

コメント

コメントする

目次