サポート » 使い方全般 » ギャラリー画像に個別にスタイルを付けたい

  • 解決済 makotos1112

    (@makotos1112)


    ギャラリーのスタイルについて質問です。

    [gallery link="file" columns="4" size="medium" ids="111,222,333,444"]

    こういうギャラリーがあったとして、111,222,333,444それぞれにcssでスタイルを付けるには
    どのように記述すればよいでしょうか?

    やりたい事は、それぞれの画像に異なる色のborderをサイズ指定してつけることです。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • 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;}
    • この返信は1ヶ月、 2週前にmoyo55が編集しました。
    スレッド開始 makotos1112

    (@makotos1112)

    回答ありがとうございます。

    しかしながら、投稿ページのカスタム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;}

    スレッド開始 makotos1112

    (@makotos1112)

    画像にのみボーダーを付ける事が出来ました。
    上記の記述に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;}

    スレッド開始 makotos1112

    (@makotos1112)

    上記のスタイルで解決したかと思いましたが、別の問題が発生しました。
    指定した番号と違う画像に枠がついてしまいます。

    ギャラリーの1から4番目には指定通り付きますが、5番目の画像には枠が付きません。
    おそらくこれはカラム数に影響を受けているようです。

    ギャラリーを作り直してみても、症状は同じで、スタイルの根本的な記述を改めないといけないような気がします。

    どのように記述すればよいかアドバイスお願いいたします。

    スレッド開始 makotos1112

    (@makotos1112)

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

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

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

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。