[対馬 俊彦]

グリッドカラムは、こういう使い方であっているのか？

あっていると思います。私もグリッドカラムをこのように使っています。

画面幅ごとにカラム数を指定できるので便利ですよね。とてもありがたいブロックです。

コアに入っているブロックで、同じようなことができるものがあるのか？

画像を並べることに限定すれば、WordPress のギャラリーブロックを使うこともあります。

添付画像をご覧ください。

3カラムで5枚の画像を表示すると、3で割り切れない部分が大きく表示されますが、
以下の CSS で大きさを揃えています。

.wp-block-gallery .blocks-gallery-item { flex-grow:0; }

割り切れない部分が大きく表示されることを利用して、
以下の CSS で大きい画像を最初に配置して見せたりもします。
新着作品の画像一覧で、あとから(最後に)追加したものが先頭に大きく表示されるという使い方です。

.blocks-gallery-grid { flex-flow: row wrap-reverse; }

• この返信は4年、 1ヶ月前に対馬 俊彦が編集しました。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

固定ページに同じ検索ボックスを配置すれば意図したレイアウトは可能

なるほど、そうですね。
いろいろと使い道がありそうなので、どのように使えるか考えてみるのも楽しいです。

[対馬 俊彦]

石川 様、

いつも勉強させていただき、ありがとうございます。

上記の手順通りにやってみたところ、ループ部分を非表示にできましたが、
VK Filter Search の検索結果も出力されなくなってしまいました。
もしかしたら、私のやり方が悪いのかもしれませんが…。

[対馬 俊彦]

よく読んだら、

ループを非表示にする事が出来たら解決

ということなんですね。それであれば…

「VK固定ページ本文」で表示させたものだけ残して、
アーカイブページのループを非表示にする方法として、
追加 CSS に以下の行を入力するやり方があります。

.post-type-archive-***** .vk_posts-postType-***** {
display:none;
}

***** は投稿タイプIDです。

とりあえずこれで該当カスタム投稿タイプのアーカイブページでループが非表示になります。

ただし、これをやると VK Filter Search プラグインの検索結果も非表示になります。
このプラグインをお使いでなければ問題ないですが。

[対馬 俊彦]

この状態で「イベント」をクリックした際に表示される一覧ページを、カテゴリ分けして一覧にしたいと考えています。

となると、親テーマの .php ファイルを子テーマにコピーしてカスタマイズする必要がありそうです。

そうなると私には荷が重いので、すみませんが他の方の回答をお待ちください。

[対馬 俊彦]

アーカイブページのカスタマイズは大変そうなので、
VK Blocks Pro の投稿リストを使って手間をかけずに作る方法を書きます。

任意の固定ページに以下の2つの投稿リストを配置すればご希望のものができると思います。

【投稿リスト-1】
投稿タイプ：イベント
分類:コンサート

【投稿リスト-2】
投稿タイプ：イベント
分類:グルメ

投稿リストはページ送りがないので、イベントの数が多くなるとすべてを表示できなくなりますが、
アーカイブページへのリンクをそれぞれの下に置けばよいです。

[対馬 俊彦]

もう一つデータを増やして６個にした場合、
３つ×２段のCSSも教えていただくことは可能でしょうか？

メディアクエリを使って、WordPress ギャラリーの CSS を置き換える記述を追加する必要があり、手間がかかります。

6個であれば、VK Blocks Pro のグリッドカラムを使うとよいです。
CSS を書かなくても、画面サイズごとに 1,2,3,4,6 の中から列数を選ぶことができます。
添付画像をご覧ください。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

横からすみません。

ココチーノデータの数値を強調するために、以下のスタイルを追加して、
2列のままで大きく見せるやり方も選択肢になるかと思います。

.wp-block-gallery.columns-5 .blocks-gallery-item {
    flex-grow: 0;
}

添付画像のようになります。

ご参考まで。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

JavaScript でやってみました。以下のようにすると実現できます。

※バナー画像にクラス menu-btn を割り当てる。

※WordPress によりグローバルメニューの [設定ガイド] に割り当てられた ID が menu-item-*** になっている。

*** は実際のサイトで確認してください。

【JavaScript】

$(".menu-btn").hover(function(){
  $("li#menu-item-***").addClass("sub-menu-open");
}, function(){
  $("li#menu-item-***").removeClass("sub-menu-open");
});

【CSS】

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
opacity: 1;
max-height: 1000px;
}

.device-pc .gMenu>li.sub-menu-open::after {
opacity: 1;
bottom: 0;
}

.device-pc .gMenu>li.sub-menu-open>ul.sub-menu {
transition: all 1.0s;
}

バナー画像にマウスを合わせた後、サブメニューの項目をクリックしやすいように、transition の数値を 1.0s に増やしてあります。

【このやり方で作ったページ】

本文のバナーをクリックしたらサブメニューを開く

実用になるかどうか微妙なところです。

[対馬 俊彦]

すみません、昨日 11:05 AM のコメントを訂正(撤回)します。

参考ページ：https://techacademy.jp/magazine/19418

このやり方は2つの要素が隣接する場合しか役に立たないので、
今回のHANAさんの質問の回答としては不適切でした。

[対馬 俊彦]

サブメニューが表示されるけどクリックしようとするとメニューが消えちゃう

けっこう大きい問題ですね。
これは私が最初にコメントした CSS を使うやり方ではクリアできません。

[対馬 俊彦]

HANAさん、

ひとつ気になったので、コメントさせていただきます。

スマホでの閲覧は想定しなくてよいのでしょうか？

スマホではマウスオンの検出はできませんし、
タップを検出してもサブメニューを開くことには無理があります。

パソコン限定のサイトであればアリかもしれませんが・・・。

デザインを要望した方にこのことを伝えれば、理解を得られるかもしれません。

[対馬 俊彦]

横からすみません。

JavaScript を使えばできますが、CSS だけでもできそうです。

このページを参考にやってみてください。

参考ページ：https://techacademy.jp/magazine/19418

[対馬 俊彦]

拝見したところ、サイトは https:// になっていますが、
スライド画像が http:// で読み込まれています。

おそらく、最近SSL化をされたことが原因なのではないかと推測します。

カスタマイズ画面でスライドを設定し直せば解決すると思います。

[対馬 俊彦]

いつもお世話になっています。

Lightning Pro 8.5.5 にアップデートして、
トップページとトップページ以外でサイトのタイトルの見え方が同じになったことを
Windows 10 のブラウザで確認しました。

どうもありがとうございました。

[投稿者]

投稿