テーマLightningのカスタマイズー子テーマを作ってスライダーの上に文字を表示する

テーマLightningを使って実際のWebサイトを作ったときに、スライダーの上に文字を表示したいなと思いました。スライダーはトップページに大きく表示されるのですが、スライダーが何を意味しているのか？を文字を使って知らせたいと思いました。

Lightningのスライダーの動き

Lightningのデフォルト状態だと、

このように画像タイトルやリンクを指定してあっても、

単にリンクがあるということがわかるだけで、どんなページに飛ぶのかはこういう画像の場合はわかりません。タイトルの文字が入っているような画像を作ればいいのかと思いますが、既存の画像を利用する場合などなかなか面倒です。

そこでこの画像に、画像タイトルを載せたらいいのではないか？と思いました。

子テーマを作って、カスタマイズする

テーマにカスタマイズを加えますので、子テーマを使います。子テーマについては、

[ryus_blogcard url=”https://usortblog.com//lightning-kotheme-slider-interval/”]

に書いてありますので、こちらを参照してください。

子テーマフォルダ名を lightning_child_umoto と仮にします。そのフォルダに lightning　フォルダから、module_slide.php をコピーします。

module_slide.php はスライダーを表示している部分のPHPです。これを開いて、69行目付近の

            <img src="<?php echo esc_attr($top_slide_image_src); ?>" alt="<?php echo esc_attr($top_slide_title); ?>">

を、

            <div id="slider_position" style="position:relative">
            <img src="<?php echo esc_attr($top_slide_image_src); ?>" alt="<?php echo esc_attr($top_slide_title); ?>">
            <div class="slide_title"><?php echo esc_attr($top_slide_title); ?></div>
            </div>

このように変更します。

変更した内容についての説明は、こんな感じです↓

<div class="slide_title"><?php echo esc_attr($top_slide_title); ?></div>

で、カスタマイズで指定したタイトル部分を表示させています。表示位置を決めたいので、

<div id="slider_position" style="position:relative"></div>

で、囲んであります。

↑変更した内容についての説明、終わり

slide_title というクラスに対してcssを指定します。子テーマのstyle.cssに、

@media (min-width: 300px) {
    .slide_title {
        background-color:#fff;
        opacity:0.8;
        text-align:center;
        font-size:18px;
        position:absolute;
        top:40px;
        left:80px;
        padding:5px 2px;

    }
}
@media (min-width: 500px) {
    .slide_title {
        background-color:#fff;
        opacity:0.8;
        text-align:center;
        font-size:18px;
        position:absolute;
        top:90px;
        left:180px;
        padding:5px 2px;

    }
}
@media (min-width: 660px) {
    .slide_title {
        background-color:#fff;
        opacity:0.8;
        text-align:center;
        font-size:18px;
        position:absolute;
        top:140px;
        left:180px;
        padding:5px 2px;

    }
}
@media (min-width: 770px) {
    .slide_title {
        background-color:#fff;
        opacity:0.8;
        text-align:center;
        font-size:18px;
        position:absolute;
        top:150px;
        left:250px;
        padding:5px 2px;

    }
}
@media (min-width: 920px) {
    .slide_title {
        background-color:#fff;
        opacity:0.8;
        text-align:center;
        font-size:30px;
        position:absolute;
        top:170px;
        left:320px;
        padding:10px 5px;

    }

}

を追加します。

スライダーは画面の幅が縮まると連動して縮まりますので、それぞれに合わせた位置にタイトルが出るようにしました。

今回の場合、割と濃いめの写真の上に文字を表示するので文字が見えやすいように　background-color を白（#fff）にして、若干透明度を付けています（opacity:0.8）。

カスタマイズの結果を確認する

これで表示させてみると、

このようにタイトル文字がスライダーの写真に載って見えるようになりました。

幅を縮めてみました。大きさによる変動は、

こんな感じです。この大きさや位置を変えたいときは sytle.css に追加したcssを好みの感じに修正してみてください(^^)/

Lightning関連記事一覧

Lightningについて書いた記事をまとめておきます

[ryus_blogcard url=”https://usortblog.com//lightning-corpo-1/”]
[ryus_blogcard url=”https://usortblog.com//lightning-corpo-2/”]
[ryus_blogcard url=”https://usortblog.com//lightning-corpo-3/”]
[ryus_blogcard url=”https://usortblog.com//lightning-corpo-4/”]
[ryus_blogcard url=”https://usortblog.com//lightning-kotheme-slider-interval/”]
[ryus_blogcard url=”https://usortblog.com//lightning-slider-string/”]

[amazon_searchlink search=”WordPress デザイン”]