広告 AFFINGER(アフィンガー)

【簡単!】AFFINGER(アフィンガー)でスライドショーを設定する方法

2020年10月29日

 

悩む人
悩む人
WordPressテーマのAFFINGER(アフィンガー)スライドショーを表示させたいけどどうやって設定するのかな...?

 

こんな悩みに答えます。

 

本記事の執筆者

当ブログでは、WordPressの基本的な設定方法からアフィリエイトに関する役立つ情報を発信しています。(WordPressテーマAFFINGERの使用歴3年以上です)現在では、Webディレクターとして8年間働いており月5桁稼いでいます。

 

本記事の内容

  • AFFINGERの記事内にスライドショーを表示させる方法
  • AFFINGERのサイドメニュー_フッターにスライドショーを表示させる方法
  • スライドショーの中の日付を見やすくする方法

 

WordPressテーマのAFFINGER(アフィンガー)はスライドショーを表示させることができ、誰でも簡単にワンクリックで入れることができます。

 

実際に見ると以下のように表示されます!
KEI
KEI

 

AFFINGERスライドショー

収益化・アフィリエイト

2024/3/10

結婚・恋愛・マッチングアプリ系の案件があるアフィリエイトサイト【初心者でも始めやすい】

    こんな悩みに答えます。   本記事の執筆者 過去に恋愛・結婚のマッチングアプリアフィリエイトを利用したことがあり、アフィリエイトブログを4年続けおり月に5桁稼ぐことができています。当ブログでは、アフィリエイト、WordPressブログでの使い方を紹介しています。   結婚・恋愛系マッチングアプリのアフィリエイトサービスは年々増えています。   また、マッチングアプリの利用者数の増加も相まって、結婚・恋愛系のアフィリエイトは初心者でも継続して稼ぎやす ...

ReadMore

収益化・アフィリエイト

2024/3/10

メルカリアフィリエイトが開始!?デメリット・メリットと他のアフィリエイトとの違いを紹介

    こんな悩みに答えます。   本記事の執筆者 当ブログでは、アフィリエイトやブログで役立つ情報を発信しています。3年以上ブログを運用しており今ではアフィリエイトで毎月5桁稼いでいます。   メルカリアフィリエイトはメルカリで紹介したい商品をブログやSNSでリンクを貼り、購入されることで報酬を獲得できる制度です。     本記事ではそんなメルカリアフィリエイトを始めるデメリット・メリット、始める時に気をつけておく注意点について紹介します! & ...

ReadMore

収益化・アフィリエイト

2024/3/18

楽天アフィリエイトの登録方法と効率的に収益化する方法を解説!【裏技あり】

    こんな悩みに答えます。   本記事の執筆者 楽天アフィリエイトに登録しブログ運営を3年間継続し毎月5桁ほど稼いでいます。当ブログではおすすめのアフィリエイトからWordPressの使い方まで初心者に分かりやすいように紹介しています。   楽天アフィリエイトを始めてブログやSNSで収益化を考えているのではないでしょうか? 楽天アフィリエイトは楽天会員に登録していれば誰でも始めることができ、ブログ・SNSにリンクを貼ってアフィリエイトを始めることができます。 & ...

ReadMore

アメリカ留学 ブログ

2024/2/25

留学中ブログ書ける?書き方と収益を得るまでのコツを紹介【体験談】

    こんな悩みに答えます。   本記事の執筆者 過去にアメリカに1年間留学した経験があり、現在ではブログで3年以上情報発信をして月に5桁安定して稼いでいます。実際に留学を経験した大変さブログで稼ぐことの難しさ両方を理解しており、留学でブログを書くことのデメリット・メリットを紹介します。   留学を始めたら少しでも留学に関する情報を発信して、自身の留学の記録を残したり人の役に立ちたいと考えると思います。そんなときにブログを始めてみようか考えるのではないでしょうか? ...

ReadMore

収益化・アフィリエイト

2024/4/7

DMMアフィリエイトは稼げる?始めるやり方からブログでリンクを貼る方法を紹介!

    こんな悩みに答えます。   本記事の執筆者 当ブログではWordPressの使い方から、ブログで稼ぐ方法を初心者向けに発信しています。ブログアフィリエイトを3年以上継続しており、ブログ収益は毎月5桁ほど稼いでいます。   DMMアフィリエイトはDMM.comが運営しており、DMMならではの商品「DMMブックス」「PCゲーム/ソフトウェア」といったジャンルを紹介できます。   またアダルト系で知名度が高いFANZAもあるため、アフィリエイトでアダルト ...

ReadMore

 

そんなAFFINGERのスライドショーのメリットは、1つのエリアに複数の記事をまとめて見せることができます。

 

サイト内のいろんな記事を見てもらえるチャンスが作れるだけではなく、カルーセルにすることで魅力的に見せることが大きな特徴です。

 

スライドショーを設定するのに5分ほどで完了できますので、少しの間お付き合いいただけたら幸いです。

 

それでは、早速始めていきます。

 

AFFINGERのカテゴリー(記事内)にスライドショーを表示させる方法

カテゴリー(記事内)にスライドショーを表示させる方法

 

AFFINGERでカテゴリー記事内にスライドショーを表示させる方法について解説します。

※今回はWordPressプラグイン「Classic Editor」を使って紹介します。

 

まずは、WordPressのスライドショーを入れたい記事の編集画面を開きます。開きましたらツールバーの「①タグ → ②記事一覧/カード → ③カテゴリ一覧(スライドショー)」をクリックします。

 

「スライドショー」の追加方法

 

クリックすると以下のスライドショーの細かい設定ができるコードが表示されますので、こちらを設定をしていきます。

 

スライドショーのコード

 

ショートコードは具体的に以下を設定していきます。

 

  • cat=""
    カテゴリーIDを入力します
  • page=""
    スライドショーに表示させたい記事数を入力します
  • order=""
    記事の並び順のショートコード
  • orderby=""
    何順で並べるかのショートコード(タイトル,日付など)
  • child=""
    「on」にすると子カテゴリーが表示できます
  • slide=""
    スライドのショートコード。「on」はスライド,「off」は無し
  • slides_to_show="〇〇,〇〇,〇〇"
    表示させる記事の列数
  • slide_date=""
    日付を表示。「on」だと日付が表示。未入力は非表示
  • slide_more="ReadMore"
    「続きを読む」の文言を変更

 

スライドショーの各コードを変更して、お好みのスライドショーをカスタマイズしてみましょう!
KEI
KEI

 

AFFINGERでヘッダー・フッターにもスライドショーを表示させる方法

AFFINGERでヘッダー・フッターにもスライドショーを表示させる方法

 

続いてAFFINGERのカテゴリー(記事内)以外で、スライドショーを表示させる方法について紹介します。

 

今回は以下3つの設定方法について紹介していきます!
KEI
KEI

 

  1. ヘッダー
  2. サイドバーメニュー
  3. フッター

 

1つずつ順番に紹介します。

 

AFFINGER5のスライドショーの表示方法①:
ヘッダー

 

「AFFINGER5管理 → ヘッダー」をクリックします。

 

「AFFINGER5管理 → ヘッダー」

 

上記のキャプチャの通り、「ヘッダーに記事をスライドショーで表示する」にチェックを入れます。

 

最後に「save」をクリックすれば、ヘッダーにスライドショーが表示されます。

 

その他「スライドショー表示方法」「スライドの表示速度」など、お好みに設定してみてください!
KEI
KEI

 

AFFINGER5のスライドショーの表示方法②:
サイドメニュー

 

「サイドバーメニュー」にカルーセルの設定は「①外観 → ②ウィジェット」からできます。

 

「外観 → ウィジェット → サイドバーウィジェット」

 

ウィジェットの「サイドバーウィジェット」に「00_STINGERカスタムHTML」を追加して、この中に以下の「カテゴリ一覧(スライドショー)」のコードを入れます。

 

カテゴリ一覧(スライドショー)

 

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

 

AFFINGER5のスライドショーの表示方法③:
フッター

 

フッターも同じように「①外観 → ②ウィジェット」から編集できます。

 

フッターの2列目に「カルーセル」を追加したい場合は、「フッター右用ウィジェット(2列目)」に「00_STINGERカスタムHTML」を追加して「カテゴリ一覧(スライドショー)」のコードを入力します。

 

 

最後に「保存」をクリックすれば完了です。

 

フッター3列目に追加する場合も「フッター右用ウィジェット(3列目)」に「カテゴリ一覧(スライドショー)」のコードを入れれば、同様に設定することができます。
KEI
KEI

 

なお、アフィンガー5の「フッターのカスタマイズ方法」について、以下記事に一覧にしてまとめていますので、参考にしてみてください。

 

関連記事
AFFINGER5フッターのカスタマイズ方法まとめ
AFFINGERフッターのカスタマイズ方法を紹介まとめ

続きを見る

 

AFFINGERのスライドショー内の日付を見やすくする方法

 

最後に、AFFINGERのスラードショー内の日付に色をつける設定方法について紹介します。

 

 

背景の画像が白で日付が読みづらいな...』と思う方はぜひ設定してみてくださいね!
KEI
KEI

 

なお、今回はCSSを編集するので編集する前にはバックアップをしておいてください。バックアップのやり方は以下で詳しく紹介しています。

>>UpdraftPlusプラグインを使ってバックアップする方法

 

まずは以下コードをコピーしまして、WordPress管理画面のサイドバー『外観 → 追加CSS』を開き以下ソースコードを貼ります。

 

/* 日付に影をつけるCSS */
.post-slide-date {
background-color: #205a97;
border-radius: 6px;
padding: 3px;
}

 

「追加CSS」画面

 

上記のようにCSSをコピー&ペーストできましたら「公開」ボタンをクリックして完了です。

 

日付の色を変更するには「background-color: ;」の「:」と「;」の間に色コードを入力すれば、お好みの色に変更できます。
KEI
KEI

 

AFFINGER(アフィンガー)のスライドショーを設定しよう!:まとめ

 

ここまでAFFINGER(アフィンガー)でスライドショーを追加する方法について紹介しました。

 

AFFINGER(アフィンガー)では、スライドショーがボタン1つで作ることができ、プログラミングの知識がなくても簡単に作ることができます

 

TOPページなどに入れてみてくださいね!
KEI
KEI

 

また、AFFINGER(アフィンガー)を使用してみての感想については以下記事で紹介しています。AFFINGERの導入を検討されている方や興味がある方は是非参考にしてみてください!

 

関連記事
AFFINGER6(アフィンガー)を使ってみての感想【メリット・デメリットを紹介】

続きを見る

 

今回は以上です。

 

ここまで読んでいただき、ありがとうございました!

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】▶︎Webディレクター就職(歴8年)(コーディング・SEOが好きです!)▶︎ブログ開設

-AFFINGER(アフィンガー)