13/07/2015
先日、当教室で開発したワードプレステーマ「simpler」を使って、ビジネスサイトを制作中の生徒さんから、こんな質問を受けました。(すみませんsimplerのPRもしたかったので…) 質問)写真を自動スライドで流して表示したいのですがよいプラグインはありますか? 回答)ブログや Web サイトで画像を表示するスライダーのことですね。 質問)そうです!自動で画像が横にスライドしていくページです。トップページに使うのではなくて、物件の説明用なので、それぞれの写真の説明文やサムネールも同時に表示させたいのです。 回答)サムネールが必要ならば、とりあえず「マスタースライダー」でしょうかね。 ということで「マスタースライダー」を紹介しましたが、後日インストールしたが、設定項目がすべて英語なので、よくわからないとのことでした。 ということで、ここで簡単に説明しておきます。 画像をあまり使わずに説明しますので、マスタースライダーの設定画面を見ながら読み進んでくださいね。 サムネール付のスライダーができるプラグイン「Master Slider 」 スライダーは各種設定が可能です。 ・画像の自動スライドができます。 ・横幅の長さ調節ができます。 ・サムネイルが表示できます。 ・サムネイルの表示場所が選択できます。 ・画像の説明テキストが表示できます。 ・画像の説明テキストの表示場所が選択できます。 ・Slide duration継続時間(スライドの変移スピード)の設定ができます。 などいろいろと設定できます。 こんなスライダーを作ってみましょう! 最初の設定 まずプラグインを「Master Slider 」で検索して探し、インストールして有効化します。 通常の操作なのでインストール方法は省略します。 ダッシュボードに「Master Slider 」が表示されるのでクリックしさらに「Creiate New Slider」をクリックします。 「Sample Slider」が8つ表示されるので、左上の「Slider With Horizontal Thumnailes」を選択し「Cliate」をクリックします。 すると10枚のサンプル写真が入ったスライダーが自動で作成されます。 サンプルの写真を削除して自分で用意した写真に差し替えます。 下部に表示されているショートコードをスライダーを表示したいページに貼り付けます。 基本はこれで終了ですが、希望のスライダーに仕上げるために、つぎに詳しい設定方法を説明します。 スライダー設定画面 画面上に表示されている項目な中から次の3つのメニューを使います。 ■Slider settings スライダーセッティング スライダーの名前を入力したり、背景色、表示方法を選択する基本設定です。 ■Slids スライド 使用するスライドの選択や修正、説明文の入力を行います。 ■Slider control スライダーコントロール サムネールや説明文(SlideInfo)を設定します。 Slider settings スライダーセッティング 1.一般設定General Settings… [ 106 more words. ]
http://school.b-hp.net/web/%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9%e3%80%8cmaster-slider-%e3%80%8d/
先日、当教室で開発したワードプレステーマ「simpler」を使って、ビジネスサイトを制作中の生徒さんから、こん…