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

「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文を追加します。

if ($home_option == 'carrtitle'){
    include('home_carrtitle.php');
    exit;
}

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

             include('owlTop3.php');

を

             include('owlTopTitle.php');

にするだけです。

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

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

// OWLカルーセルトップページに３つ画像を入れる用
#owl-demo .owl-item div{
  padding:5px;
}
#owl-demo img{
  display: block;
  width: 900px;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

// タイトル文字を乗せる
#owl-demo {
    position: relative;
}
#owl-demo .owl-item .item p{
    position: absolute;
    left: 0;
    bottom: 0.1em;
    color: #fff;
    margin: 0;
    padding: 5px 5px 5px 5px;
    width: 890px;
    background: #000;
    filter: Alpha(opacity=70);
    opacity: 0.7;
}
#owl-demo a {
    text-decoration: none;
}
#owl-demo a:hover p{
    text-decoration: underline;
}

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

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

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

  <div class="item"><a href="<?php echo $owlArray[0][1];?>" class="titletip"><img src="<?php echo $owlArray[0][0];?>" alt="<?php echo $owlArray[0][2];?>"><span><?php echo $owlArray[0][2];?></span></a></div>

だったところを

  <div class="item"><a href="<?php echo $owlArray[0][1];?>"><img src="<?php echo $owlArray[0][0];?>" alt="<?php echo $owlArray[0][2];?>"><p><?php echo $owlArray[0][2];?></p></a></div>

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

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

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

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

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

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

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

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

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

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