私はこれまでずっと無料の素晴らしいワードプレステーマ「Stinger」を使ってきたのですが、最近「STORK（ストーク）」という1万円（税抜）のテーマが気になってます。
（この記事を書いてる時点では、Stinger plusをかなりカスタマイズしたテーマを使ってます。）
で、結構ストークに近い見た目にカスタマイズしたりもしてるのですが、その一環としてトップページに記事をカルーセルで表示したいと思うようになりました。
カルーセルというのは、スライドショーみたいなやつのことです。ストークを見た方が早いと思うのでリンクを貼っときます。2017/6/16現在ではこのブログのトップページにもカルーセルがあります。（ただ、パソコンからしか見れません。）
で、これは実際アクセス対策的にはさほど効果ないみたいな話も見かけるのですが、とりあえず見栄えがいいから導入してみたくなったわけです。
で、導入しました。「Advanced post slider」というプラグインを使って。
ただ、導入したはいいものの、次は「一瞬だけ縦に画像が並んで表示される」現象に悩まされていました。ですが、非常に苦労した挙句、執念で解決しましたので、その方法を解説します。私がこの記事を読みたかった。
（このプラグイン以外でも同様の症状は出るようです。）
Advanced post slider（bxSlider）で画像が一瞬縦に並んで表示されるのを直す方法
一瞬縦に表示というのがどういうことかというと…
こんな感じです。実際にはもっと縦に連なってます。
上の画像はほかのバグ風な現象も同時に起きてるからわかりづらいですね。とりあえず、「一瞬画像が縦に並んで変な風に見えてしまい、その後にカルーセルになる」という挙動になって困っていたのです。
変な現象の原因
あまり詳しくないのですが、「Advanced post slider」を含めて、カルーセルやらスライドショー系のプラグインではよくある現象のようです。
jQueryというものを使ってカルーセル形式にしているのですが、jQueryよりも先に画像を読み込んでしまうため、まず普通に画像が表示されてその後にjQueryによりカルーセル状態になる…という挙動になるようです。
ページ読み込み直後はjQueryが間に合ってないというわけですね。
解決方法
ではどうやって解決するかというと、
- ページを読み込んですぐは画像を非表示にする
- 少ししてjQueryが読み込めてカルーセルになった頃に画像を表示
という手法を取ります。
応急措置感がありますが、これで我慢してください。画像の表示を遅らせるといっても、1秒～1.5秒くらいでOKのようです。
具体的な方法
で、具体的にどうするかというと、「Advanced post slider」を編集します。いじります。カスタマイズします。
なので…
ここから先は自己責任でお願いします。プラグインが使えなくなったり、ブログがおかしくなる可能性があるので、バックアップを取ってからやりましょう。
では、簡潔に説明します。
ちなみに、関係あるかわかりませんが、私は「Advanced post slider」の「Template1」を使用しています。環境によっては下記方法をとっても直らない人もいるかも知れません。
１、「advanced-post-slider/advps-style.css」を編集
「advanced-post-slider/advps-style.css」を開いて、一番下などに下記を追記します。
.bxSlider {
display: none;
}
.advps-slide-container {
display: none;
}
「display: none;」というのは、画像を非表示にする記述です。「.bxSlider」に関しては結構いろいろなサイトの解決法で見かけたのですが、「advps-slide-container」は自力で見つけました。
こっちも非表示にしないといけない、というのが一番の曲者でした。
ちなみにこれだけで終わると、ただなにも表示されないだけとなります。それでは意味がありません。
なので、次。
2、「advanced-post-slider/advanced-post-slider.php」を編集
次は「advanced-post-slider/advanced-post-slider.php」を開きます。
そうしたら、その中に「jQuery(document).ready(function($){」という記述があるはずなので、それを探してください。
見つけたら、「jQuery(document).ready(function($){」の下に、
jQuery('.bxSlider').fadeIn(1000);
jQuery('.advps-slide-container').fadeIn(1000);
上記を追記します。
わかりやすいように、もう少し前後の記述も含めると、下記のようになります。
<div id="advps_container<?php echo $sldshowID;?>" class="advps-slide-container" style="overflow:hidden;max-width:<?php echo $container['advps_sld_width'];?>px;<?php if(isset($container['advps_centering']) && $container['advps_centering'] == 'yes'){echo 'margin:auto;';}?>">
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('.bxSlider').fadeIn(1000);
jQuery('.advps-slide-container').fadeIn(1000);
$('#advpsslideshow_<?php echo $sldshowID;?>').bxSlider({
useCSS:<?php if($slider['advps_transition']=='css3'){echo 1;}else{echo 0;}?>,
slideMargin: <?php echo $slider['advps_sldmargin'];?>,
speed: <?php echo $slider['advps_speed'];?>,
<?php if($slider['advps_slider_type'] == 'carousel' || $slider['advps_slider_type'] == 'ticker'){?>
「fadeIn」という単語が見えるかと思いますが、これによって、画像を遅れて表示させます。
徐々にフェードインで現れるので、遅れて画像が出てきても違和感が少ないです。
これで完了です。これだけです。
でも、この方法を探すのにめちゃくちゃ時間かかりました…。
ちなみに、「fadeIn(1000);」の1000の数字を変えると、フェードインにかかる時間が変わります。500なら二倍の速さで表示され、2000なら表示まで二倍の時間がかかるということになります。
参考にしたサイト
この解決法を見つけるにあたって、かなり色々なサイトを漁りました。ただ、結局どのサイトも私の場合はドンピシャの解決法はなく、試行錯誤となりました。
「Advanced post slider」以外のプラグインだともう少し楽なのかも知れません。
bxSliderで画像が一瞬縦に並んでしまう問題の解決方法
CSS、jQueryが後から読み込みまれて要素が一瞬表示されてしまう時の対処
スライド系jQueryプラグイン(slick等)で一瞬表示が乱れるのを防ぐ方法
似た症状に困っていて、私が紹介した方法でも解決できない場合は、私はあまり詳しくないので、上記の様々なサイトを見るといいと思います。それぞれ微妙に違う解決法が書かれているので、試行錯誤して頑張る感じになるとは思いますが…。
とりあえず、これによって今このブログのトップにはカルーセルが表示されています。
カルーセルのアクセス効果など
ちなみにこのカルーセル記事方式。見た目にはいいですが…
みんなスライドする動きや矢印に注目してしまってコンテンツ自体に目がいかないという研究があるようなので、その内やめる可能性はあります。矢印じゃなくて各コンテンツの内容がわかるラベルにすればいいなんて記事もあります。
切り替えの矢印は、クリックしたら何があるのか何が起きるのかを想像できないため、ユーザーは無視しがちです。
矢印が伝えてているのは、せいぜい「まだ他にもある」くらいです。
結果として、見た目にもっと内容がわかる別の要素に意識が向きクリックされません。
ただ、見栄えがいいので、ブランディングには効果があるなんて話もあります。
商品を並べるショーケースとしてカルーセルは適切とはいえませんが、ブランディングという目的では効果的です。
まあ確かにそんな気はしますよね。いい写真ありきですが。
まとめ
というわけで、このブログの場合は、普通に記事をカルーセルで表示するよりも、音楽素材やら自主映画等のムービーページ、もしくはグルメレビュー集とかのコンテンツを表示させると効果がありそうだと思っています。
なので、とりあえずは試しでそうしてみようかなと思います。
▲とりあえずそうしてるの図
というわけで、皆さんも工夫しながらカルーセル式を導入するとよいのではないでしょうか。
最悪、どうやっても画像が一瞬縦に並ぶ現象が解決できなかったら、そんなに大きな効果は見込めない可能性も高いのでいっそ導入をやめるのも手だと思います。
やっぱり、ブログは見た目も大事ですけど、一定以上デザインがよければ後は中身が重要ですからね。書き方を学ぶ方が重要かも知れません。
カスタマイズするならしっかり勉強するのが近道でしょうね。