[対馬 俊彦]

私のサイトで試したところ、カスタム CSS が保存できています。

私のサイトの環境は以下の通りです。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.32.4

■ Pro Unit のバージョン
0.29.10

■ スキンの種類
Origin III

■ プラグインの種類・バージョン
VK All in One Expansion Unit 9.112.4.0
VK Block Patterns 1.33.3.0
VK Blocks Pro 1.115.0.0

上記はご質問者のサイトと同一ですが、
以下のプラグインをインストールしてありません。

Admin Columns 4.7.20
Contact Form 7 6.1.4
Contact Form 7 Multi-Step Forms 4.5
Flamingo 2.6.1
SiteGuard WP Plugin 1.7.9
EWWW Image Optimizer 8.3.1
Copy & Delete Posts 1.5.0
Advanced Custom Fields 6.7.0

経験的に CSS を保存できないときはサーバーの WAF が原因のことがよくあります。
なにかエラーメッセージは表示されていませんか？

[対馬 俊彦]

いい枠を確保しましたね！

> 技術的なTIPS話なんぞまったくできないのでバラエティになっちゃいますよ。

いまのところ、技術的なTIPS話に偏り過ぎているように思うので、
たわしそふとさんの記事でアドベントカレンダーに彩りを添えてください。

X’MASイブを楽しみにしてます～😊

[対馬 俊彦]

たわしそふとさん、

X-T9しか知らないアマチュアでもちゃんと立派なホームページが作れるのだということを…

余生をX-T9に捧げているジジイwwなので…

そのあたりのことをアドベントカレンダーに書いてみませんか？

[対馬 俊彦]

VK パターンライブラリの中でよさそうなものをお伝えしたのですが、
背景画像 ＋ ボタン のシンプルなものを作るのであれば、
カバーブロックにボタンブロックを入れて、いちから作る方がわかりやすいです。

[対馬 俊彦]

VK Blocks Pro の横並びボタンブロックでご希望のことができると思います。

横並びボタン（Pro版のみ）

[対馬 俊彦]

このパターン ↓ はいかがですか？

ヒーローエリア_画像の上にあまり要素が被らないレイアウト用（文字背景なし）

カバーブロックの設定で、上下方向（上・中央・下）と左右方向（左・中央・右）の配置を指定できます。
位置を細かく調整するには、余白やスペーサーを使うことになります。

このパターンを試してみてご希望のことができなければ、
そうじゃなくてこういうのが欲しい、と返信してもらえれば、いい回答が得られるかもしれません。

> 以前は自分でHTMLやCSSを書いていましたが

もしかしたら、<map> と <area> で作るイメージマップのことなのでしょうか？

[対馬 俊彦]

以下のトピックを参考に、クエリーループの設定を カスタム から デフォルト に切り替えてみてください。

アーカイブページと検索結果にすべての投稿が表示される

[対馬 俊彦]

Lightning 標準のスライドショーのようなカスタマイズ機能はありません。

フォーカルポイントの調整でうまくいく可能性がありますが、
まったく別の画像にしたい場合は、スライダーを複製して、
非表示設定を使ってPC・モバイルで出し分ければできます。

[対馬 俊彦]

ベクトルさんがアップデートで修正してくれると思いますが、
お急ぎであれば、とりあえず以下の CSS を書いて作業を進めることができます。

.vkfs__label-accordion-content {
    overflow: hidden;
}

[対馬 俊彦]

フッター前の流れるカルーセルのことですよね。

[ExUnit 設定] → [Call To Action] の表示場所（オプション）に

lightning_site_footer_before

と入力されているかもしれませんが、これを削除して入力欄を空白にして [変更を保存] してみたらどうなりますか？

[対馬 俊彦]

VK All in One Expansion Unit のスムーススクロールの設定を CSSのみ に変更してみてください。
たぶん、解決すると思います。

> ベクトル様

VK All in One Expansion Unit の設定画面には

Safari では動作しません。

という表記がありますが、調べてみたところ、⁨2022年3月にリリースされた Safari 15.4 で

scroll-behavior: smooth;

がサポートされて、現時点で動作しない Safari の使用率はもう気にしなくてもいいくらいに下がっているみたいです。

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

> 表示されます。

とのことですが、私が試すと2件しか表示されません。

「通常の WordPress のキーワード検索」って、
サイトのアドレスの後ろに /?s=キーワード をつけた結果のことだと理解しています。

キーワードを省略した https://stamp-yasan.com/?s= の結果は以下の2件だけなので、
VK Filter Search Pro の検索対象もこの2件だけということになると思います。

[1] 「忙しい中ありがとう」メッセージ系スタンプ 2022.07.05
[2] 「完売御礼」のスタンプ 2022.07.05

[対馬 俊彦]

プラグイン VK All in One Expansion Unit の 投稿ループ前ウィジェットエリア を使って、このウィジェットエリアにメインビジュアルを置くことができます。

投稿ループ前にウィジェットエリア追加

これはプラグインの機能ですので、有料版・無料版のどちらのテーマでも使えます。

[対馬 俊彦]

wordpress固定ページではボタンとコードが表示されてしまいます。
ブラウザ上では続きを見るボタンがきちんと表示されています。

そうなるのがこのブロックパターンの正常な動作です。

VK Blocks Pro がインストールされている場合、ボタンの カスタム CSS に以下のコードをコピペすれば、編集画面にもスタイルを適用できて、すっきりした見た目にできます。

貼り付け先は添付画像をご参照ください。

このコードを貼り付けたら、ボタンの下にある カスタム HTML ブロックは不要になるので、削除してください。

selector.vk_button .vk_button_link.is-style-outline {
 position: relative;
 z-index: 0; 
 border-radius: 0;
 padding: 12px 35px;
 letter-spacing: 0.1em;
 width: 240px;
}

selector.vk_button .vk_button_link.is-style-outline::before {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 100%;
 background-color: currentColor;
 z-index: -1;
 transition: .3s;
}

selector.vk_button .vk_button_link.is-style-outline:hover::before {
 width: 100%;
}

selector.vk_button .vk_button_link.is-style-outline .vk_button_link_caption::before {
 content: '';
 position: absolute;
 display: block;
 width: 80px;
 height: 1px;
 bottom: 50%;
 right: -45px;
 border-bottom: solid 2px currentColor;
}

selector.vk_button .vk_button_link.is-style-outline .vk_button_link_caption:after {
 content: '';
 position: absolute;
 display: block;
 width: 14px;
 height: 2px;
 background: currentColor;
 bottom: calc(50% + 5px);
 right: -45px;
 transform: rotate(45deg);
}

selector.vk_button .vk_button_link.is-style-outline:hover {
 opacity: unset;
 box-shadow: unset;
 background-color:  transparent !important;
 border: solid 1px;
}

VK Blocks Pro の カスタム CSS については下記のページに説明されています。

カスタム CSS ( Pro版のみ )

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

iPhone の Safari と Chrome のどちらでも同じ現象になるかもチェックすると、先に進める手がかりになるかもしれません。

[投稿者]

投稿