対馬 俊彦
フォーラムへの返信
-
投稿
-
具体的な例があった方がわかりやすいので、
ベクトルさんの製品更新情報で説明します。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.054Lightning ページヘッダー設定で [背景に被せる色] を白に指定しているためと思われます。
添付画像をご参照いただき、この設定をクリアしてみてください。VK Blocks Pro 1.0.11 で改行されるようになったことを確認いたしました。
どうもありがとうございました。私は画面右上で確認しています。添付画像をご覧ください。
この部分が表示されていないようでしたら、右上の設定ボタンをクリックすれば表示されます。
横からすみません。
私の作業用サイトで検証してみたところ、
CLS スコアの数値を上げている主な原因はスライドショーであることがわかりました。
(すでにお気づきだったかもしれませんが…)スライドが1枚だけのサイトであればスライドショーは不要なので、
スライドショーを Outer ブロックに置き換えてスコア測定してみたところ、
以下のような劇的な改善を図ることができました。サイト1. https://lightning-fort.hp1.work/
Lightning 標準のスライドショーでスライドを1枚表示しています。
CLS スコア 0.274サイト2. https://lightning-variety.hp1.work/
Lightning 標準のスライドショーを非表示にして、Outer ブロックを配置してあります。
CLS スコア 0所信浩様のサイトもスライドが1枚だけなので、お試しいただくとよいと思います。
VK Blocks Pro 1.0.7 のあたりでそうなってしまったみたいです。
VK Blocks Pro 1.0.10 にアップデートしたら、日本語表記に戻りました。
- パソコン用の
