今日は、WordPressテーマ作成③ 記事に画像を追加する、についてアウトプットします。
こんにちは。Webコーダーのharuです。
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。2020.5.11~学習スタート2020.8.10~実務でコーディングしていますHTML/CSS(SCSS)/jQuery に加えWordPressの学習中です。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！
WordPressテーマ作成③ 記事に画像を追加する
ブロックエディタ上で、下記のブロックを使い画像を表示させます。
・画像ブロック
・ギャラリーブロック
＊前回までの記事はこちらです↓
①WordPressテーマの基礎となる「index.phpやその他のファイル」を作成し、テーマフォルダに入れる→記事はこちら
②WordPressのアルゴリズム→記事はこちら
③タイトルと本文を表示させる→記事はこちら
画像ブロック
画像ブロックを使うと、1つの画像を挿入することができます。
ブロックエディタの左上＋ボタン > 画像 >アップロードをおこないます。
画像が表示されました↓
画像ブロックを選択して、ツールバーより「上に移動」を選ぶと、ブロックの順番を変更できます。
上部に移動して、プレビューしてみます。
うまく表示されています。
ディベロッパーツールで詳細を見ると、srcsetとsizes属性が自動で入っています。
ギャラリーブロック
ギャラリーブロックを使うと、複数の画像を並べて表示することができます。
先ほどと同様に、左上の＋ > ギャラリーブロック > 画像のアップロードをおこないます。 
画像が並んで表示されました！
右のギャラリー設定を見ると、カラム２になっていることがわかります。その下の画像の切り抜きがONになっていることで、画像の高さも自動的に揃います。
ブロックエディターすごいな…(普段、旧エディタ派の私…)
プレビューして、ディベロッパーツールで詳細を見てみます。
↑画像は<figure>タグの中にリストタグで構成されています。
CSSは、ulに対してdisplay:flexが指定されています。勝手に指定してくれるので、これもノーコードなのですよね…！
画像の配置を変更する
ここでは、画像ブロックとギャラリーブロックの配置を変更して、それぞれの表示を確認してみます。
画像ブロックの場合
画像ブロックを選択 > 右寄せ を選択。
さらに、右メニューから画像サイズを「中」に変更します。
すると、画像の左側に、後続の文字が回り込みました。
ディベロッパーツールで確認すると、floatが指定されていることがわかります。
ギャラリーブロックの場合
画像ブロックと同様に、次は「左寄せ」を選択してみます。
表示は左寄りになりましたが、後続の文字は右側に回り込んできません。
ディベロッパーツールで詳細を確認してみます。
画像にはそれぞれwidthが指定されて、<figure>にdisplay:flexが指定されているのがわかります。
このように、画像ブロックとギャラリーブロックでは設定されているCSSが異なります。
画像のブロックに限らず、グーテンベルクでのCSSは設定が少し複雑なようです。この辺りはまた別途学習したいと思います。
あとがき
さらっとになってしまいましたが、キリがいいので今日は以上です！
★Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
★私が「実務プロジェクト」でお仕事をいただいているクライアントのあきらさん（@akira0727x)がYouTubeをはじめました！
Web制作で結果を出すためのノウハウを公開されています✨
