WordPressのギャラリーウィジェットは表示形式は指定カラム数で表示する点はどれも似通ったものですが、テーマによりスタイルの実装は多岐にわたります。デフォルトのギャラリーの他に、html5形式でのギャラリー
add_theme_support( 'html5', array( 'gallery' ) );
スタイルについても、デフォルトのギャラリースタイルはテーマによって書き換えられ、Raindropsテーマでも、floatによるレイアウト、inline-blockによるレイアウト、現在のflexboxによるレイアウトと、変遷を続けてきました。
更には、WordPress4.9ではギャラリーウィジェットが追加されたり、現在進行しつつあるgutenberg エディタ内での新しいタイプのギャラ―リーウィジェット等、変化は続いています。
WordPress4.9で実装されたギャラリーウィジェットは、従来型で9カラムまで設定することが可能ですが、ごく一般的な2カラムや3カラムのサイドバーに設置する場合、一般的には、300px前後のサイドバーに押し込まれるため、サムネールで、デフォルトの3カラムで設置した場合でも、100px以下に画像は縮小されます。
ギャラリー画像は、添付画像や、画像への直接リンクを貼る機能により大きな画像サイズで表示する事もできますが、選択肢としては「リンクなし」も存在します。
このリンクなしのギャラリー画像の表現をどのように行うかは、Raindropsテーマにとって課題の一つでした。
次期バージョンでの実装を目標にしているアイディアをメモに残します。
要点
ギャラリーのfigure要素は、tabindex="0" 属性を持っているので、focus 可能な状態にあります。
この点に着目して、クリックした場合にflexコンテンツのflex-basisを100%に変更、orderプロパティにマイナスの値を設定して、ギャラリーの最初に画像を表示します。
:focusは、リンクがある場合には、遅延の処理をしない限りリンク先に移動しますので、リンクのない場合だけスタイルを適用することが出来ます。
この拡大表示は、アクセシビリティ用の、タブ移動でも動作します。
CSS
.entry-content .gallery .gallery-item:focus{
height:auto;
width:100%;
flex-basis:100%;
outline:none;
background:rgba(222,222,222,.3);
order:-1;
margin:0 0 16px;
}
.entry-content .gallery .gallery-item:focus figcaption{
display:none;
}