WordPressの記事で個別に簡単HTML&CSSカスタマイズ！～その1：基本＆画像周りの余白編～

WordPressで記事を書いていると「ちょっとここだけ変更したい！」という時、結構ありますよね。

投稿画面のボタンでは思うように変えられない…

でもHTMLやCSSはよくわからない…

そんな非Webデザイナー＆コーダーの方のために、コピペでサクッと使える記事の個別カスタマイズ方法をご紹介します！

画像の周りに隙間を作りたい！そんな時のHTMLカスタマイズ方法

第1回目のお題はこちら！

載せた画像の周りにもうちょっと隙間が欲しいな…という時、結構ありますよね。

今回は、この画像の周りに個別で隙間をつける方法を実践しながら、HTMLをカスタマイズする基本操作も学習していきたいと思います。

HTMLの構造について

カスタマイズする前に、HTMLの構造について簡単に解説します。

WordPressの記事内に画像を追加すると、HTML上ではこのようなコードが記述されます。

<img src="https://aaa.jp/1.png" alt="" width="640" height="440" />

このコードは、画像に関する情報が入ったHTMLタグです。

それぞれの情報は半角スペースで区切られ、情報の種類=”情報の内容”という形で記載されています。

たとえば、src=""を使うと表示する画像を設定することができ、ダブルクオーテーション(“)で囲った中に使用したい画像のURLを入れるとその画像を表示することができます。

HTMLの構造について

<imgから/>までが1枚の画像についての情報を入れる枠
この中には、画像の種類やサイズなどの情報を入れることができる
情報は情報の種類=”情報の内容”という形で記載する
情報同士は半角スペースで隙間を開けて並べる

こちらを覚えていれば大丈夫です。

画像にデザインの設定(CSS)を追加する

画像にデザインの設定を追加したい場合も、情報の種類=”情報の内容”の形で追加が可能です。

この場合はstyle=""というコードを追加します。

先程の画像にコードを追加してみました。実際のコードで見るとこのようになります。

<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="~~~" />

これで画像にデザインの変更を加える準備が完了しました。簡単にまとめる以下このような形になります。

画像にデザインの設定(CSS)を追加する

追加したい要素の中にstyle=""を追加する
追加したコードの前後には必ず半角スペースを入れる

いよいよ本番！画像の上下左右に余白を作る

お待たせしました！

ここからいよいよ、画像の周りに余白を作る設定を入力していきます。

先ほど追加したstyle=""の中には、HTMLのデザインを制御するCSSというコードを入力することができます。

今回使用するのはmarginという種類のCSSです。

marginとは、指定した要素の上下左右にスキマを作るCSSのこと。

marginのサイズ指定はmargin:サイズ;という形で記載します。

サイズには、「px」や「%」などの単位が指定できます。

この形で記載すると、指定した要素の上下左右に余白を作ることができます。

実際にサンプルを用意してみました。

marginを指定した時の見え方サンプル

以下は、marginを指定していない2枚の画像です。

⇩

この画像2枚にmargin:20px;を指定すると…

上下左右に間隔ができたのがわかりますでしょうか？

この画像に記載したコードはこのようになっています。

<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin:20px;" />

画像の上下左右に余白を作る方法

要素内にstyle="margin:希望サイズ;"を追加
サイズは「px」や「%」などの単位で指定ができる

実際に投稿画面のテキスト画面でコードを触って試してみてください。

marginで上下左右の余白をバラバラに設定することも可能！

「左右に余白は欲しいけど上下にはいらない…」「画像の下にだけ余白をつけたい…」という時もありますよね。

このmarginは、書き方によって上下左右の余白をバラバラに設定することができるんです。

marginの個別設定は、上下と左右の2種類に分けて設定する書き方、上下左右それぞれに別の数値を入れて設定する書き方がよく使われます。

この場合、数字と数字の間には必ず半角スペースを入れるようにします。

ここで、上下左右の余白をバラバラに設定するやり方を以下3つのパターンに分けて紹介しますね。

左右のみ20pxの余白あり
上下のみ20pxの余白あり
画像の下にのみ20pxの余白あり

①左右のみ20pxの余白あり（画像2枚にmargin:0 20px;を指定）

画像の上には余白を作らず、画像の左右にだけ20pxの余白を作りたい場合はこのようになります。

margin:20px;のままだと、上下左右に20pxの余白がありますが…

⇩

HTML

<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin: 0 20px;" />
<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin: 0 20px;" />

画像それぞれにmargin:0 20px;を設定すると、上下の余白が0になりましたね！

②上下のみ20pxの余白あり（画像2枚にmargin:20px 0;を指定）

逆に、上下だけに20pxの余白を付ける場合はmargin:20px 0;と指定します。

HTML

<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin: 20px 0;" />
<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin: 20px 0;" />

③画像の下にのみ20pxの余白（画像2枚にmargin:0 0 20px 0;を指定）

画像の下にだけ20pxの余白を作りたい場合はmargin:0 0 20px 0;と記載します。

HTML

<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin: 0 0 20px 0;" />
<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin: 0 0 20px 0;" />

4つの数字が並ぶとどれがどの場所か混乱してしまいがちなのですが、上から始まって時計回りの順番に適用されると覚えてしまいましょう。

今度はわかりやすいように、2枚のうち左の画像だけ左に20pxの余白を設定してみました。

実際に書くコードはmargin:0 0 0 20px;です。

HTML

<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin: 0 0 0 20px;" />
<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin: 0 0 0 20px;" />

margin(余白)の個別設定について

marginは上下と左右、それぞれに別の数値を設定することが可能
更に上下左右バラバラの数値を設定することも可能
数字と数字の間は必ず半角スペースを入れる
数字の順番は上から時計回りに

慣れたらとても便利なので、頑張って覚えてみましょう。

一箇所だけ余白をつけたい時のもっと簡単な書き方

要素の下にだけ余白を作りたいのに、0がたくさんあってややこしい…

そんな時は、margin-topなどの個別指定用のCSSを使うことで簡単に書くことができます！

いまいち覚えづらい場合は、こちらの表からテキストをコピーして数値を入れ替えて使用してみてください。

名前	意味	記載例
margin-top	上に余白を作る	margin-top:20px;
margin-bottom	下に余白を作る	margin-bottom:20px;
margin-left	左に余白を作る	margin-left:20px;
margin-right	右に余白を作る	margin-right:20px;

2枚の画像の間に余白を作りたい場合は、この書き方を使うとシンプルに設定することができます。

なお、style=""内のCSSは2つ以上並べることも可能です。

その場合、CSS同士の間には半角スペースを入れるようにしてください。

右の画像だけにmargin-left:20px;を指定

HTML

<img src="https://aaa.jp/1.png" alt="" width="640" height="440" />
<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin-left: 20px;" />

左の画像だけにmargin-left: 20px; margin-right: 20px;を指定

HTML

<img src="https://aaa.jp/1.png" alt="" width="640" height="440" style="margin-left: 20px; margin-right: 20px;" />
<img src="https://aaa.jp/1.png" alt="" width="640" height="440" />

個別設定用のmarginの書き方