WordPressテーマ作成③ 記事に画像を追加する【day150】

Web制作

今日は、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属性が自動で入っています。

srcsetとsizes属性が自動で入るのは、index.phpでテンプレートタグ<?php  the_content(); ?> を設定しているからです。属性を入れない場合は、<?php echo get_the_content(); ?>を使用します。

ギャラリーブロック

ギャラリーブロックを使うと、複数の画像を並べて表示することができます。

先ほどと同様に、左上の+ > ギャラリーブロック > 画像のアップロードをおこないます。  

画像が並んで表示されました!

右のギャラリー設定を見ると、カラム2になっていることがわかります。その下の画像の切り抜きがONになっていることで、画像の高さも自動的に揃います。

ブロックエディターすごいな...(普段、旧エディタ派の私...)

プレビューして、ディベロッパーツールで詳細を見てみます。

↑画像は<figure>タグの中にリストタグで構成されています。

CSSは、ulに対してdisplay:flexが指定されています。勝手に指定してくれるので、これもノーコードなのですよね...!

画像の配置を変更する

ここでは、画像ブロックとギャラリーブロックの配置を変更して、それぞれの表示を確認してみます。

画像ブロックの場合

画像ブロックを選択 > 右寄せ を選択。

さらに、右メニューから画像サイズを「中」に変更します。

すると、画像の左側に、後続の文字が回り込みました。

ディベロッパーツールで確認すると、floatが指定されていることがわかります。

ギャラリーブロックの場合

画像ブロックと同様に、次は「左寄せ」を選択してみます。

表示は左寄りになりましたが、後続の文字は右側に回り込んできません。

ディベロッパーツールで詳細を確認してみます。

画像にはそれぞれwidthが指定されて、<figure>にdisplay:flexが指定されているのがわかります。

このように、画像ブロックとギャラリーブロックでは設定されているCSSが異なります。

画像のブロックに限らず、グーテンベルクでのCSSは設定が少し複雑なようです。この辺りはまた別途学習したいと思います。

あとがき

さらっとになってしまいましたが、キリがいいので今日は以上です!

 

★Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

 

★私が「実務プロジェクト」でお仕事をいただいているクライアントのあきらさん(@akira0727x)がYouTubeをはじめました!

Web制作で結果を出すためのノウハウを公開されています✨

タイトルとURLをコピーしました