対馬 俊彦
フォーラムへの返信
-
投稿
-
＠takesho さん
表示されている VK 子ページのリスト を見ると、
トップページを最上位の親として、そこから固定ページが子～孫の壮大な階層関係になっています。たぶん、フッターにメニューを表示するためにそのようにしたんですね。
こちらの方法で出来ました。
だとすると、施設案内 以外は親ページ・子ページの設定を
しなくてもいいですしないほうがいいです。【理由】URL に不要な /toppage/ が付与されてしまう。
@DRILL LANCER さん
いつもお世話になっています。私は、sa-koi さんのプロフィールからサイトを見て推測しました。
URL やスクリーンショットがあった方が回答しやすいですので、
このフォーラムの「投稿の仕方」を以下のようにしていただくのがいいかもしれません。該当URLの入力、スクリーンショットなどの画像の添付も可能です。
↓
可能であれば、該当URLの入力、スクリーンショットなどの画像の添付をしていただいた方が的確な回答を得られやすいです。VK 子ページのリスト ウィジェットは固定ページのみが対象になっていますので、投稿ページには表示できません。
固定ページでも親ページ・子ページの関係が存在しない場合はこのウィジェットは表示されません。
サイトを拝見したところ、おそらく フッターウィジェットエリア1 にサイトのメニューを表示したいのではないかと推測します。
そうであれば、表示したいメニューを作って ナビゲーションメニュー ウィジェットを使えばやりたいことができます。
【追記】
すみません、回答しようと思って画面を開いてから時間が経ってしまい、
DRILL LANCER さんの回答に気付かずに同じような回答をダブって投稿してしまいました。ぱっと見は、カスタム投稿タイプ ではなくふつうの投稿みたいに見えますので、私はカスタム投稿タイプでない前提で回答します。
もしかしたら、サイドバー(投稿) のウィジェットに カテゴリー が入っていないことが原因かもしれません。
添付画像をご覧ください。
例えば、趣味でペットや風景などの写真を撮っているブログだと、
1カテゴリーで数百件の投稿はあり得ると思います。具体的なカテゴリー名がわかればなにか別のアドバイスができるかもしれませんね。
具体的な例があった方がわかりやすいので、
ベクトルさんの製品更新情報で説明します。Lightning Pro の更新情報：https://www.vektor-inc.co.jp/product_id/lightning-pro/
VK Blocks の更新情報：https://www.vektor-inc.co.jp/product_id/vk-blocks/Lightning Pro と VK Blocks の更新情報：https://www.vektor-inc.co.jp/product_id/lightning-pro,vk-blocks/
上記の lightning-pro,vk-blocks のように、
カテゴリーのスラッグをカンマで区切って複数指定すればいいみたいです。「いいみたいです」と書いたのは…
このやり方を以前にたまたま発見したのですが、
「WordPress アーカイブページ 複数 カテゴリー」でググっても
PHP でカスタマイズする方法ばかりで、
このやり方を紹介しているサイトが見当たりませんので、
もしかしたら正式な使い方ではないのかもしれません。(邪道？裏技？)このやり方の欠点としては、
Lightning Pro と VK Blocks の更新情報の一覧なのに、
タイトルに Lightning Pro (複数指定の先頭) とだけ表示されます。■その他のやり方 1. 親カテゴリーを作る
表示したいカテゴリに共通の親カテゴリーを作って、
親カテゴリーのアーカイブページを使うとすっきりするかもしれません。■その他のやり方 2. VK Blocks Pro の投稿リスト
ご希望と違うかもしれませんが、
VK Blocks Pro の投稿リストで先頭の10件を表示して、
その下にそれぞれのカテゴリーのアーカイブページへのリンクを置く方法も考えられます。■その他のやり方 3. PHP でカスタマイズ
難易度が高すぎて、私では説明できません。大きさの調整は必要ですが設置できました。
あともう少しですね。
知識が乏しいとこのあたり解決することは難しいでしょうか？
いくつか方法があると思いますが、
今回のご質問の流れの中でいちばん楽そうな方法としては、
固定ページ本文ウィジェット を モバイルナビ上部 に配置すればOKです。標準装備としてないか探しております。
私が知っている範囲では、
ご質問のことをかんたんに実現できる機能はベクトル製品には含まれていません。もしそのような機能があれば、
すでにベクトルのスタッフどなたかが回答されていると思います。CSS でカスタマイズするか、なんらかのプラグインを利用する必要があります。
■ はじめに
おそらく、ご質問者の期待通りの方法を回答させていただくには、
かなり多くのことを書く必要があります。
(それだけ多くの作業量が発生するということです)
そんなに書けませんので、手短で済むことだけ書きます。■ デザインスキンについて
ヘッダー上部のお問い合わせボタンを残すことを前提にすると、
Fort / Pale ではなく Variety の方がよさそうです。■ ボタンにこだわらないなら…
ボタンでなくテキストリンクでよいのであれば、メニューを新規作成して、
メニューの位置を Header Top Navigation にすればよいです。■ スマホへの対応
ヘッダーのこの部分はスマホでは表示されないので、
スマホでの閲覧を考慮するのであれば、
スマホ用のボタンまたはメニュー項目を別途設置する必要があります。■ このフォーラムも参考にすれば…
このフォーラムは Lightning Pro で制作した会員向けサイトですので、
このフォーラムのメニュー構成も参考にされるとよいと思います。症状が把握できないので、責任が持てませんが、
以前にエラーが頻発していた WordPress サイトがあり、
パーマリンク設定画面で [変更を保存] を実行したらエラーが解消したことがあります。これで解決すればいいのですが…
解決したらサイトのバックアップをとっておきましょう。
たびたび、すみません。
グリッドカラムブロックに直接クラスを指定して以下の CSS を記述すればいいですね。
.wp-block-vk-blocks-grid-column.***** .row { justify-content: center; }***** はグリッドカラムブロックに指定したクラス
すみません、いま見返して気がついたのですが、
junon さんが回答されていることとダブったことを書いていました。私は安直なやり方を書きましたが、
junon さんの回答のようにクラス指定した方がよいです。「wp-block-vk-blocks-grid-column のあとの row に
justify-content-center というクラスを入れる」と同じことを以下の CSS でできると思います。
.wp-block-vk-blocks-grid-column .row { justify-content: center; }ご期待に沿った回答でないかもしれませんが…
ご質問の箇所に表示したい文言を「問い合わせ」ページの編集画面で
抜粋欄に入力しておけばよいです。添付画像をご覧ください。抜粋欄になにも入力されていないときは
コンテンツの先頭部分がこの箇所に表示されるしくみになっています。ちなみに…
抜粋欄に入力した文言は以下の場所にも表示されます。
・ページをシェアした先の Facebook や Twitter などの画面
・Google の検索結果の画面「続きを見てみたい」と思わせるような文言を抜粋欄に入れておくと
成果につながるかもしれません。スライドが1枚だけのサイトであればスライドショーは不要なので
と書きましたが、スライドショーが必要なケースの方が多いと思いますので、
スライドショーを使ったトップページで Cumulative Layout Shift (CLS) スコアを
改善できるかどうかやってみました。■■■ 結論 ■■■
CLS スコアを大幅に改善することができました。
■■■ CLS スコアが悪くなる理由 ■■■
トップページが表示され始めたときにはスライドショーがまだ表示されていなくて、
その後にスライドショーが割り込んで表示されるような動きをするために、
最初に表示されたコンテンツが下方向にシフトしてしまう (Layout Shift が発生する)。添付画像をご覧ください。
■■■ Layout Shift が発生しないための対策 ■■■
img 要素の height 指定と同じように、
CSS でスライドショーの高さを指定(確保)すればよい。■■■ 具体的な対策手順 ■■■
スライドショーの高さは画面幅に応じて変動しますので、
固定数値による指定はできません。そこで、トップページの [カスタム CSS] に以下の行を追加しました。
@media (min-width: 768px) { .carousel { height: calc( ( 100vw - 20px ) * ( 600 / 1900 ) + 1px ); } } @media (max-width: 767px) { .carousel { height: calc( 100vw * ( 500 / 1000 ) + 1px ); } }- パソコン用の
20pxはスクロールバーの幅です。
ブラウザーによってこの幅は違いますので、余裕を持って 20px にしました。
このためスライドの下がわずかに欠けることがありますが、誰もそのことに気がつかないと思います。 600 / 1900はパソコン用のスライド画像のピクセルサイズです。
500 / 1000はモバイル用のスライド画像のピクセルサイズです。- 最後の
+ 1pxは border-bottom の分です。
■■■ 改善された CLS スコア ■■■
検証用サイト https://lightning-fort.hp1.work/ で上記の対策を行った結果、
CLS スコアを以下のように大幅に改善できました。【モバイル】0.367 ⇒ 0.026
【パソコン】0.255 ⇒ 0.054 - パソコン用の
