VWSとは フォーラム Lightning [ 解決済 ] LTG PR コンテンツの文字列の位置について

[ 解決済 ] LTG PR コンテンツの文字列の位置について

  • このトピックには4件の返信、2人の参加者があり、最後に助川慧により5ヶ月、 3週前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #38770

    助川慧
    参加者

    お世話になっております。
    表題の件について質問させてください。
    —————————-
    ・Lightning pro 4.3.1
    ・Origin II(Bootstrap4)
    —————————-

    トップページコンテンツエリア上部でウィジェットのLTG PR コンテンツを使用して、背景画像の上に中央ぞろえで文字列を配置したいのですが、実装する方法はありますでしょうか?
    ※”画像”は使用せず、”背景”でのみ画像を設定しているのですが、”画像”の”レイアウトの:”画像を左に配置する/右に配置するの設定に影響されてしまっているようです。

    代替案でも構いません。

    よろしくお願いいたします。

    #38807

    うなこ
    モデレーター

    ※”画像”は使用せず、”背景”でのみ画像を設定しているのですが、”画像”の”レイアウトの:”画像を左に配置する/右に配置するの設定に影響されてしまっているようです。

    文字だけですと、今の状況がすこし想像しずらいので…
    もし差し支えなければサイトのURLか、もしくは該当場所の画像のキャプチャを添付していただくとわかりやすいかもしれません。

    • この返信は5ヶ月、 3週前にうなこが編集しました。
    #38813

    助川慧
    参加者

    キャプチャを添付させていただきます。

    Attachments:
    You must be logged in to view attached files.
    #38826

    うなこ
    モデレーター

    キャプチャありがとうございます。

    PRコンテンツは、画像とタイトル+テキストのレイアウトですので、画像が無いと空白ができてしまいます。
    以下のCSSで幅を100%にして画像分の空白を消しています。
    追加CSSなどに追加してください。いかがでしょうか。

    ↓ウィジェットから設置したPRコンテンツすべてに、以下のcssがかかります。
    「widget PRコンテンツタイトル中央揃え」と「widget PRコンテンツテキスト中央揃え」は、必要ない場合は削除してください。

    /* widget PRコンテンツ幅 */
    .widget_vk_widget_pr_content .pr-content-col-text{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;	
    }
    
    /* widget PRコンテンツタイトル中央揃え */
    .widget_vk_widget_pr_content .pr-content-title{
        text-align:center;
    }
    /* widget PRコンテンツテキスト中央揃え */
    .widget_vk_widget_pr_content .pr-content-col-text{
       text-align:center;
    }

    あとは代替案としては、ウィジェットではなくブロックで設置する方法があります。

    Outerブロックを全幅で背景画像を設置して、その中に見出しブロック+段落ブロック+ボタンブロックで似たようなレイアウトが可能です。

    • この返信は5ヶ月、 3週前にうなこが編集しました。
    • この返信は5ヶ月、 3週前にうなこが編集しました。
    • この返信は5ヶ月、 3週前にうなこが編集しました。
    • この返信は5ヶ月、 3週前にうなこが編集しました。
    #38837

    助川慧
    参加者

    いただいたcss通りで実装したい配置通りとなりました。
    お忙しい中ご回答ありがとうございました!

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。