AFFINGERカスタマイズ

【AFFINGER】記事スライドショーでブログトップページにカスタマイズする方法!

2021年2月11日

ムロ
AFFINGERのテーマを使っているブロガーで、お洒落なスライドショーの作り方です

 

トップページで、スライドショーで記事紹介をしていると目をひきます。

 

AFFINGERにしかない、とてもデザイン性がある機能の一つです。

 

ムロ
このブログは、AFFINGERのテーマを買ったけど使い方がわからない!?そんな初心者さんに、記事作成ツールの使い方や、AFFINGERでSEOを効率よくするための記事を書いているブログです( ^ω^ ) 私も、AFFINGERのテーマを購入したときはかなり苦戦しました。そんな経験を元に使い方を記事で紹介していきます。

AFFINGER プラグインセット販売価格29,800円(税込)

 

\当サイト限定特典付き/

AFFINGER プラグインセットショップはコチラ

 

 

 

今回はAFFINGERで記事スライドショーの作り方を見せ方を紹介していきます。

 

 

『AFFINGER5』公式サイトです

ムロ
今回、初心者でも使えるようにマニュアルを作りました。この記事を読んでもらえればAFFINGERの使い方がよくわかります。【最新版2021年】AFFINGER5の使い方とインストール方法、補足マニュアルと不具合の修正を紹介本ブログの人気記事です。

AFFINGER、記事スライドショーとは?スライドショーの作り方

AFFINGERのテーマを使っている人は必ず使っている機能の一つに記事スライドショーという機能があります。

こちらが記事スライドショーと呼ばれるもので、

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

no image

2022/6/6

AFFINGER6の記事作成パーツを全部紹介!

テーマで用意されているスタイルやショートコードによるタグなどのデザイン確認用ページです。Gutenbergで使用する場合はクラッシックブロックをご利用下さい。 もくじだよ1 スタイル1.1 テキスト1.2 アニメーション1.3 アイコン1.4 見出し1.4.1 キャッチコピー1.4.2 記事タイトル1.4.3 まとめ1.4.4 カウント1.4.5 これは「まとめ」用の見出しです1.4.6 ランキング(AFFINGER又はEX版のみ)1.4.7 ランキング1位1.4.8 ランキング2位1.4.9 ランキング ...

ReadMore

no image

2022/6/6

ブログで稼ぐために遠回りしないステップ4

  ブログで稼ぐために、必要な4ステップを紹介します。 もくじだよ1 サイト設計1.1 ステップ1 収益が上がる要素の理解を深める1.2 ステップ2 優先順位を決めて、目標設定する1.3 ステップ3 ブログで売る商品を決める1.4 ステップ4 売り方を考える1.5 ステップ5 サイトの方向性を考える1.6 ステップ6 キーワード選定1.7 ステップ7 記事を順番 集客記事→収益記事2 SEO対策3 キーワード選定3.1 検索ボリューム数を洗い出す3.2 キーワードの選定方法は?7ステップで解説3 ...

ReadMore

2022/3/28

AFFINGERトップページに、流れるインフォメーションバーの作成方法

おしゃれに見える「インフォメーションバー」です。   ブロガーさんなら設定している方が多いのではないでしょうか?     固定されたインフォメーションバーを設定するよりも動きがあるので、読者の目線がに止まるように設定したいと思ってる方も多いですよね。   そこで、今回は動いているインフォメーションバーの設定方法について解説していきます。   本記事の信頼性   今回は下記の画像のようにインフォメーションバーを流れるように設定する方法を画像を使って ...

ReadMore

2022/3/28

AFFINGERのハンバーガーメニューのテキストは表示させる

AFFINGER5のハンバーガーメニューは、テキストを表示させた方がクリック率が高まるので、メニューを見てもらいたいなら表示することをおすすめします。   もくじだよ1 ハンバーガーメニューとは?2 テキストを表示させるべき?3 テキストが表示できない対処法 ハンバーガーメニューとは? ハンバーガーメニューとは、三本の横棒が縦に並んだアイコンのことで、アイコンをクリックすることでメニューが表示されます。 AFFINGER5では、「AFFINGER5管理」でデザインの変更や「テキスト(MENU)」 ...

ReadMore

2022/3/28

AFFINGER、『この記事タイトルとURLをコピー』ボタンの設置の方法と、設置することでのメリットは?

  『この記事タイトルとURLをコピー』   AFFINGERで「この記事タイトルとURLをコピーする」ボタンを表示する方法の紹介です。   本記事の信頼性 記事下のSNSボタンの上に表示されるようになります。   \当サイト限定特典付き/AFFINGER申し込む※AFFINGERで稼ぐ   もくじだよ1 AFFINGER記事下に「この記事タイトルとURLをコピーする」ボタンを表示するメリット2 『この記事タイトルとURLをコピーする』ボタンとSNSボタン ...

ReadMore

記事スライドショーのおかげで、

サイトを見に来てくれたお客さんが、気になる記事画像をクリックし、より多くの記事を見てくれます。

サイト滞在時間が長い=良いサイト

と判断され

Googleからの評価も高くなり、ドメインパワーが強くなったりすることがわかりました。

  • サイト滞在時間が長い=良いサイトと判断さる
  • Google先生からの評価も高くなりドメインパワーが上がる

サイトが強くなります。

ということで、トップページに記事スライドショーを作ります。

AFFINGER、記事スライドショーの作り方

step
1
タグ>記事一覧>カテゴリ一覧(スライドショー)

step
2
表示したい記事の数を決めます

 command
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""]

page="5”

これが、記事の数になります。新着記事から新しい記事5つを表示する意味です。

スライドショー、補足説明

スライドショーのコードでの補足説明を載せときます。

 command
[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,1" slide_date="" slide_more="ReadMore" slide_center="on" fullsize_type=""]

ココがポイント

  • cat="" にスライドショーにする記事のカテゴリを入力する
    ※例: cat="0" (0は新着記事)
  • page=""に表示する記事の数を入力する
    ※例: page="5"
  • slide="on"でスライドショーになる
  • slides_to_show=""は端末ごとの同時表示数設定
    ※例: slides_to_show="3,3,1" だとPC3枚、タブレット3枚、スマホ1枚を指す
  • slide_date=""はアイキャッチ右下に公開日(更新日)の表示設定
  • slide_more=""は続きを読むボタンの文言
    ※例: slide_more="ReadMore"

 

カテゴリーIDは、投稿一覧>>カテゴリーから

 

 

こんな感じでアレンジしてください。

 

最後に、、、

ポイント

この、記事スライドショーはトップページにカスタマイズするとこが重要なので。

トップページ用の固定ページを作ることをおすすめします!

 

まとめ:AFFINGERで記事スライドショーをトップページに作るとおしゃれ

 

スライドショーをトップページにすると読者に見やすくわかりやすいです。

 

これは、AFFINGERにしかない機能なのでデザイン的にもかなり良いですよね( ^ω^ )

 

ぜひ、お試しください( ´ ▽ ` )

 

 コチラも読まれています

>>【AFFINGER】ブログのトップページをカスタマイズするやり方

>>【AFFINGER】スライドボックスを作り、枠で囲む作り方

>>【AFFINGER】バナーリンクの作り方、ブログはオシャレになる【バナーリンク】

 

 

広告1

広告2

-AFFINGERカスタマイズ
-, , , ,