![](http://www.akira-blog.site/wp-content/uploads/2023/04/komatta_man2.png)
上に表示されてる画像が次々に変わっていく設定ってどうやってやるの?
上に表示されている画像は「スライダー」や「カルーセル」といって、WordPressのプラグイン「MetaSlider」を使って設定しています。
![管理人](https://www.akira-blog.site/wp-content/uploads/2023/04/xh3dg9.jpg)
この記事では、プラグイン「MetaSlider」の紹介と、スライダーの設定方法や使い方を紹介します。
スライダーを設置することで、特定のコンテンツ(記事、画像、製品など)を注目させることができます。スライダーは視覚的に魅力的であり、読者の注意を引くことができますよ!
このブログでもトップページに設置しています。
プラグイン「MetaSlider」スライダー(カルーセル)の【設定方法】
「MetaSlider」はWordPressのプラグインで、簡単にスライドショーを作成することができます。
それでは、設置していきましょう!
「MetaSlider」をインストールして「有効化」
WordPressの「管理画面」から「プラグイン」→「新規追加」をクリックします。
![今すぐインストール](https://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230521_223903_3229.jpg)
検索欄から「MetaSlider」と入力して「今すぐインストール」→「有効化」をクリックします。
![有効化クリック](https://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230521_223903_3339.jpg)
有効化すると「管理画面」に「MetaSlider」のタグがでてくるのでインストール完了です。
「MetaSlider」でスライダーの作り方
それでは、下記のスライダーを作っていきます。プラグイン「MetaSlider」は英語表記が多くなります。
WordPressの「管理画面」から「MetaSlider」→「HOME」をクリックします。
![HOMEクリック](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230525_230045_5464.png)
「Add New」をクリックして、新しいスライダーを作ります。
![新規作成](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230525_230045_5307.png)
「スライドを追加」をクリックします。
![スライド追加](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230525_230358_8615-1024x533.png)
「ファイルを選択」をクリックして、スライダーに使う画像を選んでいきます。選んだら右下の「Add to slideshow」をクリックします。
スライダーに使う画像を選んだら、選んだ順番に画像が並びます。
ドラッグアンドドロップで順番を変えることができます。
![ファイル選択](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230525_230045_5153-1024x558.png)
スライダーのタイトルを入力します。
![タイトル入力](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_134126_6743-1024x570.jpg)
選択した画像に、リンクを貼りたい場合は「URL」の部分にリンクを入力します。
![リンクを貼る](https://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_134127_7104-1024x570.jpg)
ここでは、
- どんなスライダーにしたいか
- 幅
- 高さ
- 効果
- 矢印の有無
- ナビゲーションの種類
を選ぶことができます。サンプルで流れてるスライダーには「幅を1200」「高さを630」と入力して、他のところは初期設定のままです。
![細かな設定](https://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_134127_7457-1024x570.jpg)
「プレビュー」をクリックすると、どんなふうにスライダーが表示されるのか確認することができます。
![プレビューをクリック](https://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_134855_5464-1024x570.jpg)
設定が完了したら「保存」をクリックして作ったスライダーを保存します。
![保存をクリック](https://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_135110_0665-1024x570.jpg)
これで、スライドショーが完成しました。
「MetaSlider」でスライダーの設置方法
スライダーを設置させたい、固定ページや投稿ページの編集画面にいきます。
設置させたいところまできたらブロックを選択するので「+」をクリックします。
![プラスをクリック](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_144419_9191-1024x183.jpg)
検索欄が出てくるので「MetaSlider」と入力して、「MetaSlider」をクリックします。
![ブロックを選ぶ](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_144419_9128-1024x845.jpg)
画面に、「Select a slideshow」と出てくるので「下矢印」をクリックします。
![矢印をクリック](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_144419_9042-1024x766.jpg)
ここで使いたいスライダーを選びます。
今回は、先程作ったタイトルの「サンプル」にチェックをいれます。
![どのスライダーを使いたいか選ぶ](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_144418_8929-1024x632.jpg)
チェックをいれるとスライダーが表示されます。
![スライダー設置](http://www.akira-blog.site/wp-content/uploads/2023/05/Compress_20230527_144418_8805-1024x826.jpg)
これで、スライダーの設置完了になります。
コメント