![Girima-Blog-](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="160"><rect fill-opacity="0"/></svg>)
ギリマ記事スライダーってどんなとき、どんな目的で設置したらいいのかな？
ギリマSWELLで記事スライダーが簡単に設置できるのは嬉しいけれど、
自分のサイトにどのように取り入れたらいいのか迷いますよね～。
くらべネコさんに聞いて見よう！
くらべネコギリマくんどうしたの？ブログで悩んでるんだね？
ギリマSWELLで記事スライダーを効果的に使う方法が知りたいんだぁ～・・・・
くらべネコオッケー！じゃあ教えてあげよう！
くらべネコ今回はギリマくんと一緒に、
記事スライダーの設定方法と記事スライダーの
メリット・デメリットや使い方を解説するね！
記事スライダーを表示させる方法
くらべネコまずは記事スライダーの表示方法からね！
カスタマイザーを起動させる
ダッシュボードから【外観】⇒【カスタマイズ】でカスタマイザーを表示させます。
カスタマイザーが表示されたら【トップページ】⇒【記事スライダー】の順にクリックしましょう。
記事スライダーを表示させる
カスタマイザー の【トップページ】⇒【記事スライダー】を開くと
「記事スライダーを設置させるかどうか」の項目があるので「設置する」を選択します。
くらべネコプログラミングの知識不要、プラグイン不要でできるんだよ！
ギリマたったこれだけ？
記事スライダーを設置できたよー！
くらべネコオッケー！じゃあ次は細かい設定をやっていくよ！
細かな設定をおこなう
SWELLの記事スライダーは、
- 記事のピックアップ方法
- 記事の表示設定
- スライド設定
- その他の表示設定
このように細かく設定をおこなうことができます。
くらべネコ次の章では各項目の注意点を説明したうえで最適な設定方法を解説していくからね！
記事のピックアップ方法
「記事のピックアップ方法」は、
カテゴリーまたはタグを指定してスライダーに表示する記事をピックアップすることができます。
ピックアップの対象について
- カテゴリーを選択すればカテゴリーIDを入力する
- タグを選択すればタグ名を入力する
ギリマカテゴリーIDの確認はどこですればいい？
ダッシュボードから【投稿】⇒【カテゴリー】をクリックしましょう。
記載されている「ID」がカテゴリーIDになります。
くらべネコピックアップ対象を
「カテゴリー」に切り替えてカテゴリーIDの数字を入力すればＯＫ♪
記事スライダーは個別記事のIDは指定することができません。
記事の並び順について
- ランダム
- 投稿日
- 更新日
- 人気順
のいずれかから選択することができます。
くらべネコ更新日を調整すれば任意の並び順にコントロールできそうだよ！
記事の表示設定
「記事の表示設定」は
ピックアップした記事それぞれの見た目に関する設定ができます。
くらべネコ日付の表示設定、著者の表示設定は「オフ」のままがおすすめだよ！
記事スライダーはサイトのファーストビューに配置するので思っている以上に目立ちます。
くらべネコアイキャッチ画像、タイトル、カテゴリーまたはタブ以外の情報が表示されると”ごちゃごちゃ”とした印象になるよ！
くらべネコスッキリと整理された印象を与えるためにも情報量は少なめにしよう！
スライド設定
「スライド設定」はスライダーに表示される
記事の枚数や画像が切り替わるスピード、切り替わるタイミングについての設定ができます。
SWELLの記事スライダーは自動で切り替わりつつ手動でも操作ができるハイブリッド型！
いずれかの方法でスライドを左右に移動させることができます。
特にこだわりがなければ
- 「スライドのアニメーション速度」
- 「スライドが切り替わる間隔」
は変更する必要はありません。
くらべネコスライド設定で重要なのは「その他の設定」だよ！
ページネーションは「全部で何枚あるか」「何枚目を表示しているか」を読者に伝える
ナビゲーションは記事スライダーの左右に矢印を配置して次のコンテンツがあることを読者に知らせる
できればどちらの項目にもチェックを入れたいところですがサイトのデザインによってはナビゲーション（＝左右の矢印）がくずれるかもなので、ページネーションだけという選択も おけです 。
その他の表示設定
「その他の表示設定」はサイト全体のデザインやレイアウトに合わせた記事スライダーの細かな設定ができるようになっています。
くらべネコSWELLは”ほんのちょっとした”ことまでカスタマイズできるのが最高ですよ！
記事スライダーエリアのタイトル
テキストを入力すると記事スライダーの上部に
「新着記事」や「人気記事」「ピックアップ記事」といったタイトルを表示することができます。
記事スライダー周りの余白設定
記事スライダーの上下・左右の余白量を選択できます。
スライダーエリアの文字色・背景色の設定
デフォルト（色を指定しない状態）では文字色は基本カラー設定と同じ色、背景色は透明です。
ギリマ文字色や背景色を変更するときはどんなとき？
下記の「背景画像の設定」をおこなったときなど画像の色彩に合わせて文字色を変更することで視認性がアップ
サイト全体の背景色に合わせて記事スライダーの背景色を変更することでサイトに溶け込んだデザインに
背景画像の設定
記事スライダーの背景には画像を指定することもできます。
高解像度のディスプレイ（Retinaディスプレイなど）に対応するなら,
背景画像は「横幅2400px以上」のものをアップロードするようにしましょう。
テーマ「SWELL」の記事スライダーの効果的な使い方は？
くらべネコ万能に思える記事スライダーにもメリット・デメリットがあるみたいだよ！
| 記事スライダーのメリット |
- ファーストビューにたくさんの情報を盛り込める
- 動きが出ることで読者の目をひくことができる
- なんか「プロっぽい」見た目のサイトになる
| 記事スライダーのデメリット |
- あまりクリックされていない
- 押し売り感が強くなる
新着記事を目立たせる
くらべネコ記事スライダーは「とにかく目立つ」というメリットを生かして新着記事を表示するのが効果的！
ギリマ定期的に更新されているサイトなら、ファーストビューに新着記事が並んでいることで読者に有益な情報をいち早く伝えることができるね！
ファーストビューに新着記事が並ぶので目立つ
まとめ｜『SWELL』の使い方｜記事スライダーの設定と効果的なカスタマイズ方法
くらべネコどうだった？記事スライダーは使えるようになった？
ギリマうん！これで記事スライダーの使い方はバッチリだよ！
くらべネコもっと効果的なな記事スライダーの使い方があれば教えてあげるね！
ギリマありがとう！じゃあまたね！
くらべネコバイバーイ！
