こんにちは、つばさ（@tsubasa123）です。
今日も今日とてちょっとおせっかいなカスタマイズネタをお届けします。といっても私が何かしたわけではないんですけどね、ちょっとした設定変更のお話です。今日は短めですのでお時間がありましたらお付き合いください。
きっかけはぺぺさん
200記事、すごいですね。おめでとうございます。
で、ペペさんは最近流行りのこどみすさんのスマホカスタマイズを導入されたようでして。いい感じにカスタムされておりますので、ぜひスマホから覗きにいってみてください。
これからこのデザインを見る機会が増えるのかな。
オプションとかどうですか
記事中、ペペさんはこんなことをポツリと。
ただ、現状ボクの場合、記事のタイトルが出てなくてアイキャッチ画像がただスライドするだけ・・・
たしかに、ちょっとシンプルかも。なので、オプションを変更してみてはいかがでしょうか？というご提案です。こどみすさんのカスタマイズコードをそのまま利用されているのであれば、おそらく
captions: false, /*スライダーの画像にタイトルを被せる場合はTRUE*/
この1行があるはずですので、これを
captions: true, /*スライダーの画像にタイトルを被せる場合はTRUE*/
このように、falseからtrueに変更すれば、imgタグのtitle属性で指定した文字が画像の上に表示されるようになります。
<ul class="bxslider"> <li><a href="#"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubasa123/20170514/20170514150755.jpg?1494742101" title="ここの文字が画像の上に表示されます。" alt=""></a></li> <li><a href="#"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubasa123/20170514/20170514150755.jpg?1494742101" title="ここの文字が画像の上に表示されます。ここの文字が画像の上に表示されます。" alt=""></a></li> <li><a href="#"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/t/tsubasa123/20170514/20170514150755.jpg?1494742101" title="ここの文字が画像の上に表示されます。ここの文字が画像の上に表示されます。ここの文字が画像の上に表示されます。" alt=""></a></li> </ul>
なんかちょっと崩れちゃってますがこんな感じ。タイトルを見せるだけでもグッと記事の紹介っぽくなると思います、ぺぺさん、よければお試しくださいな。
alt属性欲しいな、なんて
スライダー使ってるみなさん、共通してalt属性がないんですよね。細かいことなんですが、ちょっと気になりました。アクセシビリティ的なあれやこれや。詳しくは知りませんがあったほうがいいんじゃないかなと。
こどみすさん、カスタマイズ紹介記事のソースコードにalt属性をつけてもらえるともっと素敵な記事になるかと思います。お時間がありましたらご検討ください。
さいごに
オプション変えるだけなんで、リプで直接お伝えしてもよかったんですが、他にも同じような状況の方がいるかもわからんので簡単に記事にしました。まぁ、WEBに興味のある人以外、オプションの変え方なんて知りませんよね。
スライダーの導入方法に困ったら、
ケンヂさんの記事を参考にどうぞ。とてもわかりやすくまとまっていますので困ることはないかと思います。オプションについても参考記事を紹介してくださっていますので、そちらも合わせて目を通しておくといいかもです。
ではでは、最後までお付き合いいただきありがとうございました。