この記事は2015年10月24日に書いたもので、内容が古い可能性がありますのでご注意ください

スライドショーを作ってみた。WordPressみたいにプラグインが使えないのでjQueryで。

つかjQuery版に変えたのはちょっと前なんですけど。今日は画像ごと取り替えて設置場所も変えまして。

slide
参考:[楽天][jQuery]サムネイル表示、カルーセル表示も出来る軽量スライダー FlexSlider.js

以前は左から右までフルにつかった横長のバナーだったのを、横幅を縮めて、右カラムに入れてみた、という話。

とりあえず3面だけ。
4面目の画像を作れば、サムネイルの右端の余白が埋まるんだけど、力尽き…

テスト中はうまくできたと思ったけど、実際にトップページに入れてみたらちょっと大きすぎた。
サムネイルを含めた大きさを今のメイン画像のサイズで収めるつもりだったのに、なんか勘違いしてサイズを間違えたみたい…(~_~;)

完成直後にふとニッセンのショップを見たら、ちょうど同じようなスライドがあって、サイズはもっと細長くて画像の中身も超シンプル。
「あったかインナー」「冬コーデ」とか、文字はほとんどタイトルしか入ってなくて、用件のみという感じで、飾り気はないけどとても分かりやすい。
目的地に一直線(1クリック)という感じだ。

うちのバナーは文字が多すぎて、きっとみんな読めない(~_~;)
作る前に気づくといいんだけど、なぜか作ったあとでないとこういう参考になるものって目に入ってこないんだから仕方がない。

まあ、だんだん修正していくとしよう。
色ももっとコントラストがはっきりしてたほうが、見分けやすいだろうし。

とりあえず、このスライドが自由に変更できるようになると、うんと機動性が増すので、デザインに凝るんじゃなくて、どんどん、新商品とかを入れる場所にしたいので。

がんばろ!

スポンサーリンク

シェアする

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

フォローする

スポンサーリンク