スライダーについて。
最近のホームページは、スライダーが大活躍しています。トップページで横に動いたり、じわっと画像を変えたり、パタパタ動いてたりしています。
かっこいいし、会社の事業内容を紹介するのに、視覚的に訴えるというのは大変効果的です。もちろん、選んだテーマLightningはトップページにどーんと存在しています。
さて、画像を選んでカスタマイズからスライダーの設定をします。
………、画像が荒いというか、ボケボケ
気を取り直して、もう少しはっきりと映っている画像をセットして
………、ボケボケ
GIMPで画像を推奨サイズに加工して、画素数にも気を付けて、ビューアーでも確認して
………、ボケボケ
ごめんなさい、なめてかかってました。画像をセットするだけじゃだめでした。
ここから怒涛のスライダー画像加工です。
作ったサイズと変遷
- 1900×600 画像が画面いっぱいだとなんだかとても大きいので、枠を付けたりつけなかったり
- 1280×600 ちょっと小さめにしてみたり
- 960×300 もっと小さめにしてみたり
- 周りに背景と同じ色で余白を作ってみたり
- 縦長の画像をカルーセルにしたり
- スライダーに文字を重ねたり
- 文字を重ねただけだと、なんだかもったいない気がして、事業内容の説明にしてリンクを付けたり
写真の周囲に枠を付けたときは、GIMPでレイヤーに枠を作って、重ねました。オーバーレイと文字も同様です。枠のついた写真にオーバーレイが重なって、文字が浮かんでくるという動きは自動（アニメーション）ではなく、手動の力技スライダーになりました。背景色をどうしても、揃えたかった（カスタムCSSで指定しています）のと、大きさを整えやすかったのです。
さらに、少しするとGIMPで付けた枠がどうしてもダサ……、格好良くなく見えてきましたので、縦長の画像を並べることにしました。この時はCSSでキャッチの文言をスライダーに重ねて、文字の後ろをスライダーが流れるようにしました。おお、これはかっこいい、これでいこう！とつくり込んでも翌週には格好良くないなと思い始め、結局今の形に落ち着きました。
それと、せっかくのLightningテーマですが、スライダーは使わずVKスライダーを使用しています。
理由としては単純で、外観→カスタマイズからの修正ではなく、固定ページを編集で修正の方がしやすい気がするためです。
tm-e_kanrisya
