DRILL LANCER
フォーラムへの返信
-
投稿
-
デザインスキン Frot Ⅱ Bootstrap4を設定すると
コピーライト部分のグレーの背景色が全幅になりません。Fort II では下記コードを使用することで解決可能です。
.copySection { border-top: none; max-width: unset; background: #717071; padding: 20px; }因みに下記の違いがよくわかりません。
- Frot Ⅱ Bootstrap4
- Frot Ⅱ （Bootstrap4/footer light）表示保証外
フッターメニューとフッター部分(デフォルトだと３列表示)の背景色が黒っぽくなるか白になるかの違いがあります。
フッター部分に配置している会社情報の電話番号ボタンも位置がずれてしまいます。
「VK お問い合わせ情報」ウィジェットをサイドバーのような狭いエリアに設置するのは開発者側の想定外だったと思います。
しかし、一応下記コードでそれなりに体裁が整うと思います。
.siteFooter .sectionBox .veu_contact .contact_txt { float: none; text-align: center; } .siteFooter .sectionBox .veu_contact .contact_bt { float: none; }※私は開発者ではなくあくまでも利用者側の一人なので悪しからず。
前回は１カラムのテンプレートを使用時に記事部分の幅を 980px にしたいという解釈でコーディングをしたので、あのようなコードになりました。
しかし、今回はサイト全体の幅を最大 980px にしたいということのようなので前回のコードは無用となります。
前回のコードを削除し、下記コードを適用することで実現可能になります。
@media (min-width: 1200px) { .siteHeadContainer.container .navbar-header, .gMenu_outer nav, .container{ max-width:980px; } }前回と同じで Fort II 適用時に動作確認しました。
P.S.
この解釈が間違っているようならもっと詳しく説明をお願いします。モバイル用スライド画像を作成、設定したのですが。
表示されない状況です。サイズは750*530で作成しました同じユーザー名の別の人が立てた下記トピックが参考になると思います。
あと、モバイル用画像は画面幅が一定以下の場合表示され、それ以外の場合は PC 用画像が表示される仕様のようです。
PC用のヘッダー画像はモバイル用に適用されない状況です。
ヘッダー画像 とはどこのことを指しているのかがわかりません。
ページヘッダー や ロゴ画像 にはそもそも PC と モバイルで出し分けする設定は見当たりませんし・・・Lightning ( Pro ) では下記コードが無いためかウィジェットでショートコードはデフォルトでは使えないようです。
add_filter('widget_text', 'do_shortcode' );
私の環境では上記コードを functions.php に追加したあとで カスタム HTML ウィジェット にショートコードを追加するだけで見た目は整いました。
スキンは II シリーズならどれでもOKなようでした。P.S.
編集の前後で有耶無耶になってしまいましたが、トピ主は
<div class="<?php lightning_the_class_name( 'siteContent' ); ?>">
が見当たらないと発言しているので少なくとも Lightning Pro 2.X.X 以下を使っている可能性がありそうです。Lightning Pro 3.0.3 ベースの専用のテンプレートを作ってみました。
専用のウィジェットを使用したい場合は下記コードを子テーマの functions.php に追記してください。/*-------------------------------------------*/ /* WidgetArea initiate /*-------------------------------------------*/ function lightning_child_widgets_init() { // LP widget area $args = array( 'post_type' => 'page', 'post_status' => 'publish,private,draft', 'posts_per_page' => -1, 'meta_key' => '_wp_page_template', 'meta_value' => 'page-lp-english.php', ); $posts = get_posts( $args ); if ( $posts ) { foreach ( $posts as $key => $post ) { register_sidebar( array( /* Translators: %s: LP title */ 'name' => sprintf( __( 'LP widget "%s"', 'lightning-pro' ), esc_html( $post->post_title ) ), 'id' => 'lp-widget-' . $post->ID, 'before_widget' => '<div class="widget %2$s" id="%1$s">', 'after_widget' => '</div>', 'before_title' => '<h2 class="mainSection-title">', 'after_title' => '</h2>', ) ); } } wp_reset_postdata(); } add_action( 'widgets_init', 'lightning_child_widgets_init', 200 );すみません、色々と編集してました。最新のコードを参考にしてください。
Lightning Pro 3.0.X から引っ張ってきたコードなので、Lightning Pro 2.X.X 以下だと見つからないと思います。私だったら下記のように専用のテンプレートを作ってそれを適用します。
- page-lp.php を子テーマにコピー後、page-english.php にリネーム
- page-english.php を以下のように編集
編集前
<?php /* * Template Name: Landing Page */ get_header(); ?> <div class="<?php lightning_the_class_name( 'siteContent' ); ?>">編集後
<?php /* * Template Name: English Landing Page */ get_header(); ?> <?php echo do_shortcode( '[lightning_slide]' ); ?> <div class="<?php lightning_the_class_name( 'siteContent' ); ?>">P.S.
他に修正すべき点が出てくるかもしれませんが、LP用ウィジェットを使用しないのなら問題なく使用できるでしょう。P.P.S.
相手方は英語サイトは１ページだけ作らせておいて後は日本語版を見様見真似で作るという腹積もりかもしれないのでそのあたりはよく確認しておいたほうかもしれません。（その場合はマルチサイトが必須になると思います。）Lightning ( Pro ) はトップページは色々設定できますが、その他のページは記事とサイドバー以外に自由度がないのでそういった可能性は個人的には否定できません。
前回と同様に下記コードをベースにカスタマイズしてください。
※前回のコードも含んでいるので前回のものは削除してください。.mobile-fix-nav .mobile-fix-nav-menu li .vk-mobile-nav-menu-btn i, .mobile-fix-nav .mobile-fix-nav-menu li .vk-mobile-nav-menu-btn svg, .mobile-fix-nav .mobile-fix-nav-menu li a i, .mobile-fix-nav .mobile-fix-nav-menu li a svg { font-size: 22px; }モバイル固定ナビのアイコンのフォントサイズは下記 CSS コードで変更可能です。
.mobile-fix-nav .mobile-fix-nav-menu li a i { font-size: 22px; }下記のいずれかに追記してください。
- 子テーマの style.css
- 外観 ＞ カスタマイズ ＞ 追加CSS
- ExUnit ＞ CSS カスタマイズ
それをレスポンシブルにしてみると、3番目が下に移動した際に、1番目と3番目がぴったりくっついてしまいます。さらに1列になると全部の上下がくっついていしまいます。
cssなどでスペースを入れることは可能でしょうか。各カラムの Outer の下に VK Block Layout > レスポンシブスペーサー を挿入して、全カラムの レスポンシブスペーサー の設定を同一にすれば可能と思われます。
また、横幅が小さくなる際に、3列から1列にすることは可能でしょうか。
(3×3の場合、2列・1列が3つになるため、並びがイマイチ)- カラムブロック ＞ 高度な設定 ＞ 追加 CSS クラス に
column-3を追加 - 下記選択肢のいずれかに下記 CSS コードを追記
- 子テーマの style.css
- 外観 ＞ カスタマイズ ＞ 追加CSS
- ExUnit ＞ CSS カスタマイズ
.column-3.wp-block-columns{ justify-content:space-around; } @media (min-width: 600px) { .column-3 .wp-block-column { flex-basis: auto; width:100%; margin-left:0; } } @media (min-width: 782px) { .column-3 .wp-block-column { flex-basis: auto; width:30%; margin-left:0; } }P.S.
IE は固有のバグが多く対応しきれないため非対応です。ご了承ください。インポートした影響で、コンテンツデータに含まれるテーマやプラグインのバージョンが古くなっています。
とりあえず、Lightning Pro ( ライセンスキー の入力を忘れずに ) と VK All in One Expansion Unit を最新版に更新してみてください。
ついでに、マイアカウントから VK Blocks Pro を入手してこちらも更新してみてください。 ( ExUnit の VK Blocks を無効化するのを忘れずに )
