みなさん、
いつも集まれ名刺の森を応援していただき有難うございます。
また、私のような素人が作成しているホームページを見ていただき有難うございます。
「こんな名刺があれば誰もが名刺を気軽に持ち、本当の仲間がたくさんできるのはないか？」
と思って作った集まれ名刺の森ですが、想像していた以上に仲間が集まり、いろんな楽しいイベントができはじめたので、ホームページの構成や作成が後回しになっていたり、ツールが上手いこと使えていないので、みなさんからいろんなアドバイスを頂きたいと思っているのが本音です。
一方でこのサイトを作ったときに私が得た知識などを残しておけば、私のように困っている人にとって少しでも参考になるのではないかと思い、議事メモレベルにはなるかと思いますが書き出すことにしました。ご参考ください。
Ultimate Responsive Image Slider
今回は、写真をスライドさせて見せるプラグインを探して、何個かググった結果、「Ultimate Responsive Image Slider」が簡単そうだったので現時点では、それを使っている。ただ、ググったときにインストール方法や、各項目の簡単な説明はあったが、「で？具体的にどう見えるの？」という疑問が残ったままプラグインしたので、このページでは、「具体的にどう見えるの？」を中心に書こうと思っている。プラグインする前に少しでも参考になればと･･･
設定項目
とりあえず、設定項目がたくさんあり、このあと設定を変更していくので、わかりやすいように番号と日本語をつけてみました。
| No. | 英語 | 日本語 |
|---|---|---|
| 1 | Display Slider Post Title | スライダのポストタイトルを表示 |
| 2 | Display Slide Title | スライダのタイトルを表示 |
| 3 | Slider Title Color | スライドタイトルの色 |
| 4 | Slide Title Background Color | スライドタイトルの背景色 |
| 5 | Display Slider Description | スライドの説明を表示 |
| 6 | Slide Description Color | スライドの説明色 |
| 7 | Slide Description Background Color | スライドの説明背景色 |
| 8 | Auto Play Slide Show | 自動再生スライドショー |
| 9 | Slide Transition | スライド遷移 |
| 10 | Auto Play Slide Speed | スライダーの自動再生速度 |
| 11 | Slider Order | スライドオーダー |
| 12 | Distance Between Slide | スライド距離 |
| 13 | Show Thumbnail | サムネイルを表示 |
| 14 | Thumbnail Position | サムネイルの位置 |
| 15 | Selected Thumbnail Style | サムネイルスタイル |
| 16 | Selected Thumbnail Style Color | サムネイルスタイル色 |
| 17 | Thumbnail Resize | サムネイルのサイズ変更 |
| 18 | Slider Width | スライダの幅 |
| 19 | Slider Height | スライダの高さ |
| 20 | Slide Scale Mode | スライドスケールモード |
| 21 | Side Auto Scale Up | スライドオートスケール |
| 22 | Show Navigation Arrow | ナビゲーション矢印 |
| 23 | Navigation Color | ナビゲーションカラー |
| 24 | Show Navigation Bullets | ナビゲーションポインタ |
| 25 | Navigation Bullets Color | ナビゲーションポインタの色 |
| 26 | Full Screen Slide Show | フルスクリーンスライドショー |
| 27 | Fonts | フォントスタイル |
| 29 | Custom CSS | CSSで手動変更 |
初期値(設定を変更していたいときのスライドショー)
さっそくあつまれ名刺の森の仲間の写真を使ってUltimate Responsive Image Sliderに写真を何枚か追加したときのスライドショーです
Ultimate Responsive Image Slide_初期値
いかがでしょうか？ポイントはタイトル(ここでいうUltimate Responsive Image Slide_初期値)が上に表示され、スライドショーの下にサムネイル(スライド写真の小版)と●が表示されています。
横を固定し、縦を自動
いろいろ気になりますが、表示が横：1000、縦：500に固定されており、ちゃんと表示されていないので、横幅に合わせて、縦は自動に変更してみます。
変更箇所は、
No.19 スライダの高さ：Auto Height
Ultimate Responsive Image Slide_縦自動
サムネイルを小さく
縦を自動化することで、写真がきちんと表示されましたね。次にスライドショーの下サムネイルが大きく感じます。パソコンで観る場合は、きもち大きいくらいと思うが、スマホでみるとかなり大きいと思うので、サムネイルを小さくします。
初期値は縦:120、横:120になっていますので、それを半分の縦:60、横:60にしました。ついでに、サムネイルのスタイル色（サムネイルの枠の色）も黒から赤色に変更してみました。スマホでみても良い感じかも♪
No.16 サムネイルスタイル色：赤
No.17 サムネイルのサイズ変更：60 x 60
Ultimate Responsive Image Slide_サムネイルを小さく
サムネイルを上にして、ポイントに変更
あつまれ名刺の仲間の写真はもう飽きたと思うので、今度はゴルフ場で。サムネイルのスタイルをポインタにしてみて、位置を上にしたらこんな感じでした。個人的には微妙かなぁ･･･。
No.14 サムネイルの位置：Top
No.15 サムネイルスタイル：Pointer
Ultimate Responsive Image Slide_サムネイルを上、ポインタに変更
サムネイルを非表示に
サムネイルを消してみた。ついでにタイトルも不要と思い消した。
No.1:スライダのポストタイトルを表示：×
No.13:サムネイルを表示：×
タイトル関係を変更してみた
ここからはタイトルを変更。わかりやすいようにまたあつまれ名刺の森の仲間の写真に変更。
No.1：スライダのポストタイトルを表示：×
No.2：スライダのタイトルを表示：✔
No.4：スライドタイトルの背景色：緑
スライドのタイトルと説明を表示
最後に、スライドのタイトルと説明を表示してみた。ただ、画面の真ん中に表示されるので顔写真の上にはかなり微妙ですね。
No.5:スライドの説明を表示 ：✔
設定としては、他にもまだあるけど、個人的にはこれだけ設定できれば十分と思っています。今回このようにアウトプットさせていただくことにより、「Ultimate Responsive Image Slider」をより深く理解できたことに感謝します。