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/1/16

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

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

ReadMore

no image

2022/1/20

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

  『この記事タイトルとURLをコピー』   AFFINGERで「この記事タイトルとURLをコピーする」ボタンを表示する方法の紹介です。   本記事の信頼性 記事下のSNSボタンの上に表示されるようになります。 もくじだよ1 AFFINGER記事下に「この記事タイトルとURLをコピーする」ボタンを表示するメリット2 『この記事タイトルとURLをコピーする』ボタンとSNSボタンの方法3 まとめ AFFINGER記事下に「この記事タイトルとURLをコピーする」ボタンを表示するメリ ...

ReadMore

AFFINGER SNS イラスト 消えた 解決法

2022/1/19

【解決】AFFINGERで、SNSボタンのイラストが表示しない?追加CSSでコピペで解決

ムロSNSボタンのアイコンイラストが消えた!!!!   そんな人がけっこういます、原因としてはプラグインを入れたりしていると、何らかの原因で急にきえつことがわかりましたが、   実際には、どのプラグインが原因なのかは不明です。   とりあえず、やることは追加CSSでコードを入れ公開をすると解決したので紹介します。 本記事の信頼性   もくじだよ1 AFFINGERのSNSアイコンイラストが消えた時の対処法1.1 解決法はこれ!2 まとめ AFFINGERのSNSアイ ...

ReadMore

AFFINGER 投稿日 更新日 

2022/1/16

AFFINGER「投稿日」と「更新日」を表示・非表示する方法は?メリットとデメリットはある?

ブログで新規記事を更新すrと、アイキャッチの下に投稿日が出たりします。そして、記事の上には、更新日と、投稿日も表示されたりしている記事もありますよね。   ムロこれって必要あるの?   今回は、AFFINGERで記事の更新日と投稿日についてです。私のブログ記事には投稿日も、更新日も表示していますがどちらも表示していない記事や、どちらか一つを表示しているものもありバラバラです。   どちらがいいとか、AFFINGERではどうやって表示するのかを、非表示するのかのやり方を紹介しま ...

ReadMore

2022/1/14

AFFINGERで文章の漢字に「ふりがな(ルビ)」をふる機能を紹介

  AFFINGERで書いたテキストに「ふりがな」をふる方法の紹介をします。     漢字だけでもいいですが、「ふりがな」をふるか迷うけど、ひらがなだと意味が伝わらないかも?と思うときにはAFFINGERだけの「ふりがな」を漢字の上に加えることができる機能です。   この「ふりがな」をふる機能はAFFINGERだけです。     もくじだよ1 AFFINGERでは、ふりがなをルビをいう?2 AFFINGERで、ふりがな、ルビをふるやり方の説明(画 ...

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カスタマイズ
-, , , ,

© 2022 MURO BLOG Powered by AFFINGER5