[ 解決済 ] スライドタイトルを下に配置したい

VWSとは フォーラム Lightning [ 解決済 ] スライドタイトルを下に配置したい

[ 解決済 ] スライドタイトルを下に配置したい

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

    masako.s
    参加者

    ■ 利用テーマとバージョン :
    Lightning Proバージョン: 8.5.5

    ■ 質問内容:
    お世話になっております。
    トップ画像のスライドショーの上に文字を入れる「スライドタイトル」と「スライドテキスト」の位置を画像の右下あたりに配置したいです。

    CSSが分からず困っています。

    色々調べましたが分からずご教示願えませんでしょうか。
    宜しくお願い致します。

    #47571

    DRILL LANCER
    モデレーター

    トップページを1カラムにする場合はスライダーブロックを使ったほうが良さそうです。
    手順としては・・・

    ①スライダーブロックを使用した固定ページを作成
    ②外観 > ウィジェット の「トップページコンテンツエリア上部」に「VK 固定ページ本文」ウィジェットを設置
    ③②の「VK 固定ページ本文」ウィジェットで①の固定ページを呼び出す

    #47596

    masako.s
    参加者

    ご教示ありがとうございます。
    色々と試してみたのですが、スライダーブロックは画像の上に文字を書く機能が見つからないのですが、画像の上に文字を書くことは出来るのでしょうか?

    スライドショーでは文字の位置を下にするCSSはどの様にして書くか分からなくて・・・色々と書いてみたんですが、上手くいかず・・・・可能ならご教示いただけますと幸いです。

    #47604

    ls-t
    参加者

    こんばんは。
    ・「Lightningトップページスライドショー」を使用
    ・「スライドタイトル」「スライドテキスト」のみ記入(ボタン不使用)
    以上の条件の場合、追加CSSに下記コードを追加でどうでしょうか?

    .slide-text-set{
    		position:relative;
    }
    .slide-text-title{
    		position:absolute;
    		bottom:100px;
    		right:40px;
    }
    .slide-text-caption{
    		position:absolute;
    		bottom:70px;
    		right:40px;
    }

    slide-text-titleがスライドタイトル、slide-text-captionがスライドテキストです。
    それぞれbottomで下からの距離を、rightで右からの距離を指定しています。
    画面サイズが変わる場合やテキストの長さによって微調整が必要になると思うので、こちらは適宜@madia等を併用していい感じの数値に調整してみてください。

    #47618

    masako.s
    参加者

    ありがとうございます。
    このCSSで上下の設定が可能になりました。
    ご丁寧な解説付きでとても分かりやすかったです。
    誠にありがとうございました。

    .slide-text-set{
    position:relative;
    }
    .slide-text-title{
    position:absolute;
    bottom:100px;
    right:40px;
    }
    .slide-text-caption{
    position:absolute;
    bottom:50px;
    right:40px;
    }

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