こんにちは！
りょうへい(@ryoheihobozero) です。
今回は、りょうへいにしては
ちょっと珍しく、リア友の友人に
当サイトを見てもらったんですよ！
彼とのつきあいは高校生くらいからの
長い付き合いで、絵を書くのが好きな彼は
かなり勉強してそっち方面では一流の大学を出て
本職デザイナーになったようなやつなんです。
（どちらかというとアナログ人間）
そんな彼にサイトを見せてみたんです。
彼は現在、スキルアップを繰り返した結果
なぜかスマホアプリ開発の会社にいてｗ
最近はUI/UXがどうの～
なんて言うような感じになってて
意外性がちょっと面白いんですがｗ
いろいろとウェブサイトの構造なんかにも
詳しくなっているようで。
当サイト『ほぼゼロ』見せたら即答で
とりあえずトップに横スライダーがあったほうがいいよ！
なんて助言をいただきました。
内容については彼の興味というか
理解するところでは無いから
特に無しでしたが (^^;
まあ、それは良しとしてｗ
こんな風に誰かから
ご意見をいただけるというのは
とても貴重ですよね♪
そんな貴重なご意見だから
ぜひとも実装して実現させたいところ！
なんですが…
うーん、はたして、どうやるのか…(?_?)
よく判らないようなことをおっしゃる…ｗ
なので、ちょっと調べてやってみました♪
Contents
横スクロールするスライダーを実装するための方法をリサーチしてみた
WordPressテーマによっては
テーマに内蔵された機能で簡単に
実現出来るような場合もあるようでした。
他にもいろいろリサーチしてみて
結果的には、プラグインで試みたら
簡単に実現できて見栄えもそれなり！？
ちょっといい感じになったのでご紹介します♪
トップページ上部に横スライドのメディアギャラリーを追加したい
りょうへい的にも最近は
トップページが寂しいというか
縦に並ぶレコメンド情報ばかりで
ちょっと飽きてきたところでしたので
見た目の変化を楽しめる良い機会でした♪
当サイトは、スマホで表示すると
レスポンシブ対応だから
サイドウィジェットが
ページの最下部にまわってしまう仕組みです。
そうなると、ページ下部に回った
サイドウィジェットなんて
ほぼ誰も見てもらえなそうなので(^^;
スマホからのアクセスにもレコメンド表示できる！
というわけで、最初にお見せしちゃいますが♪
実装してみた様子はこんな感じ↓
投稿一覧のサムネイルよりも
大きくスライダーでアイキャッチ画像を
横スライド表示させることができました♪
とりあえず、どうやってコレを導入したのか！？
さっそく解説してみますね♪
WordPressプラグイン Smart Slider 3 のインストール
はじめに注意事項をお伝えしておきます！ スライダーのプラグインは結構重いです！ 見た目が結構豪華になるのですが |
とりあえず、はじめてなので簡単そうなプラグインで実装しちゃいました。
『Smart Slider 3』で検索してインストール＆有効化します♪
プラグインを有効化すると
WordPress管理画面の最上位階層に
『Smart Slider』の設定項目が表示されるので
そちらから設定を開始します！
Smart Sliderを設定してみる
設定画面を開くとこんな感じです↓
まず最初に『NEW SLIDE』をクリックして
新規に自分用スライドを作成します。
スライダーに表示させる画像を登録しよう
スライダーに表示させるイメージを
メディアライブラリから画像を選択して追加できます♪
過去のメディアからアイキャッチ画像を選択していきました。
結果的には軽量化を試みたので
スライドは５，６個にしましたが
はじめは試しに作成することになるので
多めに選んでみてもOKですよ。
画像を選定したら投稿記事のリンクを設定する
スライド表示される画像をクリックしたら
記事に飛べるようにURLリンクを各画像に設定していきます♪
各画像を開いてURLを設定する欄があるので
そこに記事のパーマリンクを貼りつけるだけでOKです。
その他各種設定も一気にやってみた
Smart Slider 3 の設定メニューは
いろいろと項目がありますが
結構視覚的に何を設定するのかが
とてもわかり易いのが特徴です♪
けっこう痒いところに手が届く細かい設定が可能でした！
画像の手動スライド用矢印ボタンの設定
上の画像では自動スライダーとは別に
マウスポインタなどで画像を左右に
操作できる矢印マークの設定を行っています。
矢印を表示させる位置もお好みで調整可能なので
アイキャッチ画像に記事タイトルを記載している
場所などを避けるように配置したりも可能です。
スライダー表示させる画像のスタイルの設定
りょうへいの場合は初期の記事だと
アイキャッチ画像のサイズ仕様が
まちまちだったりするので(ここで後悔しましたｗ）
画像をフィット表示を選択したら
いい感じに拡大表示されるのでぴったりでした。
また、アイキャッチ画像自体に
記事タイトルなどを入れていない場合は
テキストでキャプションを追加することもできます。
りょうへいの場合は画像に直接
記事タイトルも表記しているので
無しを設定しました。
どんなWordPressサイトでも
マッチできるように作られていて
けっこう親切です♪
画像の登録枚数や移動もできるドットマークの設定
こちらは先程の矢印と似ていますが
ネットショップのトップスライドなどでも
こういう表示がよくありますよね♪
アレを表示させることもできますので設定しました。
りょうへいの場合はアイキャッチ画像に
被ってドットが表示されるとイマイチだったので
最終的にはスライダーの外側に配置しました。
画像の外側に設定する場合も
スライダーの上でも下でも
設定可能でマジ親切♪
スライダー画像の表示サイズの設定
この項目の設定次第で
スライダー自体のサイズを
お好みに設定できます♪
小さいスライダーも作ることができるので
ネットショップのサイドウィジェットにも
けっこうよさげです♪
りょうへいの場合は結局８００くらいに設定しました。
設定が完了したらCSSに貼り付けるコードを取得してコピる
だいたい設定ができたら
実際に表示させてみましょう♪
Smart Slider 3のメニューの中に
PUBLISHという項目があるので
そちらを開くと右上にphpコードが表示されます！
こちらをコピーして
テーマのCSSに貼り付けるだけで
設定したスライダーちゃんが表示されます！
うーんワクワクします♪
PHP Codeをとりあえずheader.phpに貼ってみた♪
りょうへいの場合はトップに表示させたいので
なにも考えずにとりあえずｗ
header.phpに貼り付けてみました♪
りょうへいの場合は小テーマがあるので
そちらのテーマヘッダーにコピペしました。
スライダーが表示されたか確認しよう！
実際のページを開いてみると….
ちょｗｗｗ
デカすぎ！
ブログのヘッダー画像を凌ぐ大きさになっちゃいました(^^;
これはやりすぎなのでちょっとコードコピペする先を考え直すことにしました。
でも、これくらいド派手にｗ
スライダーを設置したい場合には
header.phpに設定してみるのも
ありかもしれません(^^;
でかいスライダーにしても上の画像のような
さらに中にサムネイルを表示させるような
設定もありますので、場合によっては活用できそうです。
そして、せっかくコードまで貼ったので
Smart Sliderの設定を弄って変化をチェックしてみました。
画像を小さくするとどんな感じ？？
そうしたら、横が余りました。
かなりの余白感ｗｗｗ
あと、スライダーの下側に影も付けてみました♪
設定はこんな感じ↓
影の濃さもいろいろあるので
背景色に合わせて調節できます♪
とりあえず、ヘッダーに設定した場合の
実験はこのくらいにしますか…(^^;
PHPを挿入する場所を試行錯誤
りょうへいの場合は
header.php に挿入したらデカすぎだった。
サイドウィジェットもあるので
そちらの兼ね合いも考えた結果
itiran.php にSmart Sliderのコードを追加してみました！
itiran.php であれば、記事一覧の幅なので
サイドウィジェットの邪魔もしなそう♪
というわけで、先程コピペしたコードを
itiran.phpの先頭の方に引っ越しです♪
すると….
どうなったのか！？
実際のページがコチラです↓
おおお！
りょうへいが理想としていた感じなりました！
記事一覧の幅いっぱいを利用して
スライダーが表示されるました♪
なんとか実験成功です！
スマホで見るとどんな感じかチェックしてみた
りょうへいの場合はレスポンシブテーマなので
スマホ表示するとブログはサイドウィジェット無し
といいますか、下に回る表示になります。
なので、スライダーはスマホ画面横幅いっぱいに表示されました！
スマホ表示でもいい感じ！
りょうへいの自己満足もこれで満たされた訳でした♪
ひとまず目的が達成されたのでメデタシメデタシです(^^;
まとめ
Smart Slider 3 を使った メディアのスライダー表示はいかがでしたか？
りょうへい的には理想の見た目をゲットできたのでよかったのですが。
やはり、スライダーというのは重いですね(^^;
その後は、軽量化を図るために、イメージの枚数を
かなり絞ったり、解像度を小さくしてみたりと
多少試行錯誤している状態です。
とりあえずは飽きるまではスライダー表示をしていこうと思います♪
こんなのやりたかった！
という方のナニかの参考になったらりょうへい嬉しいです！
りょうへい、ブログランキング参加中です♪
記事を読んでみて役にたった！
なんて思ってもらえたら
クリック応援よろしくお願いしますm(__)m
ブロトピ：ブログ更新しました♪
ブロトピ：今日のブログ更新
ブロトピ：wordpressのカスタマイズ
コメントを残す