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

この記事は約6分で読めます。

テーマ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)。

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

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

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

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

slider_string

こんな感じです。この大きさや位置を変えたいときは 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 デザイン”]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ 全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. nakatani より:

    初めまして。
    こちらの解説を参考にワードプレスでコーポレートサイトを作ろうと勉強させていただいております。

    スライダーに表示させた画像タイトルの文字色を変えることは可能でしょうか。
    四苦八苦してみましたがわからず・・・。
    可能であれば教えていただけると助かります。
    手探りでHP作りながら、HTMLとCSSの最低限の勉強が必要だなと感じています。

    • 兎本美佳兎本美佳 より:

      nakataniさん、おはようございます。私も久しぶりにやってみて四苦八苦しました(^_^;)。ちょっと記述に不明点とかありますねー
      色の変更ですが style.css に

      .slide_title {
      color:#f00;
      }

      こんな風に入れると色が変更できます。この場合は色が赤になります。お試しください(^^)/

  2. Kazuaki Konuma より:

    スライダーの表示時間を変更するを調べていましたらこちらにたどり着きました。
    兎本さんのポリシーの通り、素晴らしすぎるぐらいに丁寧にかかれており、誰でもわかるように(少し知識があればでしょうが)書いているところが女性らしいなぁと感心しました。
    昨今自分の技術を見せつけるだけで、「俺できるぜ!」だけをアピールしている記事が多く存在し、その通りにやってみたら余計壊れた。(´;ω;`)ウゥゥ

    自慢だけするなら適当に書くなよ・・・。

    そんな記事が多い中、何度も言いますが説明が丁寧で素晴らしすぎます。文章まとめ方も読みやすかったです。
    参考になりました。
    また、途中、途中でのコメントが何をしているかよくわかりました。
    ここのファイルを開いてこう書き直せばいい!みたいな感じではないところがどういう理由で何をしているかがよくわかり参考になりました。

    ありがとうございました。

    • 兎本美佳兎本美佳 より:

      Kazuaki Konumaさん、こんばんは!サイト移転してしまったので見ていただけるかどうか…心配ですが… たくさん褒めていただきありがとうございます(^^)/ とてもとてもうれしいです。サイト移転のため、しばらく書けていませんでしたがこれを励みにまたコツコツと書いていきたいと思います!

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。