記事スライダーってどんなとき、どんな目的で設置したらいいのかな？
SWELLで記事スライダーが簡単に設置できるのは嬉しいけれど、自分のサイトにどのように取り入れたらいいのか迷いますよね。
この記事は記事スライダーの設定方法と記事スライダーのメリット・デメリットを理解した使い方を解説します。
記事スライダーを表示させる方法
ダッシュボードから【外観】⇒【カスタマイズ】でカスタマイザーを表示させます。
カスタマイザーが表示されたら【トップページ】⇒【記事スライダー】の順にクリックしましょう。
カスタマイザー の【トップページ】⇒【記事スライダー】を開くと「記事スライダーを設置させるかどうか」の項目があるので「設置する」を選択します。
プログラミングの知識不要、プラグイン不要。たったこれだけで記事スライダーを設置することができました。
SWELLの記事スライダーは、
- 記事のピックアップ方法
- 記事の表示設定
- スライド設定
- その他の表示設定
と細かく設定をおこなうことができます。
次の章では各項目の注意点を説明したうえで最適な設定方法を解説していきます。
記事のピックアップ方法
「記事のピックアップ方法」はカテゴリーまたはタグを指定してスライダーに表示する記事をピックアップすることができます。
ピックアップの対象について
- カテゴリーを選択すればカテゴリーIDを入力する
- タグを選択すればタグ名を入力する
カテゴリーIDの確認はどこですればいい？
ダッシュボードから【投稿】⇒【カテゴリー】をクリックしましょう。
記載されている「ID」がカテゴリーIDになります。
ピックアップ対象を「カテゴリー」に切り替えてカテゴリーIDの数字を入力すればＯＫ♪
記事スライダーは個別記事のIDは指定することができません。
記事の並び順について
- ランダム
- 投稿日
- 更新日
- 人気順
のいずれかから選択することができます。
くろすけ更新日を調整すれば任意の並び順にコントロールできそうですね。
記事の表示設定
「記事の表示設定」はピックアップした記事それぞれの見た目に関する設定ができます。
日付の表示設定、著者の表示設定は「オフ」のままがおすすめ。
記事スライダーはサイトのファーストビューに配置するので思っている以上に目立ちます。アイキャッチ画像、タイトル、カテゴリーまたはタブ以外の情報が表示されると”ごちゃごちゃ”とした印象に！
スッキリと整理された印象を与えるためにも情報量は少なめにしましょう。
スライド設定
「スライド設定」はスライダーに表示される記事の枚数や画像が切り替わるスピード、切り替わるタイミングについての設定ができます。
SWELLの記事スライダーは自動で切り替わりつつ手動でも操作ができるハイブリッド型！
いずれかの方法でスライドを左右に移動させることができます。
特にこだわりがなければ「スライドのアニメーション速度」と「スライドが切り替わる間隔」は変更する必要はありません。
くろすけスライド設定で重要なのは「その他の設定」です！
- ページネーションは「全部で何枚あるか」「何枚目を表示しているか」を読者に伝える
- ナビゲーションは記事スライダーの左右に矢印を配置して次のコンテンツがあることを読者に知らせる
どちらも細かな配慮ですが読者の使いやすさ（ユーザビリティ）の向上につながります。
できればどちらの項目にもチェックを入れたいところですがサイトのデザインによってはナビゲーション（＝左右の矢印）が”やぼったく”感じるのでページネーションだけという選択も ◎ 。
その他の表示設定
「その他の表示設定」はサイト全体のデザインやレイアウトに合わせた記事スライダーの細かな設定ができるようになっています。
くろすけSWELLは”ほんのちょっとした”ことまでカスタマイズできるのが最高♪
記事スライダーエリアのタイトル
テキストを入力すると記事スライダーの上部に「新着記事」や「人気記事」「ピックアップ記事」といったタイトルを表示することができます。
記事スライダー周りの余白設定
記事スライダーの上下・左右の余白量を選択できます。
スライダーエリアの文字色・背景色の設定
デフォルト（色を指定しない状態）では文字色は基本カラー設定と同じ色、背景色は透明です。
文字色や背景色を変更するときはどんなとき？
- 下記の「背景画像の設定」をおこなったときなど画像の色彩に合わせて文字色を変更することで視認性がアップ
- サイト全体の背景色に合わせて記事スライダーの背景色を変更することでサイトに溶け込んだデザインに
背景画像の設定
記事スライダーの背景には画像を指定することもできます。
テーマ「SWELL」の記事スライダーの効果的な使い方は？
めちゃくちゃ万能に思える記事スライダーにもメリット・デメリットがあります。
- ファーストビューにたくさんの情報を盛り込める
- 動きが出ることで読者の目をひくことができる
- なんか「プロっぽい」見た目のサイトになる
- あまりクリックされていない
- 押し売り感が強くなる
くろすけ記事スライダーのメリット・デメリットを理解したうえで効果的な使い方を考えてみました。
新着記事を目立たせる
記事スライダーは「とにかく目立つ」というメリットを生かして新着記事を表示するのが効果的！
定期的に更新されているサイトならファーストビューに新着記事が並んでいることで読者に有益な情報をいち早く伝えることができます。
- ファーストビューに新着記事が並ぶので目立つ
ストーリー仕立てで記事を配置する
例えば「ディズニーランドに遊びに行った」ことを、
- 自宅からの交通費をお得にする裏技
- 園内で混雑を回避するための時短術
- 絶対に食べたいグルメランキング
- パレード／ショーの場所取り方法
- 定番＆園内限定お土産ランキング
このような５つの記事にしたとします。
どの記事から読んでも完結する内容ですが記事スライダーに並べることで「１日の流れ」に沿って紹介することができます。
- 読者にあらかじめ全５話の記事だと認識してもらう
- 続きが気になる構成で複数の記事を読んでもらう
- サイトの滞在時間を伸ばす（＝直帰率の低下）
まとめ
テーマ「SWELL」では記事スライダーの表示方法について解説しました。
記事スライダーはファーストビューで読者の目に飛び込んでくるコンテンツ。工夫をこらせば読者の興味をひくことができます。
僕自身も記事スライダーの使い方は模索中（笑）アイディアが浮かんだらどんどん追加していきたいと思うのでお見逃しなく！
コメント