トップページにスライドショーを設置してみよう!トップページにバナーなどの画像をスライドで表示したい時も多いと思う。プラグインを使わない方法もあるが、コーディングの技術が必要なのでここはサクッとプラグインで解決しよう。3」を使って攻略を進めていきたいと思う。Sydneyのテーマを使ったデモサイトを公開するので、参考にしてほしい:https://www.dammy.wordpress-quest.com/※サイトの内容は攻略が進むごとに随時変わるのでご了承願いたい。当サイトで記載してある方法以外は使っていない。3」ここでは、下記の参考画像ようなスライダー(画像の一番下部分)を目指したいと思う。プラグインをインストールしよう先ずは、いつも通りプラグインをインストールするところから始めよう。3」と入力してインストールしよう。3」は、レスポンシブ対応(画面のサイズのよって自動で可変)の高機能スライダーで、画像の他にも動画などにも対応している。インストールしたら早速使ってみよう。Slider」のアイコンが表示されるのでクリックしよう。Slider」が追加されるのでクリックしよう。SLIDER」を選択する。ポップアップが表示させるので、スライドのタイトル名と、サイズを入力する。参考画像ではサイズは幅1200px×高さ500pxに設定している。※ここは好みに設定してもらっても大丈夫だが、高さは最小でも350pxぐらいは確保しておきたい。幅は1200pxぐらいがちょうどいいだろう。下の「Preset」は「Default」を選んでいる。ここは後からでも変更可能なので、とりあえず「CREATE」をクリックして進もう。SLIDE」を選択してスライドを追加していこう。スライドの種類を聞かれるので、ここは「Image」を選択。スライド画像をアップロードすると、パレット一覧に追加される。続いてスライド本体の設定をやっていこう。メニューから「GENERAL」を選んで、参考画像の通りに設定してみよう。3」では高度なカスタマイズ設定が可能なスライダーだ。個人的にはよくわからない機能もあるので、今回設定している箇所のみ説明したいと思う。fill:スライドの枠に対して画像をどう配置するか選べる。ここではスライドに対して画像をそのままのサイズに配置する「Fit」を選んでいる。「Fit」を選ぶ場合、画像のサイズはスライド本体のサイズと同じにする必要があるので注意しよう。animation:画像がスライドされた時のエフェクトを選べる。ここは好みで問題ない。「Crossfade」は自然に移り変わるエフェクト。properties:ここではデフォルトのままにしているが、スライドが移り変わる時間を選べる。続いて隣の「SIZE」の設定に移ろう。width」の数値をスライド本体のサイズ(幅1200px×高さ500px)に設定しよう。AUTOPLAYの設定AUTOPLAYでは自動再生の有無を選べる。デフォルトではスライドが自動再生しないように設定されているので、ONにしておこう。「Enable」のつまみをクリックするとONになる。1行目の「Interval」はスライドが開始される間隔を選べる。デフォルトでは8000ms(8秒)となっているので、スライドは8秒間隔で自動的に再生させる設定だ。間隔を短くしたい場合は、ここを設定しよう。8000msだと長すぎるので、3000ms〜5000msがちょうどいいタイミングで切り替わる時間の目安だ。on」は、どのような動作で自動再生をストップさせるのか選べる。Started」をONにしよう。続いて、ナビゲーションの設定をしてみよう。3」ではいくつかナビゲーションの種類があるが、ここではベーシックなナビゲーションを設定してみる。スライド画像に矢印を設定してみよう。下のメニューから「ARROWS」を選択して、設定画面を表示させる。基本はデフォルトのままでもOKだが、デフォルトでは矢印が常に表示されるようになっているので、マウスをスライドに乗せると表示させるホバー設定にした方が見た目的にも邪魔にならないだろう。hover」をONにしよう。「Previous」では矢印の種類を選べるので好みの矢印を選択。position」では矢印の位置を選べる。ここも好みで問題ない。他はデフォルトのままでOKだ。BULLETSの設定BULLETSとはスライドの下に表示される小さな玉の形をしたナビゲーションだ。スライドではポピュラーなナビゲーションなので見たことがある冒険者も多いと思う。ARROWSの隣にある「BULLETS」を選択しよう。hover」をONにするとホバー設定になるのでここは好みでONにするか選ぼう。下の「Thumbnail」は玉の代わりにスライド画像をサムネイルで表示させる機能だ。ここをONにすると自動的にサムネイルが生成させる。「POSITION」は玉の位置を選べる。ここではスライドの枠の下に表示されるように設定している。以上で設定が完了したので、一旦ここで保存しよう。保存するには右上の「SAVE」をクリック。作成したスライドをプレビューするには、左の「PREVIEW(目のアイコン」を押すと、プレビュー画面が表示させるので、ここを確認しながら必要に応じて設定を変更しよう。下記が今回参考に作成したスライドとなる。スライドの間隔は3000msに設定している。個々のスライド画像にリンクを設定する方法を紹介する。スライド画像一覧からリンクを設定したい画像を選択して「EDIT」をクリック。スライド画像の編集画面が表示させるので「Setting」タグに切り替えて、「LINK」の空欄に指定したいURLを記入しよう。新規ウィンドウでリンクを開かせたい場合は、横の項目から「New」を選ぶ。リンクを設定したら忘れずに「SAVE」を押そう。Elementorにスライドを配置しよう出来上がったスライドをElementorに配置するには、任意の場所にショートコードを挿入するだけだ。Posts」を配置した時に攻略済みだ。トップページにお知らせ記事を一覧で表示してみよう!トップページに欠かせないのは、お知らせなどのNewsコンテンツだろう。お知らせがあることによって、サイトの更新状況をユーザーに伝えることができるし、見せ方によっては経営者ブログなどを一覧にして表示させることも可能だ。3」のショートコードは、作成したスライドの「PUBLISH」メニューから確認可能だ。3」を使ったスライドの設置が完了した。3」は画像の他にも動画を表示させたりすることも可能だ。色々な見せ方ができるプラグインなので、基本操作を覚えたらぜひ色々試してみてほしい。QUEST管理人兼グラフィックデザイナー。職場で理不尽にもウェブ担当を任され、独学でWordPressを使ったサイト構築を学ぶ。以來、自社サイトを始め、数多のサイトをWordPressで作り上げる。その時に学んだ経験と失敗から、初心者にも分かりやすいサイトを立ち上げようと一念発起。QUEST|初心者冒険者のワードプレス攻略サイト.。