対馬 俊彦
フォーラムへの返信
-
投稿
-
■ はじめに
おそらく、ご質問者の期待通りの方法を回答させていただくには、
かなり多くのことを書く必要があります。
(それだけ多くの作業量が発生するということです)
そんなに書けませんので、手短で済むことだけ書きます。■ デザインスキンについて
ヘッダー上部のお問い合わせボタンを残すことを前提にすると、
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; }スライドが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 にアップデートしたら、日本語表記に戻りました。
モバイル用のヘッダーロゴ画像
と書きましたが、
できましたら 1199px ⇔ 1200px のブレークポイントで切り替わるのがありがたいです。おそらく、今は需要が少なく
需要が少ないと私も思うのですが、
今でも官公庁や地方自治体のサイトは 大・中・小 ボタンが標準機能みたいになっていますよね。私は仕事でいろいろな方々にパソコンのサポートを行っていますが、
小さい字が見づらい方は常時ブラウザを拡大表示して見ていますので、
大・中・小 ボタンを使っているとは思えません。 - パソコン用の
