どうも、ケイジです!
今回は賢威7テンプレートを使ってスライドショーを簡単に設置する方法を説明します。スライドショー自体はプラグインを使うことで簡単に作成することができます。僕が推奨している賢威7テンプレートを使って実際にスライドショーを導入する方法を説明したいと思います。

スライドショーの魅力は惹きつけるビジュアル性

賢威7でスライドショーを簡単に設置する方法メイン

まず、スライドショーを設置する前になんのためにスライドショーを設置するのか?というお話です。スライドショーはビジュアル性で人の目線を惹きつける大きな特徴がありますね。画像が横に動くスライドショーをサイト内に設置することで、何もなければ通り過ぎる目線が一旦止まる可能性が格段にあがります

 

スライドショーを見てくれれば、そこにサイト内で特に強調したいコンテンツをスライドショーにすることで、サイトの方向性や伝えたいことを、より前面に押し出すことができるのがスライドショーの第二の魅力でしょう。

 

これからスライドショーの作り方から、記事内に設置する方法、サイトの見所を伝えるために最適なトップページのコンテンツ部分にもスライドショーを設置していく方法を順番に説明していきたいと思います!

 

 

賢威7でトップページのコンテンツ部分にスライドショーを入れた完成図

賢威7でスライドショーを設置する方法1

 

上記画像のように賢威7のデフォルトではトップページのメインコンテンツ部分が最新記事となっています。ここにスライドショーをいれるとこのような完成形になります。ものすごく目立ちますね。

 

スライドショーを入れるにはMeta Sliderというプラグインを使うことで簡単に作成し設置可能です。下記で説明していきますので是非やってみましょう!

 

 

Meta Sliderのインストールと各設定、使い方

Meta Sliderをインストールし有効化する

賢威7でスライドショーを簡単に設置する方法2

Meta Sliderをインストールし有効化しましょう。インストール方法や有効化のやり方が分からない方は下記のURLをご参照ください。

WordPressでプラグインを一括でインストールする方法

 

 

Meta Sliderの使い方

ダッシュボード→Meta Slider→スライドを追加

賢威7でスライドショーを簡単に設置する方法3

Meta Sliderに最初にやる設定は特にありません。あるのはスライドごとの詳細設定とスライダー自体の設定ですので、早速使い方の説明にいきたいとおもいます。まずはインストールし有効化したMeta Sliderをダッシュボードの下記の方にあると思いますのでクリックします。

 

すると上記画像のような画面になりますので、入れたいスライド画像を用意後スライドを追加をクリックします。

 

 

用意した画像をスライドの数だけ取り込み編集

賢威7でスライドショーを簡単に設置する方法4

スライドを追加をクリックするとこのような画面になりますので、ここで中央のファイルを選択からアップロードするなりして画像を取り込みましょう。そしてスライダーに追加をクリックします。この工程をスライドの枚数分繰り返すことになります。

 

最初は1枚ずつ画像を取り込み1枚ずつ詳細な設定をしていきましょう。

 

 

各スライドの編集要領

一般

賢威7でスライドショーを簡単に設置する方法5

取り込めばこのような画面になります。まずは一般の項目になっていますのでここにスライド画像の説明を打ち込みます。説明が不要な方は空白にしてください。

スライドの一般に文章を入力した場合のイメージ図

賢威7でスライドショーを簡単に設置する方法6

一般に文章を入力すると画像のすぐ下に表示されるようになります。画像自体を加工するため、説明文などがいらない場合は空白にしましょう。

 

SEO

賢威7でスライドショーを簡単に設置する方法7

一般の横にSEOという項目があります。ここは一般みたいに文字として表示されることはありませんが、スライド画像自体にテキストを設定することができます。これはSEO上必要ですので、狙っていてスライド画像と関連するキーワードを入力しましょう。

 

切り抜き

賢威7でスライドショーを簡単に設置する方法8

画像のどの部分を表示するのかという点の設定になります。デフォルトでは「中央/中央」ですが、極端に左にしたかったり、右にしたかったりという微調整ができるようになります。あまり必要ない方はそのままデフォルトで使ってください。

 

 

上記の過程をスライドの数だけ設定

賢威7でスライドショーを簡単に設置する方法9

試しに4枚スライドを入れると見た目はこのような状態になります。(説明なのでそれぞれの設定はしていません)先程行った各スライドの設定が終われば、次はどんな形や速度でこのスライドたちをスライドショーとするのかを設定する作業に移ります。

 

 

スライドショーの詳細設定

賢威7でスライドショーを簡単に設置する方法10

各スライドを取り込み設定後は全体的なスライドの形を決める作業に入ります。先程のスライド画像の右側の部分でスライドの流れを詳細に決めていくことになります。

 

まずはFlex Sliderなど4つの大まかな形を選択します。そして保存してプレビューをクリックしメインコンテンツ部分との幅や高さを調整します。気になる所は幅だと思います。僕はメインコンテンツ部分の幅を800pxにしているのでそのように設定しています。ナビゲーションはスライドショー下に出てくる点になります。(ナビゲーションをクリックするとスライドのチェンジが可能です)

 

 

賢威7でスライドショーを簡単に設置する方法11

高度な設定ではまず、自動再生にチェックが入っていることを確認します。自動スライドしなければほぼスライドは訪問者自らしてもらえないのでスライドは1枚で止まったままだと思っていいでしょう。後は気になるところとしてはスライドの速さではないでしょうか?

 

これは感覚が人それぞれなので適宜設定してプレビューで確認してみることをおすすめします。
ここまで設定するとやっと1つのスライダーが完成しました。では次にこのスライダーをサイト内に入れてみましょう。賢威7のテンプレートでトップページメインコンテンツ部分に入力する方法もあわせて説明します。

 

 

スライドショーの簡単設置方法

記事内に挿入する場合

賢威7でスライドショーを簡単に設置する方法12

右側のスライドショーの詳細設定をした項目の一番下に使い方という項目があります。その中にもショートコードとテンプレートに含めるという項目に分かれていますので注意が必要です。

 

記事内に挿入する場合などはショートコードをクリックし、赤枠で囲んであるショートコードをコピーし記事内の挿入したい部分に挿入してください。

各記事内でもスライドショーは挿入可能

賢威7でスライドショーを簡単に設置する方法14

Meta Sliderをインストールし有効化後はメディアを追加ボタンの横に新たにスライダーを追加というボタンが出てきます。ここからでもスライドショーは作れますので参考までに説明します。

 

 

トップページなどに挿入する場合

賢威7でスライドショーを簡単に設置する方法13

トップページなどに挿入したい場合はテンプレートに含めるをクリックし、出てきたショートコードを直接テーマ編集から設定する必要があります。では賢威7のトップページメインコンテンツ部分に挿入する方法を説明します。

 

 

賢威7のテーマ編集からスライドショーを設置する方法

ショートコードをコピー

上記の使い方の説明でテンプレートに含めるをクリックしショートコードをコピーしてください。

 

ダッシュボード→外観→テーマ編集→メインインデックスのテンプレート(index.php)

賢威7でスライドショーを簡単に設置する方法15

ダッシュボード→外観→テーマ編集→メインインデックスのテンプレート(index.php)を開き、メインコンテンツという記述されている箇所を探します。その中に<div class=”main-conts”>という項目があるので、その下に先程のショートコードを貼り付けましょう。

 

これでトップページのメインコンテンツ部分に先程作ったスライドショーが設置されるようになります。お疲れ様でした!

 

 

まとめ

スライドショーはMeta Sliderプラグインを使うことが一番簡単、かつ綺麗に設置することができるためおすすめです。設定自体も感覚でできるため非常に簡単な方法だと思います。

 

スライドショーはサイト自体の見栄えをよくできますし、強調したいコンテンツを前面にアピールすることができるためチャンスがあれば使っていきたいところですね。

 

スライドに使う画像や編集についての相談や質問があればお問い合わせしてくだされば対応しますのでお気軽にどうぞ!