【Smart Slider 3】サムネイル付きスライダーを設置する方法

プログラミング

この記事を読むのに必要な時間は約 5 分です。

「ブログのトップページに記事のサムネイル付きスライダーを付けたいな・・・。」

ブログのトップページにおしゃれなスライドショーを取り入れたい!

この記事では、WordPressのプラグイン Smart Slider 3を利用して、サムネイル付きスライドショーを設置する方法をご紹介します。

記事を読み終えると、上記のような視覚的に見やすいブログになります!

スポンサーリンク



サムネイル付きスライダーを設置する方法

Smart Slider 3とは?

サムネイル付きスライドショーのWordPressプラグインです。
このプラグイン関係は多数ありますが、僕はSmart Slider 3をおすすめします。

①無料
②かんたんに導入できる
③視覚的に作れるので見やすい

インストール

①WordPressのダッシュボード→プラグイン→新規追加

②右上の検索欄に「Smart Slider 3」→「今すぐインストール」→「有効化」

これでインストールは完了です!

設置方法

テンプレートをインポートする

インストールが完了すると、ダッシュボードに「Smart Slider」が追加されます。
これをクリックしましょう。

「Go to Dashboard」をクリックします。

ダッシュボード画面になるので、「New Project」を選択します。

「Start with a Template」を選択します。

すると、テンプレート一覧が表示されます。
今回は、赤枠で囲まれたテンプレートを使用します。

カーソルを合わせると、「Import」が表示されるので、これをクリック。

すると、スライダー編集画面が表示されます。
※右下の画面に「Success」が表示されていることを確認して下さい。

サムネイル付きスライダーを作成

テンプレートから作成したので、サンプルのスライドを一括で削除します。
①各スライドの左上にチェックを入れる
②左上の「Actions」→「Delete」

これで、スライドを空にすることができました。

次に、投稿した記事をスライドに追加して行きます。
画面の「Post」をクリックしましょう。

「Add Post」が表示されるので、その中から1記事を選択して、
「Add Post」をクリックしてスライドに挿入します。
 ※後ほど、すべての記事に対して行う処理があるので、
 ここでは1記事だけ挿入して下さい。

スライドが挿入されました。
次に、挿入されたスライド上にカーソルを合わせて、「Edit」をクリックします。

「Edit」をクリックすると、スライド編集画面に遷移します。
上から、記事のタイトル・本文・「Read more」が表示されています。

以下のように設定します。
①記事タイトルのフォントサイズを22にする
②本文をdeleteキーで削除する
③「Read more」アイコンのサイズを2にする
編集が終わったら、この編集設定を保存するため、保存マークをクリックします。

「Save As」画面が出るので、編集設定のの前を入力します。
ここでは、「スライド設定テンプレート」で保存しています。
その後、「Save As」をクリックして保存しましょう。

その後、スライド編集画面の右上に「Save」があるのでクリックして保存。
「Back」をクリックしてスライド一覧画面に戻ります。

これで、1つの記事が設定完了となります。
後は同様に、スライドに挿入したい記事に対して同じ処理をしていきます。

タイトルフォントの大きさ等の設定は先ほどの手順で保存したので、
保存マークの右にある+を押すと、テンプレート選択画面に遷移します。

「スライド設定テンプレート」が作成されているので、
こちらを選択すると、自動的に設定が変更されます。

この手順を掲載したい投稿分、行います。

サムネイル付きスライダーの編集

サムネイル付きスライダーの大きさ設定を行います。
スライダー編集画面から設定。
「Size」→「Width」を1980
     「Hight」を 200 に設定しましょう。

サムネイル付きスライダーの名前設定を行います。
スライダー編集画面から設定。
「General」→「Name」を「サムネイル付きトップスライダー」 に設定します。

サムネイル付きトップスライダーを設置する

WordPressのダッシュボードから設置します。
「外観」→「ウィジェット」をクリックして下さい。

ウィジェット管理画面。
「利用できるウィジェット」から「Smart Slide」があるので、
管理画面の右側「コンテンツ上部」にドラッグします。

「Smart Slide」をクリックして、スライダーを選択します。
ここで、先程編集した「サムネイル付きトップスライダー」を選択しましょう。

最後に、「保存」をクリックして設定完了です。

最後に確認してみる

ブログのトップメニューを表示してみると、スライダー設置が確認できました。

まとめ

いかがでしたでしょうか。
今回は、WordPressのプラグイン Smart Slider 3を利用して、サムネイル付きスライドショーを設置する方法をご紹介しました。

①無料
②かんたんに導入できる
③視覚的に作れるので見やすい

視覚的に見やすいブログにできるのはSmart Slider 3!
おすすめです!

今回は導入から設置まで、ご説明させていただきました。
最後までご覧いただき、ありがとうございました。

コメント

タイトルとURLをコピーしました