AFFINGERのカスタマイズ

アフィンガー(AFFINGER)スライドショー記事一覧を表示させる方法

2022年2月15日

アフィンガー(AFFINGER)スライドショー記事一覧を表示させる方法

記事一覧をスライドショーさせる方法のご紹介です!

今回は、記事一覧をスライドショーにしていきます!

\ こういうの /

アフィンガーのカスタマイズ『バナー風ボタン』の作り方・手順【画像付き解説】

2024年12月10日

アフィンガーのカスタマイズ『バナー風ボタン』の作り方・手順【画像付き解説】

「ブログに広告みたいなクリックできる画像が貼ってあるのを見かけるんだけど、どうやって作るの?」 「バナーを作りたいんだけど、画像編集ソフトを使わずにサクっとつくりたい」 ブログを書いていると、そんな風に思うことって多いですよね? アフィンガーならこういったバナーが直感的に、かつポチポチ押すだけで簡単に作ることができます。 バナーの見本 \サイドバーに入れたり/ \ボタンを入れることもできます/ アフィンガーにはバナー風ボタンを手軽に作れるブロックがあるので利用していきましょう。 画像で挿入してももちろんO ...

ReadMore

トマレバのカスタマイズを反映・ブログに表示させる方法と手順

2024年12月10日

トマレバのカスタマイズを反映・ブログに表示させる方法と手順

トマレバのカスタマイズ用CSSがうまく反映されない トマレバのデザインを変えたい トマレバをブログに乗せるとデザインが崩れる 今回は、トマレバのカスタマイズ用CSSを使って、デザインの反映から、ブログ記事に挿入するまでの一連の流れを解説していきます! \こういうのをブログに埋め込みます!/ 東京ディズニーランド(R)ホテル posted with トマレバ 千葉県浦安市舞浜29-1 楽天トラベル じゃらん JTB knt 一休 るるぶ Yahoo!トラベル それぞれのボタンが全てアフィリエイトボタンになっ ...

ReadMore

【海外ブログの始め方】海外ブロガーを8年してみて気づいたこと

2024年12月10日

【海外ブログの始め方】海外ブロガーを8年してみて気づいたこと

海外ブログを始めてみたいんだけど どうなんだろう? どうしたらいいんだろう? 中々稼げない とお悩みではありませんか? 海外ブログを始めてみて 試行錯誤したこと どんな記事を書いていったらいいのか ブログで稼ぐことについて まとめてみました。 海外でブログを始めたいと思っている人の力になれると嬉しいです! どんな記事を書いていたの? ターゲット層 現地生活の日本人 旅行者 がメインユーザーになります。 主なカテゴリー 現地情報 観光地 飲食店 同じ海外生活者の悩みの解決の糸口 になるような記事を書いていま ...

ReadMore

2024年12月10日

【海外ブログのロードマップ】海外生活中のブログの始め方|開設までの手順・方法

\この記事はこんな方におすすめ/ 海外駐在中にブログを始めたい人 ブログの始め方を知りたい人 WordPressでブログを始めたい 海外生活中に、せっかくなら現地の情報を発信したい! 海外駐在中に、思い出としてブログに残したい! と思ことってありますよね。 私も、海外生活しているなら「せっかくだしブログに書き留めておこう」と思い、海外ブログを立ち上げた一人です。 まめの経歴 海外ブロガー8年 現地でホテル・飲食店・デパートからのPR依頼を多数受ける 他4つのブログを運営 今回は WordPressでブログ ...

ReadMore

7つのブログを”Googleアドセンスに合格する”ためにやったこと【不合格体験もあり】

2024年12月10日

7つのブログを”Googleアドセンスに合格する”ためにやったこと【不合格体験もあり】

こんにちは、まめこです。 Googleアドセンス落ちたーなにがいけなかったのー!?も~、5回も落ちてる腕なんか組みやがって!はぁ、もうだめだ、原因もわからないいや、もうアドセンスは諦めよう!そうしよう! Googleアドセンスに落ちると「あなたのブログはコンテンツとして価値がない」と言われているような気がして、へこみませんか? へこむどころではない、私の場合、わかりやすくだいぶ落ち込みます。 今回は、今まで何度もやってきたGoogleアドセンスに合格させるためにやってきた来たことまとめておきます! \この ...

ReadMore

  • 動くものに惹かれやすい心理に効果的
  • 目につきやすい
  • やりすぎるとサイトが重くなるので注意

今回は「ブロックエディタ」と「クラシックエディタ」両方で表示させる方法を書いていきます!

使用しているアフィンガーはAFFINGER6EXですが、6や5EXでも同じ方法でできます!

目次からGO!

ブロックエディタで設定

スライドショーを挿入・設定する

「+」でブロックを追加し「すべて表示」させます。

「STINGER」の項目から「カテゴリ一覧」を挿入します。

記事一覧の場合は、固定記事も含まれるので、カテゴリ一覧が扱いやすいかなと思います。

「カテゴリ記事一覧」の各設定は、右側の「ブロック」から設定ができます。

「ブロック」の少し下の方に「スライドショー」とあるので、スライドショーを「ON」にします。

スライドショーを「ON」にすると、スライドショーの設定ができます。

各設定はこんな感じです。

項目詳細
カテゴリID表示したいカテゴリID(新着記事すべての場合は「0」)
ページ表示したい記事数、デフォルト5記事
(あまり多いとサイトが重くなるので注意)
昇順・降順昇順:古い記事から表示
降順:新しい記事から表示
投稿ID投稿順に表示、ランダムに表示など選べる
子カテゴリを含む親カテゴリの場合、子カテゴリも含むかどうか
スライド表示数1回の画面に表示される枚数《PC,Tab,モバイル》の順
※最大3
※3,2,1はOK。1,2,3や3,2,3など数字が大きくなるのはNG。
日付日付表示有無
ReadMoreボタン表示名
モバイル中央寄せモバイル表示の際、中央に寄せて、左右端に少し記事を表示させるかどうか
スライドタイプデフォルトは抜粋も表示される

カスタムボタンを設置する

記事一覧をスライドショーで設定した場合は、記事を一覧ですべて見せることができないので、必要に応じてボタンで記事一覧へ誘導する必要があります。

「ブロックを追加」>「すべて表示」

「カスタムボタン」を挿入します。

ボタンの設定は、右側の「設定」から設定できます。

上から順番に設定していけば完成です!

クラシックエディタで設定

スライドショーを挿入・設定する

「タグ」>「記事一覧 / カード」>「カテゴリ一覧(スライドショー)」を挿入します。

[st-catgroup cat="表示したいカテゴリID" page="表示したい記事枚数" order="新着順(desc)/ 更新の古いものから表示(asc)" orderby="id" child="子カテゴリも表示(on)" slide="スライドさせる(on)" slides_to_show="画面に表示させる記事数(PC,Tab,モバイル)" slide_date="" slide_more="ボタン表示名(ReadMore)" slide_center="on" fullsize_type=""]

新着記事一覧を表示させたい場合は「cat="0"」で表示できます。

カスタムボタンを挿入・設定する

記事一覧をスライドショーで設定した場合は、記事を一覧ですべて見せることができないので、必要に応じてボタンで記事一覧へ誘導する必要があります。

「タグ」>「カスタムボタン」>「ノーマル」>「基本」でカスタムボタンを挿入します。

コードの内訳はこんな感じです。

[st-mybutton class="" url="リンク先URL" title="ボタン表示名" rel="" webicon="Webアイコン左側" target="" color="文字色(#000000)" bgcolor="背景色(#FFF)" bgcolor_top="" bordercolor="枠線の色(#CCC)" borderwidth="枠線の太さ(3)" borderradius="枠線の丸み(四角は「0」楕円「50」)" fontsize="文字サイズ" fontweight="太さ(太文字「bold」)" width="横幅(100)" webicon_after="Webアイコン右側" shadow="" ref="" beacon=""]

Webアイコンは「タグ」>「ショートコード補助」>「Webアイコン(クラス)」で挿入できます。

アフィンガー便利すぎるぞ!

まとめ

スライドショーの記事一覧の表示方法でした!

スライドショーは、トップ画面だけではなく、記事下、サイドバーなどにも利用できます!

スポンサーリンク

  • この記事を書いた人
  • 最新記事

まめ

【ブログ歴10年】

これからブログを書いてみたいなという人に向けて『ブログを始める手順』『ブログについて』や知っておくと便利な『おすすめツール』の紹介しています。

夫について行き海外生活スタート▸出産▸現在3歳の息子と在宅での生活

子育てのかたわらでも、場所や時間にとらわれない働き方を目指して発信していきます!

-AFFINGERのカスタマイズ