本日は「Wordpressの記事内の画像の上下の余白を一括で設定する方法」を紹介していきます。
今回紹介する以外にもやり方はあるかもしれませんが、簡単な方法ですので、CSSに詳しくない人でもすぐに実装することができると思います。
この記事をご覧くださったすべての人にとって有益な情報となりますように。
「追加CSS」コードを追加する
WordPressには「追加CSS」という機能があります。
CSSとはHTMLとセットで使用される“装飾”をつかさどるマークアップ言語です。
追加CSSは、管理画面の「外観」→「カスタマイズ」から編集することができます。
※お使いのテーマによって違うかもしれません。
img.alignnone{
margin: 20px 0 20px 0;
}このコードについて解説をしますと、
「img.alignnone」で記事内の「img」タグに限定して、
「margin」という”周囲の間隔も指定する”CSSで上下左右の間隔を指定しています。
数値を変更すれば余白の広さを変えられます！
このように間隔を指定したい要素の、上から時計回りを、コード上の左から指定します。
おまけに
当サイトでは記事内の背景を白に設定しているので、白背景の画像だと境目がわかりづらくなってしまいます。
ですので、画像の周囲に線をつけるCSSを追加して、下記のように使用しています。
img.alignnone{
border:solid 1px #ccc;
margin: 20px 0;
}下記のように「線の種類 太さ 色」を指定しています。
今回の内容ですと、「1本の実線を1pxで灰色」で指定しています！
