[ 解決済 ] VKパターンライブラリの続きを見るボタンが上手くペーストできない

[mei]

■ WordPress のバージョン
バージョン6.8.2

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

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

■ テーマのバージョン
バージョン15.30.1

■ Pro Unit のバージョン
バージョン0.29.5

■ スキンの種類
Origin III

■ 期待する動作
VKパターンライブラリの続きを見るボタンをコピーしてペーストするとコードが表示されるのでコードが表示されたままで良いのか、ペーストのやり方が間違っているのか教えてください

■ 自分で試した事
ボタンを入れたい場所へ＋ボタンを表示させてCtrl＋Vを押してペーストさせました。

■ 症状が発生するブラウザ
google chrome

■ 実際の症状
wordpress固定ページではボタンとコードが表示されてしまいます。
ブラウザ上では続きを見るボタンがきちんと表示されています。
ただ、固定ページにコードが表示されているので私のペーストの仕方が間違っているのでしょうか？

Attachments:

You must be logged in to view attached files.

[対馬 俊彦]

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.

[mei]

解決しました！
ありがとうございました！

[投稿者]

投稿