対馬 俊彦
フォーラムへの返信
-
投稿
-
石川 様、
いつも勉強させていただき、ありがとうございます。
上記の手順通りにやってみたところ、ループ部分を非表示にできましたが、
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 の中から列数を選ぶことができます。
添付画像をご覧ください。横からすみません。
ココチーノデータの数値を強調するために、以下のスタイルを追加して、
2列のままで大きく見せるやり方も選択肢になるかと思います。.wp-block-gallery.columns-5 .blocks-gallery-item { flex-grow: 0; }添付画像のようになります。
ご参考まで。
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 のブラウザで確認しました。どうもありがとうございました。
すでに 解決済 になっていますが、参考になると思いますので書かせていただきます。
リストブロックのフォントサイズを変更する方法として、
[高度な設定] の [追加 CSS クラス] に h5 と入力すると
フォントサイズが少し大きくなります。添付画像をご参照ください。
ここに h1 と入力するとフォントサイズがかなり大きくなります。
h5 ⇒ h4 ⇒ h3 ⇒ h2 ⇒ h1 とだんだんフォントサイズが大きくなっていきます。
small と入力するとフォントサイズが小さくなります。
フォントサイズをおおざっぱに変更するだけでよいのであれば、このようなやり方もあります。
～～～以下、補足情報です。～～～
Lightning には Bootstrap 4 というしくみが組み込まれていて、
上記の h5 や small は Bootstrap 4 のクラス名です。「Bootstrap 4 クラス」でググるとたくさんのクラス名が見つかりますので、
眺めていると役に立つのがあるかもしれません。私がよく使う、おすすめのクラス名は mb-0 です。
段落のフォントサイズを大きくすると、段落間が空き過ぎることがあります。
そのようなときに mb-0 を使うと次のブロックとの隙間を小さくすることができます。
mb-0 は CSS の margin-bottom: 0; の指定に相当します。
今回の現象の原因が書かれている情報を見つけました。
https://www.itmedia.co.jp/news/articles/2101/07/news092.html
今後数カ月かけてすべての Facebook ページからいいねボタンが削除されるとのことです。
FBの管理画面に最近’新しいページにようこそ！’とか’ニュースフィールド’とか
見慣れない表示がされています。komori0321 さんの Facebook ページは運悪く(?)今回変更が実施された一部に該当するのでしょう。
Facebook は大小さまざまの仕様変更が明確なアナウンスなしに行われて、戸惑うことがあります。
今回の komori0321 さんの質問の現象はおそらくこれが原因でしょう。
Facebook 自身が提供しているプラグインで Facebook ページが表示できないなんて、
「かんべんしてよ！！」って言いたくなりますね。
