テーマ『SWELL』の使い方|記事スライダーの設定とカスタマイズ方法

記事スライダーってどんなとき、どんな目的で設置したらいいのかな?

SWELLで記事スライダーが簡単に設置できるのは嬉しいけれど、自分のサイトにどのように取り入れたらいいのか迷いますよね。

この記事は記事スライダーの設定方法と記事スライダーのメリット・デメリットを理解した使い方を解説します。

自己紹介
  • ワードプレス歴5年
  • 当サイトを含めて3つを運営中
  • これまでブログを作っては壊してきた七転八起ブロガー「くろすけ」です
はじめまして
目次

記事スライダーを表示させる方法

STEP
カスタマイザーを起動させる

ダッシュボードから【外観】⇒【カスタマイズ】でカスタマイザーを表示させます。

カスタマイザーが表示されたら【トップページ】⇒【記事スライダー】の順にクリックしましょう。

カスタマイザー内のトップページ
「トップページ」を選択
トップページ内の記事スライダー
「記事スライダー」を選択
STEP
記事スライダーを表示させる

カスタマイザー の【トップページ】⇒【記事スライダー】を開くと「記事スライダーを設置させるかどうか」の項目があるので「設置する」を選択します。

プログラミングの知識不要、プラグイン不要。たったこれだけで記事スライダーを設置することができました。

STEP
細かな設定をおこなう

SWELLの記事スライダーは、

  1. 記事のピックアップ方法
  2. 記事の表示設定
  3. スライド設定
  4. その他の表示設定

と細かく設定をおこなうことができます。

次の章では各項目の注意点を説明したうえで最適な設定方法を解説していきます。

記事のピックアップ方法

「記事のピックアップ方法」はカテゴリーまたはタグを指定してスライダーに表示する記事をピックアップすることができます。

記事のピックアップ方法に関する設定

ピックアップの対象について

  • カテゴリーを選択すればカテゴリーIDを入力する
  • タグを選択すればタグ名を入力する

カテゴリーIDの確認はどこですればいい?

ダッシュボードから【投稿】⇒【カテゴリー】をクリックしましょう。

記載されている「ID」がカテゴリーIDになります。

ピックアップ対象を「カテゴリー」に切り替えてカテゴリーIDの数字を入力すればOK♪

記事スライダーは個別記事のIDは指定することができません。

記事の並び順について

  1. ランダム
  2. 投稿日
  3. 更新日
  4. 人気順

のいずれかから選択することができます。

くろすけ

更新日を調整すれば任意の並び順にコントロールできそうですね。

記事の表示設定

「記事の表示設定」はピックアップした記事それぞれの見た目に関する設定ができます。

記事スライダーの見た目に関する設定方法

日付の表示設定、著者の表示設定は「オフ」のままがおすすめ。

記事スライダーはサイトのファーストビューに配置するので思っている以上に目立ちます。アイキャッチ画像、タイトル、カテゴリーまたはタブ以外の情報が表示されると”ごちゃごちゃ”とした印象に!

スッキリと整理された印象を与えるためにも情報量は少なめにしましょう。

スライド設定

「スライド設定」はスライダーに表示される記事の枚数や画像が切り替わるスピード、切り替わるタイミングについての設定ができます。

記事スライダーの機能設定

SWELLの記事スライダーは自動で切り替わりつつ手動でも操作ができるハイブリッド型!

いずれかの方法でスライドを左右に移動させることができます。

特にこだわりがなければ「スライドのアニメーション速度」と「スライドが切り替わる間隔」は変更する必要はありません。

くろすけ

スライド設定で重要なのは「その他の設定」です!

  • ページネーションは「全部で何枚あるか」「何枚目を表示しているか」を読者に伝える
  • ナビゲーションは記事スライダーの左右に矢印を配置して次のコンテンツがあることを読者に知らせる

どちらも細かな配慮ですが読者の使いやすさ(ユーザビリティ)の向上につながります。

できればどちらの項目にもチェックを入れたいところですがサイトのデザインによってはナビゲーション(=左右の矢印)が”やぼったく”感じるのでページネーションだけという選択も ◎ 。

その他の表示設定

「その他の表示設定」はサイト全体のデザインやレイアウトに合わせた記事スライダーの細かな設定ができるようになっています。

記事スライダーの「その他の設定」
くろすけ

SWELLは”ほんのちょっとした”ことまでカスタマイズできるのが最高♪

記事スライダーエリアのタイトル

テキストを入力すると記事スライダーの上部に「新着記事」や「人気記事」「ピックアップ記事」といったタイトルを表示することができます。

記事スライダー周りの余白設定

記事スライダーの上下・左右の余白量を選択できます。

スライダーエリアの文字色・背景色の設定

デフォルト(色を指定しない状態)では文字色は基本カラー設定と同じ色、背景色は透明です。

文字色や背景色を変更するときはどんなとき?

  • 下記の「背景画像の設定」をおこなったときなど画像の色彩に合わせて文字色を変更することで視認性がアップ
  • サイト全体の背景色に合わせて記事スライダーの背景色を変更することでサイトに溶け込んだデザインに

背景画像の設定

記事スライダーの背景には画像を指定することもできます。

高解像度のディスプレイ(Retinaディスプレイなど)に対応するなら背景画像は「横幅2400px以上」のものをアップロードするようにしましょう。

テーマ「SWELL」の記事スライダーの効果的な使い方は?

めちゃくちゃ万能に思える記事スライダーにもメリット・デメリットがあります。

記事スライダーのメリット
  • ファーストビューにたくさんの情報を盛り込める
  • 動きが出ることで読者の目をひくことができる
  • なんか「プロっぽい」見た目のサイトになる
記事スライダーのデメリット
  • あまりクリックされていない
  • 押し売り感が強くなる
くろすけ

記事スライダーのメリット・デメリットを理解したうえで効果的な使い方を考えてみました。

新着記事を目立たせる

記事スライダーは「とにかく目立つ」というメリットを生かして新着記事を表示するのが効果的!

定期的に更新されているサイトならファーストビューに新着記事が並んでいることで読者に有益な情報をいち早く伝えることができます。

  • ファーストビューに新着記事が並ぶので目立つ

ストーリー仕立てで記事を配置する

例えば「ディズニーランドに遊びに行った」ことを、

  1. 自宅からの交通費をお得にする裏技
  2. 園内で混雑を回避するための時短術
  3. 絶対に食べたいグルメランキング
  4. パレード/ショーの場所取り方法
  5. 定番&園内限定お土産ランキング

このような5つの記事にしたとします。

どの記事から読んでも完結する内容ですが記事スライダーに並べることで「1日の流れ」に沿って紹介することができます。

  • 読者にあらかじめ全5話の記事だと認識してもらう
  • 続きが気になる構成で複数の記事を読んでもらう
  • サイトの滞在時間を伸ばす(=直帰率の低下)

まとめ

テーマ「SWELL」では記事スライダーの表示方法について解説しました。

記事スライダーはファーストビューで読者の目に飛び込んでくるコンテンツ。工夫をこらせば読者の興味をひくことができます。

僕自身も記事スライダーの使い方は模索中(笑)アイディアが浮かんだらどんどん追加していきたいと思うのでお見逃しなく!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
よかったらシェアしてね!

コメント

コメントする

目次
閉じる