VWSとは フォーラム Lightning 3PR を2PRに

3PR を2PRに

タグ: 

11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • 投稿者
    投稿
  • #22268

    ご教示ください。
    WordPress 5.2.3 (Lightning Pro テーマ)
    カスタマイズの3PR を 2PRにする方法をご指導頂ますようよろしくお願いいたします。

    #22274

    DRILL LANCER
    モデレーター

    「外観」→「カスタマイズ」→「Lightning トップページ PR Block」のことなら下記を実行してみてください
    ①「外観」→「カスタマイズ」→「Lightning トップページ PR Block」の3番目に関する設定を空欄に
    ②「外観」→「追加CSS」または子テーマのCSSに下記CSSコードを追加

    @media (min-width: 768px){
    	.prBlock_lighnt.col-sm-4{
    		width:50%;
    	}
    }
    • この返信は1年、 3ヶ月前にDRILL LANCERが編集しました。
    #22275

    RICK 様
    早速のご対応有難うございます。

    大変申し訳ございません。m(_ _)m

    VK 3pr エリアでございます。

    #22277

    DRILL LANCER
    モデレーター

    「VK 3PR エリア」ウィジェットのことでしたか。
    「カスタマイズ」という言葉があったので「Lightning トップページ PR Block」のことだと早合点してしまいました。
    それならば下記を実行すると良いでしょう。

    ①該当「VK 3PR エリア」ウィジェットの3番目に関する設定を空欄に

    ②下記WEBページを参考にしながら該当部分の外側にある
    <div class="widget widget_wp_widget_vkexunit_3pr_area" id="wp_widget_vkexunit_3pr_area-2">
    のような記述を探す。

    全てのWordPressテーマで使える!デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

    ③「外観」→「追加CSS」または子テーマのCSSに下記の例を応用したCSSコードを追加

    例1. 手順②においてid="wp_widget_vkexunit_3pr_area-2"の記述を発見した場合

    @media (min-width: 768px){
    	#wp_widget_vkexunit_3pr_area-2 .prArea.col-sm-4{
    		width:50%;
    	}
    }

    例2. 手順②においてid="wp_widget_vkexunit_3pr_area-3"を発見した場合

    @media (min-width: 768px){
    	#wp_widget_vkexunit_3pr_area-3 .prArea.col-sm-4{
    		width:50%;
    	}
    }

    P.S.
    ウィジェットはサイト全体で複数使用するため、その分手順が煩雑になります。
    サイト全体で「VK 3PR エリア」を絶対に1つしか使わないと誓える場合、
    もしくは、「VK 3PR エリア」は絶対に2列以外で使用しないと誓える場合、
    CSSコードの記述は下記でOKです。

    @media (min-width: 768px){
    	.prArea.col-sm-4{
    		width:50%;
    	}
    }
    • この返信は1年、 3ヶ月前にDRILL LANCERが編集しました。
    • この返信は1年、 3ヶ月前にDRILL LANCERが編集しました。
    #22281

    RICK 様
    有難うございます。
    CSSがなかなかできなくて申し訳ございません。
    .waku{
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    }

    .in {
    padding: 10px;
    width: 50%;
    box-sizing: border-box;
    }
    で2列にはできたのですが、スマホにした時もそのままの為、3PRエリア を利用したいと思いご質問いたしました。
    ご丁寧に有難うございます。

    チャレンジしてみます。m(_ _)m

    #22282

    DRILL LANCER
    モデレーター

    コードの意味を100%理解したわけではありませんが(HTML構造が見えないため)・・・
    下記の様にすれば幅が狭いデバイスでは1列で表示可能です。
    ブレイクポイントは 3PR を参考に 768px を採用しました。

    .waku{
    	width: 100%;
    	display:block;
    }
    .in {
    	padding: 10px;
    	width: 100%;
    	box-sizing: border-box;
    }
    @media (min-width: 768px){
    	.waku{
    		display:flex;
    		flex-wrap:wrap;
    	}
    	.in {
    		width: 50%;
    	}
    }
    #22283

    RICK 様

    ご教示いただきました、下記cssでバッチリなりました。

    感謝、感激でございます。

    有難うございました。

    助かりました。

    .waku{
    width: 100%;
    display:block;
    }
    .in {
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    }
    @media (min-width: 768px){
    .waku{
    display:flex;
    flex-wrap:wrap;
    }
    .in {
    width: 50%;
    }
    }

    #43036

    ichi
    参加者

    以前に使用してたバージョンから、大幅にアップデートされてるようなので、本日新たに購入しました。
    VK3PRエリアを2PRにしたくて、この記事にたどり着いたのですが、「外観」→「追加CSS」に上記の記述をしても何も変わりません。
    以前のバージョンでは2PRにで来たのですが・・・
    本日、購入したバージョンは7.7.0です。
    ご教授下さい。

    #43038

    DRILL LANCER
    モデレーター

    現在は「カードブロック」という便利なものが存在いたしますのでそちらをご利用いただけたら幸いです。
    VK3PRエリア はこのたび非推奨のものとなりました。

    同時に トップページ or LP を ウィジェットを組み合わせてページを作成する方法も非推奨となっております。
    固定ページの編集画面からブロックをうまく組み合わせて構築していただければ幸いです。

    #43050

    ichi
    参加者

    カードブロックは、トップページに設定出来るのでしょうか!?
    参照リンクがありましたら、教えてください。
    色々と変わってるので、手探り状態です。
    お忙しいところ、申し訳ございません。

    #43053

    DRILL LANCER
    モデレーター

    下記方法で可能です。

    1. まず、トップページ用の固定ページと、「投稿」のリストを表示するための固定ページを用意します。
    2. 設定 > 表示設定と進み、画像のように設定します。(Homeはトップページ用、更新情報は投稿リスト用です。)
    3. 先程作成した2つの固定ページを Header Navigation に追加します
    Attachments:
    You must be logged in to view attached files.
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • このトピックに返信するにはログインが必要です。