n番目の要素を指定する :nth-child() を使う方法があります。
例えばこんな感じの記述になります。
.wp-block-gallery li:nth-child(1) img {
border:1px solid #111;
border-radius:5px;
}
.wp-block-gallery li:nth-child(2) img {
border:2px solid #333;
border-radius:10px;
}
.wp-block-gallery li:nth-child(3) img {
border:3px solid #555;
border-radius:15px;
}
.wp-block-gallery li:nth-child(4) img {
border:4px solid #777;
border-radius:20px;
}
/* borderの太さを高さと幅に含める */
.wp-block-gallery img {box-sizing: border-box;}
回答ありがとうございます。
しかしながら、投稿ページのカスタムCSSフィールドに貼り付けてみても、style.cssに貼り付けてみてもギャラリーの画像には反映されていません。
使い方は合っていますでしょうか？フォロー頂ければ幸いです。
ブラウザはgoogleを使用しています。
なお、下記の様にカスタムフィールドに記述したところ、理想の形ではありませんが、個別に指定できることは確認しました。デベロッパツールでギャラリのID名がgallery-1であったため、そこから下位の要素を指定できないかと試した結果です。しかしながら、画像だけでなくdlタグ全体にボーダーがついてしまいました。
#gallery-1 dl:nth-child(1) {
border:5px solid #896541;
border-radius:5px;
}
#gallery-1 dl:nth-child(3) {
border:5px solid red;
border-radius:2px;
}
/* borderの太さを高さと幅に含める */
.wp-block-gallery img {box-sizing: border-box;}
画像にのみボーダーを付ける事が出来ました。
上記の記述に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;}
上記のスタイルで解決したかと思いましたが、別の問題が発生しました。
指定した番号と違う画像に枠がついてしまいます。
ギャラリーの1から4番目には指定通り付きますが、5番目の画像には枠が付きません。
おそらくこれはカラム数に影響を受けているようです。
ギャラリーを作り直してみても、症状は同じで、スタイルの根本的な記述を改めないといけないような気がします。
どのように記述すればよいかアドバイスお願いいたします。
今度こそ自己解決できました。
#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 に書き換える事で指定の要素のみをカウントできるようになり、
任意の画像にスタイルを付ける事が出来ました。
