[うなこ]

ご報告ありがとうございます。解決できて安心しました。

非推奨スキンが問題だったのですね。勉強になりました。

今後ともよろしくお願いいたします。

[うなこ]

時々、「崩れる」ということですので、キャッシュプラグインを利用していますか？

過去にも時々崩れる方が見えまして、キャッシュ系プラグインが原因でした。

[うなこ]

お客さまがAndroid端末で閲覧されていると思われますので、フォント設定をGoogle Fontsにすると見えるようになるかなと思います。
たとえば、「Noto Serif JP」（太さはお好みで）に変更するといかがでしょうか。

[うなこ]

本件とは関係ないと思いますが、、、気になった点としましては
デザインスキンがPale（非推奨）になっているようですので、
もし差し支えなければPaleⅡ（Bootstrap4）を選択してください。

[うなこ]

ほんとですね、、、
.vk_balloon_icon_image　のクラスにwidth とheightは入っているのですが、、、
なぜでしょう、、？うーん、、

もし原因がわかりましたらまたお知らせします。

[うなこ]

近々、VK Blocks Proに段落テキストの文章の途中で小さい文字や大きい文字を入力できる機能が搭載される予定ですが
まだリリースが未定ですので、ひとまずHTMLを編集の方法をお試しください。

[うなこ]

基本は画像はコンテンツの幅内に収まるようになっていると思いますが、
どこかの画像やテーブルがはみ出しているのかもしれません。。

もし差し支えなければ、ページのURLを添付いただくと、原因がわかるかもしれません。

[うなこ]

いろいろ方法はありますが、
１つの方法としましては、
見出しブロックを設置し、「HTMLとして編集」を選択しHTMLとして編集する方法がございます。

例えばこんな感じでHTMLを入れますと、テキスト横に小さいフォントの文字が入ります。
（文字を小さくしたいだけであれば、この方法が一番簡単かもしれません。。）

<h2 class="is-style-vk-heading-plain">見出し <span style="font-size:1rem;">サブテキスト</span></h2>

CSSで調整する方法ももちろんございます。

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

Attachments:

You must be logged in to view attached files.

[うなこ]

返事遅くなりもうしわけないです。

吹き出しブロックの画像部分はimageにwidthとheightが VK Blocks のcssに書かれていると思いますので、
おそらく画像要素で width と height が明示的に指定されていないは出ていないと思うのですが、
いかがでしょうか

[うなこ]

子テーマの件ですが、cssのカスタマイズのみでしたら、現在あがっている「Lightning 子テーマサンプル」で大丈夫かなと思っております。
といいますのも、おそらくはG3用の空のフォルダが入っているか入っていないかの違いになりますので、cssのみカスタマイズする場合は特に現在の子テーマでも問題ないと思っております。
どちらでも大丈夫です。

追伸で書いていただいた画像サイズの件ですが、
PageSpeed Insights　にて先ほどサイトを見させていただきましたところ、
トップページの「荷台に入るサイズ」画像に「画像要素で width と height が明示的に指定されていない」と出ているようでした。
こちらの画像は、もう一度あげ直していただくとwidth と heightが入ったりしませんか、、？

[うなこ]

デザインを同じにしたい場合は、追加でCSSを記述する必要があります。

代替案としまして、、、
この投稿リストブロックの「表示タイプとカラム」の「表示タイプ」が現在カードになっていますが、テキスト１カラムではどうでしょうか、、？

カードの枠が取れて、まだデザイン的には近いかなと思います。

cssのカスタマイズに関しましては、以下の記事が参考になると思いますので、よろしければご参考にしてみてください。

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

[うなこ]

> G3β用にも子テーマは配布予定はあるでしょうか？

今後G3用にも準備する予定ですが、もしお急ぎでしたら、
現在あがっている「Lightning 子テーマサンプル」でもご利用いただけます。

子テーマでのカスタマイズ

[うなこ]

左右ではありませんが、
VK Blocks の見出しブロックで見出しとサブテキストをつけるのはいかがでしょうか。
（サブテキストは見出しテキストの下にきます）
見出しとサブテキストの間の余白やフォントサイズも設定できますので、近い形にはできるかなと思います。

見出し

cssのカスタマイズに関しましては、以下の記事が参考になると思いますので、よろしければご参考にしてみてください。
https://www.vektor-inc.co.jp/post/wordpress-css-customize-2020/

[うなこ]

デザインスキンPaleでは、標準のセクションベース設定が「セクションベース（白い背景部分）あり」になりますので、セクションベースありで全幅にしても、セクションベース内にしか広がりません。

もし、横幅貫通の全幅で表示したい場合は、フロントページに設定している固定ページを開き、Lightning デザイン設定のセクションベース設定をセクションベース無しに設定していただくと、セクションベースはなくなってしまいますが全幅表示にできます。

セクションベース設定

セクションベースありのまま全幅で表示したい場合は、追加でCSSを記述する必要があります。

おそらく以下のCSSを追加CSSか、子テーマのCSSに追記していただければセクションベースありでもOuterブロックを全幅にできると思いますが、すべてのOuterブロックの全幅に適応されてしまいますので、注意が必要です。
全幅表示したいOuterブロックに、高度な設定から「追加 CSS クラス」でクラス名をつけてあげたりして、調整してみてください。

.mainSection.mainSection-base-on .vk_outer-width-full{
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

こちらでcssのカスタマイズについて書いてありますので、ご参考にしてください。
▼できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

[うなこ]

カスタマイズの追加CSSか、もしくは子テーマでしたら子テーマのstyle.cssなどにロゴの画像のサイズを記述しますと良いのではないかと思います。
推奨サイズとのことですので、以下でいかがでしょうか、、？
※一度スマホやPCでサイズが合っているのかご確認ください。

.site-header-logo img{
width: 280px;
height: 60px;
max-height: 60px;
}

[投稿者]

投稿