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

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

Lightningのスライダーの動き

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

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

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

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

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

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

テーマLightningを使って実際のWebサイトを作っています。いくつか変更したいことがあるので、子テーマを作りました。作りました、といってもLightningは子テーマが用

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

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

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

を、

このように変更します。

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

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

で、囲んであります。

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

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

を追加します。

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

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

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

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

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

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

slider_string

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

Lightning関連記事一覧

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

毎月行っている八王子WordPressもくもく会ですが、今回コーポレートサイトを作るときにかっこよくて使いやすい(んじゃないか?)と思われるテーマがあるという噂を聞きました。

「コーポレートサイトにもかっこいいテーマ Lightning でコーポレートサイトを作るーその1」では、Lightningというテーマについての説明と、インストール、スライダー

Lightningというテーマを使うとコーポレートサイトがいい感じに作れる、ということで今まで2回に渡ってカスタマイズの方法を書いてきました。Lightningのコーポレートサ

Lightningというテーマはコーポレートサイトを作る際に簡単に「ちゃんとした感じの企業サイト」が作れます。そのインストールやカスタマイズについて、今まで3回にわたってblo

テーマLightningを使って実際のWebサイトを作っています。いくつか変更したいことがあるので、子テーマを作りました。作りました、といってもLightningは子テーマが用

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

[Amazon sponsored link] WordPress デザイン 関連本
兎本美佳

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

コメント

  1. nakatani より:

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

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

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

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

      .slide_title {
      color:#f00;
      }

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

  2. Kazuaki Konuma より:

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

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

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

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

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

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

トップへ戻る