AFFINGER5 Blog

[CSS不要]AFFINGER5のTOP画面をカード型にする方法(アフィンガー5)

 

AFFINGER5を愛するブロガーのまねたです。

 

・AFFINGER5の記事表示をカード型にする方法を教えてほしい

なやみちゃん

 

今回はこのようなお悩みを解決します。

 

この記事を書いた人

僕の実績

この記事を僕が解説するメリット

  • AFFINGER5を実際に使っている
  • AFFINGER5のカスタムにこだわるブロガー
  • 友達向けの発信なので安心の内容

 

今回の結論

  • カード型にする方法は3つある(当ブログ調べ)

 

AFFINGER5のデフォルトの記事の表示は以下の画像のような「リスト型」です。

 

AFFINGER5公式サイトから引用

 

正直これでも見やすいですが、できるならもう少し印象に残るデザインにしたいですよね。

 

実はAFFINGER5には以下の画像のような「カード型」の表示もあり、より読者の目に付くデザインをすることが可能です。

 

 

当記事ではAFFINGER5でこの「カード型」の表示にする方法を紹介します。

 

まねた
プログラミングの知識は一切いらないよ！

 

スポンサーリンク




 

 

[図解]AFFINGER5のカード型にする方法(アフィンガー5)

 

AFFINGER5の記事表示をカード型にする方法は3つあります。(CSSのの知識無しで)

 

3つの方法

  • 通常盤AFFINGER5での設定
  • 専用子テーマJETの使用
  • AFFINGER5 EXを使用

 

通常盤のAFFINGER5での設定でもカード化させることは可能です。(しかしできないところもあります)

 

JETとAFFINGER5EXはAFFINGER5に加えてお金がかかりますが、設定が楽で不具合も起きにくいです。

 

通常盤AFFINGER5(アフィンガー)でのカード型設定

 

まずは通常盤AFFINGER5でカード型に設定する方法です。

 

多くの方はこの方法でカード型に設定することをおすすめします。

 

カードにする手順

  1. AFFINGER5管理の設定
  2. レイアウトの設定
  3. 記事一覧の設定
  4. カード表示設定

この方法がおすすめな人

  • お金をかけずTOP画面をカード化したい人

 

AFFINGER5管理の設定

 

まずはWordPress管理画面を開きましょう。

 

管理画面を開くと「AFFINGER5管理」→「デザイン」→「サムネイル画像設定」の順で進みます。

サムネイル画像設定の中に「フルサイズにする」があるのでチェックしましょう。

 

設定の流れ

  1. WordPress管理画面
  2. AFFINGER5管理
  3. デザイン
  4. サムネイル画像設定
  5. 「フルサイズにする」をチェック

 

レイアウトの設定

 

次にレイアウトの設定です。

 

青くなっている順にカーソルを持っていきましょう

 

まずはAFFINGER管理→トップページ→挿入コンテンツの順で進みましょう。

次に「タグ」→「レイアウト」→「PCとTab」→「左右50%」

 

注意ポイント

左右50%にしないとカードが大きく表示されてしまうので気をつけてください。

 

今回の編集以外でも左右50%は役に立つ場面が多いよ
まねた

 

 

上の画像のようになれば正解です。

 

設定の流れ

  1. AFFINGER5管理
  2. トップページ
  3. 挿入コンテンツ
  4. タグ
  5. レイアウト
  6. PCとタブ
  7. 左右50%

 

記事一覧の設定

 

次は記事一覧の設定です。

 

タグから「記事一覧」→「カテゴリー一覧」の順でクリックしてください。

 

[ st-catgroup cat="0" page="5"(ここからはいらない→) order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]

 

カテゴリー一覧をクリックすると上記のようなタグが出てきますが、必要無いコードもあるので削除します。

 

[ st-catgroup cat="カテゴリーID" page="記事数" ]

 

カテゴリーIDはどこでわかるの？
なやみちゃん

 

 

カテゴリーIDは「投稿」→「カテゴリー」で確認することができます。

 

ここまでできれば「カード型」の表示は完了します

 

設定の流れ

  1. 記事一覧
  2. カテゴリー
  3. 不要コードの削除
  4. カテゴリーIDの入力

 

カード表示の設定(よりカードぽくする)

 

ここからはより見やすいカード表示の仕方になります。

 

 

まず先ほどのショートコードを選択します。

 

 

選択をしたら「スタイル」→「レイアウト」→「カードスタイル」の順で選択してください。

 

設定の流れ

  1. スタイル
  2. レイアウト
  3. カードスタイル

 

まねた
ちなみに僕はカードスタイルBを選択しています

 

注意ポイント

タグにもレイアウトがあるので、間違えないようにしましょう。

 

通常盤AFFINGER5(アフィンガー)でのカード型設定デメリット

 

通常AFFINGER5版でのカード型設定には大きなデメリット2つがあります。

 

通常盤のデメリット

  • 関連記事では設定できない
  • 新着記事では設定できない

 

関連記事や新着記事をトップページで表示するにはJETやAFFINGER5EXを購入する必要があります。

 

設定する方法もあるのですがCSSの知識が必要となってくるため無理はしないでおきましょう。

 

ただお金をかけることなく設定できるのは嬉しい点ですよね
まねた

 

AFFINGER5専用子テーマ「JET」の使用

JETはAFFINGER5専用の子テーマです。

 

JETの特徴

  • カスタマイズ無しでカード型にできる
  • 広告が記事に溶け込む

 

JETは簡単にカード型にすることができたり、広告を記事に溶け込ませることで読者に不快感を持たせずに記事を読ませることが可能になります。

 

正直僕は必要ないと思っています笑
まねた

 

この方法がおすすめな人

  • 不具合などなく簡単にTOP画面をカード化させたい人

 

AFFINGER5 EXを購入してカード型にする

 

AFFINGER5 EXは稼げる機能盛り沢山のAFFINGER5にさらに機能を追加したバージョンです。

 

AFFINGER5 EXの機能

  • AFFINGER5以上の機能
  • トップページのカードデザイン化
  • アーカイブのカードデザイン化
  • 関連記事一覧のカードデザイン化

 

AFFINGER5EXは全てをカードデザインにすることができるため、読者の離脱を減らすことができます。

 

詳細はAFFINGER5EXの公式サイトを参考にしてください。

 

この方法がおすすめな人

  • 簡単にカード化＋優れた機能で収益化を加速させたい人

 

AFFINGER5のTOP画面をカード化させるメリット(アフィンガー)

 

TOPをカード型にすることでメリットを得ることができます。

 

カード化のメリット

  • サイトがお洒落になる
  • 読者が見やすくなる
  • 記事のクリック率が上がる

 

AFFINGER5を利用するユーザーの多くは「稼ぎたいから」利用していると思います。

 

TOP画面をカード型にすることで読まれるブログを作ることができ収益化を加速させることができますよ。

 

まとめTOP画面をカード型にして収益を加速させよう

 

AFFINGER5のTOP画像をカード化する方法を紹介しました

 

カード化する方法

  • 通常盤AFFINGER5での設定
  • 専用子テーマJETの使用
  • AFFINGER5 EXを使用

 

お金をかけずカード化をしたい方は通常盤AFFINGER5での設定してみてください。

 

お金をかけてデザインを拘りたい、収益化を加速させたい人は「JET」や「AFFINGER5 EX」を考えてみましょう。

 

AFFINGER5の購入手順とインストール・ダウンロード方法を解説(アフィンガー)

続きを見る

スポンサーリンク





スポンサーリンク




-AFFINGER5, Blog