makotos1112

回答ありがとうございます。
グーグルサーチコンソールでCLS警告が発生しており、ご回答頂いた内容がまさに知りたいことでした。

その原因が上記のクラスの有無である影響があるか気になった次第で質問したのですが、“wp-image-xxxxx”がなくともwidth,heightはタグに記載がありますので、CLS警告に関するの根本の問題は、Lazyloadによってレイアウト全体がずれながら表示されること、である可能性について理解ができました。

質問が脱線してしまいますが、CLSの発生を回避する有効は方法はありますでしょうか？
思いついたのはimgが収まっているdivにheightを明記しておけばレイアウトのズレはなくなり、評価が改善につながるんでしょうか？

ありがとうございます、上記のコードを反映させた後、ショートコードの仕組みが理解できました。
これなら画像名から事前にマークアップできそうです。

Chromeなどの検証で表示されるDOMも最終的にこのようなショートコードが展開されて表示されるわけですね。色々と理解が深まりました。

最後に１つ、追加で質問させて頂きたいのですが、
同じギャラリーを作成するとして、
・投稿にショートコードを用いて表示させる場合と、
・ショートコードを用いずに純粋なマークアップだけで作成する場合
とで、ブラウザでの表示速度や、その他、違いが生じる部分はありますでしょうか？

回答ありがとうございます。質問が分かりづらく申し訳ありません。
おっしゃるように、確かに画像単体のURLであればファイル名称を元に、事前にマークアップしておくことはできます。
そうではなく、私がやりたいのはギャラリーを事前にマークアップしておく方法です。

もう少し具体的に状況をお話します。
フォルダにある aaa.jpg, bbb.jpg, ccc.jpg という３つの画像について、
・各画像単体で表示させる
・ギャラリーとして表示させる
の２つをやりたかったとします。

最初の単体で表示させる分にはご回答の通り、
アップロードする前から各画像のタグは分かりますので、
事前に３つの画像のマークアップは可能ですでに実現できています。

問題は２つ目のギャラリーとして表示させる場合で、
ギャラリーに使用される画像のIDは画像アップ後に割り振られる(と理解しています)ため、
例えば上の3つが順番に格納されたギャラリーを事前にマークアップしておきたくても、

[gallery link="file" columns="4" size="large" ids="???,???,???]

における???はアップしてから初めて分かるものなので、事前にマークアップを済ませておくことができません。

私の質問はご理解頂けましたでしょうか？
ギャラリーの仕様について私は上記の様に理解しています。
個人的な予想ですが、画像アップ後にidが割り当てられる以上、事前にマークアップを済ませておくことは
不可能ではないかな？と考えており、それを確かめるために質問させて頂いております。

もしも、事前にギャラリーのマークアップができる方法があれば
具体的なコードの例を示していただけると大変ありがたいです。

$(window).on(‘load’, function(){
 var content_area = window.document.getElementById(“content_area”);
var contentsNode = window.document.getElementById(‘appendclone’);
 var newNode = content_area.cloneNode(true);
newNode.id = “content_area2”;
contentsNode.appendChild(newNode);
});

ウェブページを参考に、$(window).on(‘load’, function(){ });
で処理を囲ってみました。結果、スマホでクローン先(appendclone)の画像が見えたり見えなかったりします。PCの結果は正常です。

まだ画像の出力が不安定なため、安定して出力できるようアドバイスをお願いします。

今度こそ自己解決できました。

#gallery-1 dl:nth-of-type(1) img {
border:5px solid #896541;
border-radius:5px;
}
#gallery-1 dl:nth-of-type(3) img{
border:5px solid red;
border-radius:2px;
}
/* borderの太さを高さと幅に含める */
.wp-block-gallery img {box-sizing: border-box;}

5枚目から１つずつ要素がずれてしまったのは、4カラムにしているせいで
<dl>・・・</dl>
<dl>・・・</dl>
<dl>・・・</dl>
<dl>・・・</dl>
<br style=”clear: both”> >>この要素をカウントしているからでした。

nth-child を nth-of-type に書き換える事で指定の要素のみをカウントできるようになり、
任意の画像にスタイルを付ける事が出来ました。

画像にのみボーダーを付ける事が出来ました。
上記の記述にimgを追記することでいけました。
回答頂き大変助かりました。

#gallery-1 dl:nth-child(1) img {
border:5px solid #896541;
border-radius:5px;
}
#gallery-1 dl:nth-child(3) img{
border:5px solid red;
border-radius:2px;
}
/* borderの太さを高さと幅に含める */
.wp-block-gallery img {box-sizing: border-box;}