ACTION レイアウト

記事一覧の作成 / サムネイル画像設定

設定による記事一覧のデザインパターンを紹介致します。

設定は主にテーマ管理の「全体設定」>サムネイル画像設定で変更できます。

選択できない設定は一度、上位の設定を有効化、保存することで選択できるようになります

テーマ管理

設定パターン

記事一覧のデザインパターンと設定内容を紹介します。

丸いアイキャッチデザイン

四角のアイキャッチデザイン

フルサイズのアイキャッチデザイン

アイキャッチ画像を右側にしたデザイン

アイキャッチを一番大きくしたデザイン

大きいアイキャッチにポラロイドデザインを追加

四角いアイキャッチにポラロイド+リボンを追加

アイキャッチ画像なしのデザイン

カスタマイザー

サムネイル画像の枠線

カスタマイザーの「メインエリア」>「記事一覧/ページャーとPREV NEXTリンク」>”サムネイル画像”で枠線を設定できます。

区切りのボーダー

カスタマイザーの「メインエリア」>「記事一覧/ページャーとPREV NEXTリンク」で区切り線を設定できます。

カード型デザインパターン

EX版

EX版ではカード型のデザインを閲覧サイズ(3パターン)ごとの列数を3~1で指定することが可能です(テーマ管理の「投稿・固定記事」>”記事一覧のカードデザイン化[EX])。

EX版のご案内はこちら

通常(PC3列・モバイル2列)

タイプB(PC2列・モバイル1列)

サムネイル画像縦横比 について

カード型デザインに関してのサムネイル画像縦横比は以下でご確認ください。

オリジナル子テーマ「JET」

専用子テーマ「JET」では設定によりカード型のデザインをフルサイズで表示できます。

EX版との主な違いは以下のとおりです

  • フルサイズの為、アイキャッチが綺麗に表示される
  • Googleアドセンスのインフィード広告に対応(2020/01時点)
  • 閲覧サイズによる列数のカスタマイズは不可

広告が溶け込む魔法の子テーマ「JET(WING正式対応版)」

関連

解決しないことは検索もしてみてね

AFFINGERのAI(GPTs)で『小学1年生 英語勉強方法 おすすめ』記事を作成

「頭脳」を手に入れるAFFINGER監修 GPTs一覧

あなたにおすすめ

デザイン済みデータ配布ページ

コン太

すごくカスタマイズできるのはよくわかったけど、できればボクは簡単にすぐ始めたいんだ。

シカ子

それなら「デザイン済みデータ」を使用するといいわ。デザインは主に「カスタマイザー」「ウィジェット」「テーマ管理」の設定でできているのだけど、それらのデータを完成形でインポートできるの

コン太

わぁ!それは助かる

シカ子

インポートしてから設定やカラーも変更できるから最初のスタートデザインとしても使えるわね。必ず注意事項などを確認してね

デザイン済みデータ配布ページ - 【公式】STINGER STORE
デザイン済みデータ配布ページ

AFFINGER及びEX版専用のデザイン反映データ(子テーマではありません)です。 利用規約及びご承 ...

on-store.net

オススメ記事

no image 1

ver20240115よりレイアウト及びウィジェットエリア名称を一部変更いたしました。 下部にPDF ...

2

https://action-sample.com/ 上のサイトのようなカテゴリーで分けた記事一覧の ...

3

AFFINGERブロックプラグインプラグインを有効化しよう 当テーマは「AFFINGERブロックプラ ...

-ACTION, レイアウト

PAGE TOP