【word press】画像とテキストを並列させたい

【word press】で添付画像のような配置にできないかと考えております。

ページビルダーを使用する以外に、CSSで記述する方法はありますでしょうか？

画像とテキストの最下部は揃えて表示したいです。

とりあえず、スマホ表示は考えずにpc画面上でこのようなレイアウトをイメージしています。

多少複雑な方法でもチャレンジしてみたいと考えております、どなたか知恵をお貸しください。
どうぞ宜しくお願い致します。

kei344

2018/08/27 04:25

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

amakawa

2018/08/28 03:45

ご指示をありがとうございます。以後、気を付けて投稿させていただきますm(__)m

行動規範の内容に同意します

回答2件

Flexbox を使えば簡単にできますので、ご自分で調べてチャレンジしてみると良いと思います。

投稿2018/08/27 11:15

yhg

総合スコア2161

amakawa

2018/08/28 03:41

ご回答ありがとうございます。 Flexboxについて調べ、チャレンジしてみます！ありがとうございましたm(__)m

行動規範の内容に同意します

ベストアンサー

こんな風に表示したいということですよね？

一番簡単なのはテーブル要素を使う方法です。

１．投稿などの本文に以下のコードを張り付けて文章などを修正します

<table class="centertext">
<tr>
	<td class="tdside">左側画像の挿入（メディアを追加から）</td>
	<td class="tdtext">
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
</td>
	<td class="tdside">右側画像の挿入（メディアを追加から）</td>
</tr>
</table>

２．テーマのCSSに次のコードを追記します

table.centertext {
    width: 100%;
}

td.tdside {
    width: 20%;
    vertical-align: bottom;
    text-align: center;
    border: none;
}

td.tdtext {
	vertical-align: top;
    text-align: center;
    border: none;
}

・テーブル全体の幅を横幅一杯に指定
・テーブル内の左右の部分は幅を指定して縦方向の位置を下に配置するように指定
・テーブル内の中央部分は横方向を中央に、縦方向を上に配置するように指定

して表示させています。テーブル要素やCSSについての詳細、調整方法は自身で調べてくださいね。

投稿2018/08/27 22:13