VWSとは フォーラム Lightning [ 解決済 ] 3PR を2PRに

[ 解決済 ] 3PR を2PRに

タグ: 

このトピックには6件の返信が含まれ、2人の参加者がいます。1 ヶ月前 VWSカスタマー さんが最後の更新を行いました。

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

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

    #22274

    RICK
    参加者

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

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

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

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

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

    #22277

    RICK
    参加者

    「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 ヶ月、 1 週前に  RICK さんが編集しました。
    • この返信は1 ヶ月、 1 週前に  RICK さんが編集しました。
    #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

    RICK
    参加者

    コードの意味を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%;
    }
    }

7件の投稿を表示中 - 1 - 7件目 (全7件中)

このトピックに返信するにはログインが必要です。