AFFINGER

AFFINGER5でトップページをカードデザインにする方法

AFFINGER5でトップページをカードデザインにする方法

AFFINGER5でトップページのデザインをカードデザインに変えるためには、自作でカードデザインを作るか、ショートコード「st-catgroup」を使いスライドショーでの実装しかありません。

ちなみにスライドショーのイメージは次の通りです。

Word(ワード)応用編 仕事で使える報告書の作り方~後編~
Word(ワード)応用編 仕事で使える報告書の作り方~後編~

2022/12/25

目次1 Word応用編 報告書の作り方 ~ 後編 ~2 Wordで報告書の作り方2.1 報告書用の表を追加する2.2 タイトルラベルの幅を変更する2.3 報告書の文字を入力する2.4 特定のセルのみ幅 ...

Word(ワード)応用編 仕事で使える報告書の作り方~前編~

2022/12/25

目次1 Word応用編 報告書の作り方 ~ 前編 ~2 Wordで印鑑枠の作り方2.1 印鑑枠用の表を挿入する2.2 印鑑枠のセル幅を変更する2.3 印鑑枠のセル高さを変更する2.4 タイトルと印鑑枠 ...

Word(ワード)で画像や図形を挿入する
初心者でも簡単 Word(ワード)で画像や図形を挿入する

2022/12/25

目次1 【6時間目】画像や図形を挿入する ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)に画像を挿入する3 Word(ワード)に図形を挿入する4 終わりに 【6時間目】画像や図形を ...

初心者向けWord(ワード)講座 円グラフの作り方
【Word入門】円グラフの作り方

2022/12/25

目次1 【5時間目】円グラフの作り方 ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)に円グラフを挿入する2.1 円グラフのタイトルを編集する2.2 円グラフにデータラベルを表示する ...

Word(ワード)で折れ線グラフを挿入する
【初心者向け】Word(ワード)で折れ線グラフを挿入する

2022/12/25

目次1 【4時間目】折れ線グラフの作り方 ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)に折れ線グラフを挿入する2.1 折れ線グラフのタイトルを編集する2.2 折れ線グラフの凡例の ...

Word(ワード)で棒グラフを作成する方法
Word(ワード)講座 棒グラフの作り方

2022/12/25

目次1 【3時間目】棒グラフの作り方 ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)に棒グラフを挿入する2.1 棒グラフのタイトルを編集する2.2 棒グラフの色を変更する2.3 棒 ...

初心者向けWord(ワード)講座 表の作り方
【Word入門】表の作り方

2022/12/25

目次1 表の作り方 ~Word(ワード)初心者向け講座 基礎編~2 Word(ワード)で表を挿入する2.1 表内の文字位置を変える2.2 表内の文字高さを調整する2.3 表の背景色や文字色を変更する2 ...

【Word初心座講座】文章を作成する
【Word入門】初心者にも分かるWordの使い方

2022/12/25

目次1 はじめに2 文章を作成する ~Word(ワード)初心者向け講座  基礎編~2.1 文字の位置を変える2.2 文字のサイズを変える2.3 文字の高さを調整する2.4 階層構造のリストを作成する3 ...

 

カードデザインを簡単に作る方法は、AFFINGER5EXにアップグレードするか、子テーマのJETを使うかです。

本記事では、AFFINGER5EXを使ったカートデザインの作成方法について紹介しています。

AFFINGER5のトップページデザイン(カートデザイン反映前)

カートデザイン反映前のトップページのデザインは次の通りです。

カードデザイン適用前

 

AFFINGER5EXのカートデザイン

そして、AFFINGER5EXで作ったカートデザインは次の通りです。同じデザインでもカートデザインの方がだいぶオシャレになりました。

カートデザイン適用後

AFFINGER5EX カートデザインの設定方法

ここからはAFFINGER5EX カートデザインの設定方法を説明してきます。

まずはAFFINGER5の設定から「投稿・固定記事」を選択します。

カートデザインの設定手順1

 

「投稿・固定記事設定」画面には、記事一覧のカードデザイン化[EX]の項目があるので「トップページ及びアーカイブの記事一覧をカートデザインにする」にチェックをいれます。

カートデザイン手順2

そして、列数設定にお好みの数値を入れます。ここの数値は3を入れると3列、2を入れると2列、1を入れると1列となり「n,n,n」形式で入力します。※nは数値

数値の1番目は960px以上、2番目は959~600px、3番目は599px以下と閲覧サイズにより縦数の数を変えることができます。

また、カードデザインには次の2パターンあります。

  • 「カードデザインパターンをBタイプに変更」にチェックを入れた場合のデザイン

カートデザイン適用後

  • 「カードデザインパターンをBタイプに変更」にチェックを入れなかった場合のデザイン

カートデザイン例

AFFINGER5EXでカートデザインを作成する方法は以上です。

AFFINGER5EXを使えば簡単にカートデザインを作ることができます。

helpful