AFFINGERのカスタマイズ

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

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

記事一覧をスライドショーさせる方法を教えて

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

\ こういうの /

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

2022/6/21

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

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

ReadMore

2022/4/24

【ブログでよく使う】アフィンガーのサイドバーのカスタマイズと設定まとめ

今回は、私がよくやるアフィンガーのサイドバー設定・カスタムの記事まとめです! 随時更新予定です! プロフィールカードの設置 「このブログは誰が書いているのか」という人となりがわかるプロフィールカードを設置します。 特段、設置したくない理由がない限りは、読者の安心・信頼ポイントでもあるので、設置しておくことをおすすめします。 サイドバーの見出しデザインの変更 サイドバーの見出しデザインを変更したい場合は「外観」>「カスタマイズ」から変更が可能です。 メインに合わせて、サイドバーも統一感を持たせて変更しておき ...

ReadMore

【ブログに載せる写真に一括でコピーライトを表示させたい】写真編集ソフト「Light room」でできる!

2022/4/21

【ブログに載せる写真に一括でコピーライトを表示させたい】写真編集ソフト「Light room」でできる!

Adobeが提供してくれている写真編集ソフトの「Light room」を使用していきます! 今回は写真に表示するクレジット表記「©」を付けていく方法です。 私も何度か自分の写真を無断使用・転送されたことがあるので、クレジット表記はとっても大事 写真をブログにあげる際に、写真にコピーライトを表示させますが、枚数が多いので、1枚1枚入れていくのは大変な作業! ということで 一括でコピーライトを入れていこう と思います! Light roomってなに? インスタグラムでも編集方法など、よく載っている「画像編集ソ ...

ReadMore

アフィンガーのサイドバーの見出しの変え方

2022/4/7

アフィンガーのサイドバーの見出しの変え方

今回は、サイドバーの見出しを変えていこうと思います! 「カスタマイズで色々触ってみたけど、うまく反映されない」 と、ブログを立ち上げるたびに、なぜか毎回つまづいているので、備忘録として。 サイドバーの見出しを変える WordPressのダッシュボードから「外観」>「カスタマイズ」を開きます。 「見出しタグ(hx)/ テキスト」を選択 「ウィジェットタイトル(サイドバー)」を選択 カラー 枠線 画像挿入 カスタマイズ済みのデザイン が選択可能です! まとめ 書いてみたらなんてことはない場所にあるんですが、毎 ...

ReadMore

サイドバーにボックスメニュー

2022/4/4

アフィンガー(AFFINGER)サイドバーにアイコン付きのメニューボックスを表示させる方法

当ブログはAFFINGERを使用しています 今回は、 メニューボックスを作成 サイドバーに挿入 していく手順です! おすすめのアイコンサイトも紹介します! ----- 表示例 ----- Camp Trip Gourmet Library サブテキストを入れることも可能です! Camp キャンプ・用品 Trip 国内・海外 Gourmet 美味しいお店 Library おすすめの本 パソコン・タブレットでは横4列 スマホ・サイドバーでは、横2列ずつになります。 このアイコンはFlat iconでダウンロー ...

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