OWLカルーセルで作ったスライダーにタイトル文字を表示する

Image

「OWLカルーセルで最新記事から画像をスライダー表示する」で、OWLカルーセルを使ってスライダーを作ってみました。そのとき、タイトルも表示するようにはしたのですが、一覧のタイトル表示と同じもので文字も小さかったので、もっと目立つようにタイトル文字を入れてみました。

構想:大きな画像の上にタイトル文字を半透明の黒い背景の上に表示する

よくある感じなのですが、画像の上に半透明でバックカラーを表示してその上にタイトル文字を表示したいと思います。やり方は…わからないのでググってみました。

こちらのページを見つけました(^^)/

画像の上に半透明の帯とテキストを表示 Salty WordPress

わかりやすかったのでこちらのCSSを参考にさせていただきました。

OWLカルーセルで作ったスライダーにタイトルをのせるhome.phpを作る

まだ、本番サイトのトップと入れ替えるところまでには至らないと思うので「[ryus_another_post_link id=3554]」でやったように別のhome.phpを作って確認します。

「[ryus_another_post_link id=3562]」で作ったhome_carr.phpをコピーしてhome_carrtitle.phpを、owlTop3.phpをコピーしてowlTopTitle.phpを作ります。

home.phpではこれが呼び出せるように、get_headerの上に以下のif文を追加します。

home_carrtitle.phpでは変更するのは一カ所だけで、

にするだけです。

タイトル文字を表示する部分を修正してみる

サンプルサイトにあったCSSを子テーマのstyle.cssにコピーして、.sampleという部分を #owl-demo に変更しました。

タイトル文字を下から0.5emあけて表示していたところを少し空きすぎていたので0.1emに縮めました。

タイトル文字の幅を900pxにしたかったので、OWLカルーセルで表示する画像の幅も900pxにしました。

コピーしたowlTopTitle.phpを開き、

だったところを

としました。タイトルをspanで囲っていたのをpで囲むようにして、タイトルチップを表示していた class=”titletip” という部分を削除しました。これを3画像分修正します。

今までのカスタマイズでは、カーソルを載せたときに紫背景のポップアップに白い文字でタイトルが出ていました。

Image

それが、このようにカーソルを載せなくてもタイトルが黒の透明背景に大きな文字で表示されるようになりました(^^)/

Image

やり方がわかったのでちょっとだけアレンジしてみました

出し方が分かったので、少しアレンジしてみます。タイトル文字の表示を 左寄せ→右寄せ→左寄せ と交互にしてみます。交互にしたかったので最新3つではなく最新4つの表示にしました。

こちらで見ることが出来ます。

OWLカルーセルのスライダーにタイトルを乗せて、左寄せ、右寄せを交互にしたサンプル
https://usortblog.com/?home_option=carrtitle

これでだいぶトップページの修正もイメージに近づきましたのでそろそろリニューアルを考えようかなぁと思っています(^^)/

もしちょっと触ってみたいという場合はこちらのファイル(home_carrtitle.zip)をダウンロードしていじってみてください。zipには以下のファイルが入っています。

home.php
style.css
home_carrtitle.php
owlTopTitle.php

兎本美佳

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

シェアする

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

フォローする

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

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

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

トップへ戻る