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

[助川慧]

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

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

代替案でも構いません。

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

[うなこ]

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

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

• この返信は3年、 11ヶ月前にうなこが編集しました。

[助川慧]

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

Attachments:

You must be logged in to view attached files.

[うなこ]

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

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

• この返信は3年、 11ヶ月前にうなこが編集しました。
• この返信は3年、 11ヶ月前にうなこが編集しました。
• この返信は3年、 11ヶ月前にうなこが編集しました。
• この返信は3年、 11ヶ月前にうなこが編集しました。

[助川慧]

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

[投稿者]

投稿