DRILL LANCER
フォーラムへの返信
-
投稿
-
#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。
という点なんですが、具体的にはどうすればいいのでしょうか??下記記事の「CSSカスタマイズで文字サイズや色などを変更する」の部分をを熟読すれば自ずとつかめると思います。
アウターが全幅の場合については効かないので忘れてください。
なので、実現方法としては下記のようになります。- アウター幅が標準のアウターブロックを作成
- 下記コードのいずれかを適用
全体に反映する場合
.vk_outer.vk_outer-width-normal { margin-left: -15px; margin-right: -15px; } @media (min-width: 768px) { .vk_outer.vk_outer-width-normal { margin-left: -20px; margin-right: -20px; } } @media (min-width: 992px) { .vk_outer.vk_outer-width-normal { margin-left: -30px; margin-right: -30px; } } @media (min-width: 1200px) { .vk_outer.vk_outer-width-normal { margin-left: -40px; margin-right: -40px; } }VK 固定ページ本文ウィジェット で設定した特定のページのみに反映したい場合
#widget-page-16 .vk_outer.vk_outer-width-normal { margin-left: -15px; margin-right: -15px; } @media (min-width: 768px) { #widget-page-16 .vk_outer.vk_outer-width-normal { margin-left: -20px; margin-right: -20px; } } @media (min-width: 992px) { #widget-page-16 .vk_outer.vk_outer-width-normal { margin-left: -30px; margin-right: -30px; } } @media (min-width: 1200px) { #widget-page-16 .vk_outer.vk_outer-width-normal { margin-left: -40px; margin-right: -40px; } }#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。
全てのページで実現したい場合は下記コードを 外観 > カスタマイズ > 追加CSS 等に記述することで実現可能です。
アウター幅が標準の場合に反映したい場合
.vk_outer.vk_outer-width-normal { margin-left: -15px; margin-right: -15px; } @media (min-width: 768px) { .vk_outer.vk_outer-width-normal { margin-left: -20px; margin-right: -20px; } } @media (min-width: 992px) { .vk_outer.vk_outer-width-normal { margin-left: -30px; margin-right: -30px; } } @media (min-width: 1200px) { .vk_outer.vk_outer-width-normal { margin-left: -40px; margin-right: -40px; } }アウター幅が全幅の場合に反映したい場合
.vk_outer.vk_outer-width-full { margin-left: -15px; margin-right: -15px; } @media (min-width: 768px) { .vk_outer.vk_outer-width-full { margin-left: -20px; margin-right: -20px; } } @media (min-width: 992px) { .vk_outer.vk_outer-width-full { margin-left: -30px; margin-right: -30px; } } @media (min-width: 1200px) { .vk_outer.vk_outer-width-full { margin-left: -40px; margin-right: -40px; } }P.S.
VK 固定ページ本文ウィジェット で設定した特定のページのみに反映したい場合は#widget-page-16 .vk_outer.vk_outer-width-normal { margin-left: -15px; margin-right: -15px; } @media (min-width: 768px) { #widget-page-16 .vk_outer.vk_outer-width-normal { margin-left: -20px; margin-right: -20px; } } @media (min-width: 992px) { #widget-page-16 .vk_outer.vk_outer-width-normal { margin-left: -30px; margin-right: -30px; } } @media (min-width: 1200px) { #widget-page-16 .vk_outer.vk_outer-width-normal { margin-left: -40px; margin-right: -40px; } }とか
#widget-page-16 .vk_outer.vk_outer-width-full { margin-left: -15px; margin-right: -15px; } @media (min-width: 768px) { #widget-page-16 .vk_outer.vk_outer-width-full { margin-left: -20px; margin-right: -20px; } } @media (min-width: 992px) { #widget-page-16 .vk_outer.vk_outer-width-full { margin-left: -30px; margin-right: -30px; } } @media (min-width: 1200px) { #widget-page-16 .vk_outer.vk_outer-width-full { margin-left: -40px; margin-right: -40px; } }とかになります。
#widget-page-16の数字の部分は開発者ツールでそのウィジェットを検証すると得られます。現在 Lightning Skin Variety の Ver. 4.0.5 を使用しているようですね。
なので下記を試してみてください。- Lightning Skin Variety を最新版 ( 5.0.0 ) に更新
- 外観 ＞ カスタマイズ ＞ Lightning デザイン設定 にてデザインスキンを Variety II ( Bootstrap 4 ) に変更
- 一旦ログアウトしてログインし直してみる ( 解消される場合があるかも )
外観 ＞ カスタマイズ ＞ Lightning トップページスライドショー において、「モバイル用スライド画像 (任意) 」の項目は「スマホだと【スライド画像】に設定した画像をこの画像に置換する」という意味のものなので、「スライド画像」が設定されていないと表示されない仕様のようです。
スライドショーを普通に設定した後、下記コードを下記選択肢のいずれかに設置するとスマホのみスライドショーが表示されるようになります。（厳密に言うと PC では非表示になります。）
- 子テーマの style.css
- 外観 ＞ カスタマイズ ＞ 追加CSS
- ExUnit ＞ CSSカスタマイズ
.device-pc .slide{ display: none; }下記を試してみてください、
- 無料版の VK Blocks がインストールされている場合は無効化＆削除する
- ExUnit の VK Blocks の機能を無効化
- Lightning Pro & ExUnit & VK Blocks Pro を最新版に更新する
デフォルトと例のサイトを参考に組んだものを一応載せておきます。
function password_form_kai( $output ) { $output = '<p>ここに任意のテキストを記述しましょう。</p>'; $output .= '<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="post-password-form" method="post">'; $output .= '<input name="post_password" type="password" size="24" />'; $output .= '<input type="submit" name="Submit" value="' . esc_attr__("パスワード送信") . '" />'; $output .= '</form>'; return $output; } add_filter('the_password_form', 'password_form_kai');function remove_protected($title) { return '%s'; } add_filter('protected_title_format', 'remove_protected'); function password_form_kai() { return '<p>ここに任意のテキストを記述しましょう。</p> <form class="post_password" action="' . site_url() . '/wp-login.php?action=postpass" method="post"> <input name="post_password" type="password" size="24" /> <input type="submit" name="Submit" value="' . esc_attr__("パスワード送信") . '" /> </form>'; } add_filter('the_password_form', 'password_form_kai');上記コードではいかがですか？
変更点：home_url()をsite_url()に変更Lightning PR コンテンツウィジェットは非推奨機能になっていて、そのうち廃止されるかもしれません。
PR コンテンツ ウィジェット を停止
プラグイン VK Blocks の Outer ブロックと PR Content ブロックで同様の事ができます。
（外観 ＞ カスタマイズ ＞ Lightning 機能設定より）該当コンテンツを VK Blocks の Outer ブロックと PR Content ブロック を使って固定ページを作成し、VK 固定ページ本文ウィジェットでその固定ページを呼び出すという手法をとってはいかがでしょうか？
私の場合は下記コードで正常に表示されました。
function remove_protected($title) { return '%s'; } add_filter('protected_title_format', 'remove_protected'); function password_form_kai() { return '<p>ここに任意のテキストを記述しましょう。</p> <form class="post_password" action="' . home_url() . '/wp-login.php?action=postpass" method="post"> <input name="post_password" type="password" size="24" /> <input type="submit" name="Submit" value="' . esc_attr__("パスワード送信") . '" /> </form>'; } add_filter('the_password_form', 'password_form_kai');キャッシュ系プラグインや Autoptimize を使用している場合キャッシュをクリアしてからプラグインを停止してみてください。
P.S.
Origin II 等の Bootstrap 4 版のスキンを使用している場合、
本来ならば Bootstrap 4.3.1 が読み込まれるべきなのですが、
現状 Bootstrap 3.4.1 が読み込まれていることによるエラーが発生しているようです。
この場合キャッシュの疑いが濃厚なのでキャッシュの削除を試してみてください。それはページネーションといってループやサブループと密接である必要があります。
なので、ブロック側で対応していただかないと設置するのは難しいと思います。
