ブログ運営

【アフィンガー5】トップページにスライドショーを簡単に設定する方法

悩んでる女性
アフィンガー5を導入したからブログのカスタマイズしようと思ってます。

とりあえずスライドショーを設定したいんだけど、どうやって設定すればいいの?

こんな悩みにお答えします。

 

アフィンガー5にはたくさんの機能が揃ってるので、カスタマイズするのがとっても楽しいテーマの1つです。

 

ボクは最近アフィンガー5を導入しました。カスタマイズにドはまり中です。

アフィンガー5なら初心者でも簡単にオシャレなサイトを仕上げることができちゃいますよ。

aoyui

 

まだアフィンガー5を導入してない方はこちらからどうぞ。

 

AFFINGER5の購入はコチラ

 

 

アフィンガー5を愛用してるブロガーのなかでもスライドショーを設定してる人は非常に多いです。

ボクもその一人ですが、

設定方法はとても簡単ですし、なによりブログをオシャレにしてくれる機能の1つです。

 

記事の内容

  • スライドショーを設定するメリット
  • スライドショーの設定方法
  • 基礎的な使い方から応用編まで解説

 

それではチャチャッとスライドショーを設定しちゃいましょう。

 

スライドショーを設定するメリット

スライドショーは一定の時間ごとに、自動で記事を横にスクロールしてくれる機能です。

画像をクリックすればその記事に飛ぶようになってます。

 

スライドショーのメリット

読者の興味を惹きつける効果がある

サイトのデザインをオシャレに演出

 

 

2021/7/17

コンテンツ販売のために抑えておくべき【ネット集客の全体像】

  当ブログにお越しいただきありがとうございます。 これから独自コンテンツを作り販売していこうと思っているaoyuiと申します。 このブログは、独自コンテンツの販売を目指すひとへ、コンテンツの作り方や販売の方法など、役立つ情報を提供していくブログとなっています。 コンテンツ販売をするために、僕が日々学んだことをみなさんに提供するために当ブログを立ち上げました。 初心者には難しいとされる「コンテンツ販売」を少しでも分かりやすくお伝えできればと思います。   今回の記事では次のような悩みを ...

続きを読む

2021/7/4

コンテンツ販売を始めるなら、まず自分に合ったWeb集客法を探そう

  当ブログにお越しいただきありがとうございます。 これから独自コンテンツを作って販売していこうと思っているaoyuiと申します。 このブログは、独自コンテンツの販売を目指すひとへ、役立つ情報を提供していくブログとなっています。 今回の記事では次のような悩みを解決したいと思います。   悩んでる女性売上を上げるためにはWeb集客が重要ってよく聞くけど、いったい何をすればいいの?   忙しい私でもできる集客法ってあるのかな・・・   Web集客といっても有料のものや無 ...

続きを読む

2021/6/20

【見込み客を増やそう】ブログに公式LINEバナーを貼りつける方法

  当ブログにお越しいただきありがとうございます。 これから独自コンテンツを作って販売していこうと思っているaoyuiと申します。 このブログは、独自コンテンツの販売を目指すひとへ、役立つ情報を提供していくブログとなっています。   悩んでる人ところで、ブログなどでよく見かける「友だち追加」のバナーってどうやって貼りつけるんですか?     確かによく見かけますよね。 ↑↑ これのことでしょ? aoyui   確かにぼくも「みなさん貼ってるなぁ」とはウスウ ...

続きを読む

2021/7/8

独自コンテンツを販売するまでの流れ【実績なくても大丈夫】

当ブログにお越しいただきありがとうございます。 これから独自コンテンツを作って販売していこうと思っているaoyuiと申します。 このブログは、独自コンテンツの販売を目指すひとへ、役立つ情報を提供していくブログとなっています。   悩んでる女性独自コンテンツを販売したいけど、やり方が分からない・・・ まだ何の実績もないけど、自分の商品を作ってみたい。やっぱり無理ですかね?   もしかしたらこんな悩みをお持ちじゃないですか? そこでこの記事では、「独自コンテンツを作って販売するまでの流れ」 ...

続きを読む

2021/7/4

実績ゼロでも独自コンテンツを作ってみたい!【販売までの土台づくり】

当ブログにお越しいただきありがとうございます。 これから独自コンテンツを作って販売していこうと思っているaoyuiと申します。 このブログは、独自コンテンツの販売を目指すひとへ、役立つ情報を提供していくブログとなっています。   悩んでる女性 これといった実績も経験もないから、自分の商品を作るなんて無理ですよね?   独自コンテンツを販売してみたいとは思ってるけど、 実績ゼロの人の商品なんて、誰も購入してくれないでしょ?   この記事が、そんな悩みや疑問を抱えた人の参考になっ ...

続きを読む

 

ボクの場合はこんな感じで新着記事をスライドさせてます。

トップページだけに挿入することもできますし、1つ1つの記事内に挿入することも可能です。

 

でも1つ1つの記事に挿入すると邪魔なので、トップページだけがオススメ。

サイトの表示速度も遅くなるので…

aoyui

 

オシャレなアイキャッチ画像を使用している方なら、さらに読者の興味を惹きつけることができるはずです。

 

スライドショーの設定方法(基礎編)

それではスライドショーの設定方法を解説していきます。

いろんな方法がありますが、まずは基礎的な2つの方法についてです。

ぜひ自分のサイトに合った表示方法を試してみてください。

 

ヘッダーに表示する方法

まずは基本的なヘッダー部分に表示する方法です。

『ダッシュボード』の『AFFINGER5管理』⇒『ヘッダー』をクリックしましょう。

その中の『記事スライドショー設定』を選択してください。

 

「ヘッダーに記事をスライドで表示する」にチェックを入れればスライドショーを表示することができます。

もうすこし変更を加えたければ、表示速度を変えてみたり、スライドさせたいカテゴリーを限定することもできます。

 

 

カテゴリIDは、「投稿」⇒「カテゴリー」を選択すると閲覧できます。

スライドさせたいIDを、先ほどの「表示するカテゴリID」に入力すればOKです。

最後に「save」を押して設定を完了させましょう。

 

こんな感じでヘッダー部分に記事が挿入されていれば成功です。

 

すごく簡単ですよね。

たったこれだけでヘッダー部分にスライドショーを表示することができます。

これだけでもサイトがグッとオシャレになりますよ。

 

トップページに表示する方法

2つ目の方法は複数枚の記事を並べた状態でスライドさせる方法です。

この設定をしたいブロガーさんも多いんじゃないでしょうか。

先ほどの、ボクが設定してるスライドショーのことですね。

 

まず「AFFINGER5管理」の「トップページ」を選択します。

そして、「挿入コンテンツ」を選びましょう。

 

 

そうすると、記事を作成する時のような画面になるので、ここで「タグ」をクリックします。

その中の「記事一覧/カード」⇒「カテゴリ一覧(スライドショー)」をクリック。

 

そうすると自動でスライドショーのコードが貼りつけられます。

ここで「save」を押してサイトを表示するとこんな感じでサイトに反映されます。

 

 

基本的なスライドショーの設定方法はこの2つです。

さらにちょっと手を加えて差別化を図りたいなら次のようなカスタマイズをしてみましょう。

 

スライドショーの設定方法(応用編)

基礎的なスライドショーの設定に少し手を加えるだけで見た目もけっこう変わります。

これから紹介する設定もぜひ試してみてください。

 

記事の枚数を変更する

初期設定では3つの記事が表示されて5つの記事がスライドするようになってますが、

この枚数を変更することもできます。

 

先ほどタグ付けしたコードを少し変更します。

下の画像の赤く囲った部分ですが、

もともと5だったものを7に、3,3,1だったものを5,3,1に変更しました。

 

そうすると、こんな感じで少し画像が小さくなってスライドされる枚数も増やすことができます。

 

 

 

アイキャッチ画像と記事タイトルのみを表示する

もっとシンプルに画像と記事タイトルだけを表示することも可能です。

コードの一番最後の部分に「text」と入力すれば、画像と記事タイトルだけを表示することができます。

 

 

こんな感じに仕上がります。少しシンプルになりましたね。

 

「Read More」の表記の変更

「Read More」という表記を日本語で分かりやすく表示したいなら

コードの「slide more=」の部分を変更します。

「ReadMore」を消して表示したい文章を手入力すればOKです。

今回は「続きを読む」に変更してみました。

 

 

ウィジェットを使用して好きな箇所に表示する

ウィジェットを使えば自分の好きな場所にスライドショーを表示することも可能です。

今回はサイドバーに表示してみます。

 

  1. 外観 ⇒ ウィジェット
  2. サイドバーウィジェットにテキスト挿入
  3. コピーしたコードをテキストエディタで貼りつけ

 

サイドバーに表示する場合は画像が小さく表記されてしまうので、

記事の枚数を変更した時のようにコードを変更しましょう。

初期設定で「3,3,1」となってる部分を「1,3,1」に変更すると、アイキャッチ画像が1枚だけ表記されます。

 

すると、下の画像の赤枠のようにサイドバーにスライドショーが表示されます。

これもなかなかオシャレな感じでいいですね。

 

まとめ:スライドショーを使ってトップページをオシャレにカスタマイズ

サイトのトップページは言わばブログの顔みたいな見たいなものです。

見た目はオシャレに越したことはないですよね。

 

きっと読者の人も「ちょっとこのブログ読み進めてみようかな」と思ってくれるに違いありません。

 

アフィンガー5はカスタマイズできることが本当に多いテーマの一つです。

ボクはブログを始めて1年経ってから導入しましたが、もっと早くに導入すべきだったと後悔してます。

 

アフィンガー5を使いだしてから、記事を書くのが一段と楽しくなったし何よりカスタマイズできることが多いのが魅力なんですよね。

 

こんなカスタマイズしたいなぁってことがすぐにできちゃうのがこのテーマの素晴らしいとこです。
aoyui

 

ぜひアフィンガー5を使って、オシャレなサイト作りを目指してください。

 

 

AFFINGER5公式サイト

-ブログ運営

© 2021 Happy My Life