なやみさんもう少し全体的に余白が欲しい！
簡単に設定できる方法はないかな？
このような悩みを解決します。
毎回スペーサーを入れたり、ブロック下の余白量をぽちぽちするのって面倒ですよね。
記事全体規模で考えるとかなりの量になってしまい、労力もかかってしまいます。
今回は追加CSSに超簡単なコードをコピペするだけで、記事全体の余白の調整ができるようになりますよ。
コードの知識がない初心者でも出来るので、是非参考にしてみてくださいね。
記事の余白を一括で設定する方法
記事全体の余白を設定する方法は、追加CSSに「簡単なコード」を追加するだけです。
追加するコードはこちら。
コピーしてね！
/* 投稿記事の余白 */
.post_content > * {
margin-bottom:4em;
}上記のコードを追加CSSに貼り付けると、以下の様になると思います。
追加CSSはWordPressの管理画面から「外観」→「カスタマイズ」をクリック。
一番下辺りに項目があります。
コピペができたら実際に投稿画面を見てみましょう。
余白量が増えているはず。
余白量を変更したい場合は、「4em」から好きな数値に変更してくださいね。
自分好みの余白が見つかったら、「公開」をクリックして完了です。
【2020.9.12追記】テーブルスクロールテキストに関しての追加コード
SWELLのアップデートで、テーブル（表）の上に「スクロールできます」と表示されるようになりました。
※スマホでスクロール可能な場合のみ。
上記のコードのみだと「すべての要素」に反映されるため、テキスト下の余白がにも影響し不自然になってしまいます。
ここを修正するために、以下のコードも追加しておくことをおすすめします。
追加でコピペ！
/* テーブルスクロールテキスト余白 */
.c-scrollHint {
margin-bottom:0px;
}コードを追加すると、以下のように正常に表示されるようになります。
個別に余白を設定する方法
ご存知の方も多いですが、一応。
SWELLはツールバーの中に余白設定を備えているので、簡単に数値を変更することが可能です。
例えば、0にしてみたり。
ここから特大の余白を空けてみたり。
お茶の子さいさい。
幅広く設定できるので、スペーサーブロックはほとんど必要ありません。
1箇所だけ余白を調整したい場合でも2クリックで設定可能です。
HISASHI書くことが楽しくなるテーマ「SWELL」！
＼ ココだよ ／
ブロック間の余白設定まとめ
以上、ブロック間の余白設定の方法について解説してきました。
- 余白を制するものはデザインを制する。
- デザインは余白が命。
- けっきょく、よはく。
サイトの見やすさは、余白が大きく関わってきますね。
ぜひ最適な余白を探してみてください。
以上、余白の設定方法でした。
コメント