記事の画像を横に並べる方法

次は、記事の画像を横に並べる方法をします。

記事の画像を横に並べる方法

まず、はじめに下記の画像をダウンロードしてください。
↓
サンプル画像２ダウンロード

左下の「DOWNLOAD」を押します。

「OK」を押します。

「サンプル画像２」をダウンロードしました。

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「記事の画像を横に並べる方法」と入力します。

右側の「テキスト」を押します。

下記コードを「テキスト」にコピーして、貼り付けます。

<table style="border-style: none;" width"100%">
<tr>
<td style="border-style: none;" align="center" width="50%">
画像１
</td>
<td style="border-style: none;" align="center" width="50%">
画像２
</td>
</tr>
</table>

貼り付けました。

次は、「画像１」の文字を消します。

左上の「メディア追加」を押します。

左上の「メディアライブラリ」を押します。

①「サンプル画像１」を選択します。

②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。

③右下の「投稿に挿入」を押します。

画像が挿入されました。

次は、「画像２」の文字を消します。

左上の「メディアを追加」を押します。

左上の「ファイルをアップロード」を押します。

真ん中の「ファイルを選択」を押します。

先ほど、ダウンロードした「サンプル画像２」を選択します。

「開く」を押します。

①「サンプル画像２」を選択します。

②「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」を選択します。

③右下の「投稿に挿入」を押します。

画像が挿入されました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「サンプル画像１」と「サンプル画像２」が横並びに表示されていることを確認します。

画像を横に２つならべるコード

<table style="border-style: none;" width"100%">
<tr>
<td style="border-style: none;" align="center" width="50%">
画像１
</td>
<td style="border-style: none;" align="center" width="50%">
画像２
</td>
</tr>
</table>

記事をプレビュー表示したとき

画像を横に３つならべるコード

<table style="border-style: none;" width"100%">
<tr>
<td style="border-style: none;" align="center" width="33.3%">
画像１
</td>
<td style="border-style: none;" align="center" width="33.3%">
画像２
</td>
<td style="border-style: none;" align="center" width="33.3%">
画像３
</td>
</tr>
</table>

記事をプレビュー表示したとき

画像を横に４つならべるコード

<table style="border-style: none;" width"100%">
<tr>
<td style="border-style: none;" align="center" width="25%">
画像１
</td>
<td style="border-style: none;" align="center" width="25%">
画像２
</td>
<td style="border-style: none;" align="center" width="25%">
画像３
</td>
<td style="border-style: none;" align="center" width="25%">
画像４
</td>
</tr>
</table>

記事をプレビュー表示したとき