ブログ道

【AFFINGER5】トップページを見やすい3分割のカード型にする方法

 

こんにちは。 yaeです。

 

最近 ネットをしているとカード型のサイトが

多くなったと感じませんか?

 

私は【AFFINGER5】を使っているのですが

 

「JET」という追加テーマを購入することなく

カード型に できないものかなぁと思って

 

色々調べたら

あることはあるのですが

 

アイキャッチ画像にテキストをいれていない

自分のサイトだと 1コマが大きすぎるのです。

 ↓↓↓

 

なんか ものすごく間延びがしますよね^-^

 

そこで3分割はどうかと思って

実行してみました。

 ↓↓↓

 

大分コンパクトになり 見やすくなりました。

この作り方を教えます。

 

 

カード型にするための 事前準備

 

注意ポイント

  1. アイキャッチ画像のサイズを揃える
  2. タイトルの文字数の下限~上限を決めておく
  3. サムネイルデザインをフルサイズにする

 

step
1
アイキャッチ画像のサイズを揃える

カードサイズを統一するためです。

同じサイズにしてあればOKです。(私は1000×600にしています)

 

※とりあえずはTOPに置きたい記事のものだけで大丈夫です。

 

 

step
2
タイトルの文字数の下限~上限を決めておく

文字数が少ないと これもまたカードサイズがデコボコします。

上限が32文字以下には SEO的にしてあると思いますが

 

私は23文字以上が必要になりました。

 

step
3
サムネイルデザインをフルサイズにする

 

AFFINGER5管理 → デザイン → サムネイル画像設定 → フルサイズに

 

画像が ぼやけないようにするためです。

但し 処理速度が遅くなることもあるので

 

プラグインなどで速度補助するといいです。

 

 

AFFINGER5 カード型3分割の作り方

 

  1. 固定ページをつくる
  2. レイアウトを3分割にする
  3. カード型のデザインを作る
  4. カードを追加する

 

順にご説明します。

 

1. 固定ページをつくる

 

ダッシュボード → 固定ページ → 新規作成

 

タイトルはサイト名で大丈夫です。

最終的には これをフロントページ化して トップページにします。

 

2. レイアウトを3分割にする

 

タグ → レイアウト → PCとTab(959px以上) → 3分割

 

 

 

3. カード型のデザインをつくる

 

スタイル → レイアウト → カードスタイルB

 

 

メモ

※この最初の"スタイル"が 見つからない場合は

ダッシュボード → 設定 → Advanced Editor Tools   → 旧エディタ(TinyMCE)を開き

下部の『使用しないボタン』にまぎれていますので

ドラッグで段落の横に設置してください。

 

ポイント

"カードスタイル"でなく"カードスタイルB"にするのはスマホ対応です。

カードごとに縦に並んで表示されます。

 

4. カードを追加する

 

この3分割の場合 カテゴリーは行単位になるので

作った点線の中に 一回ずつ カードを押します。(計3回)

 

いらないコードを消します。

 

 

IDの部分に 表示したい投稿記事のIDを入れます。

ダッシュボード → 投稿 → 投稿一覧 → ID で数字がわかりますので。

 

id="投稿記事IDの数字" で入れてください。

 

 

ポイント

一番左の箱だけ labelをつけてカテゴリー表示をしたのですが

ちょっとわかりにくいかなとアップして思い

現在は タグ → テキストパーツ → まるもじ(小) → 好きな色

で暫定表示しています。

 

作った固定ページをTOPページにする

 

ダッシュボード → 外観 → カスタマイズ → ホームページ設定(下にあります)

 

"ホームページの表示" で固定ページにチェックを入れ

"ホームページ" で作った固定ページの名前を選べばOKです。

 

固定ページ一覧を開くと "フロントページ"   の表記がついているはずです。

 

おわりに

 

「アイキャッチ画像にテキストを入れていない」

というのが かなりレアだとは思うのですが

 

50%50%だとちょっとなと感じた時に 試してみてください。

 

「JET」を購入すると

カードの間にまぎれこませた 自然な広告も可能ですし

 

カテゴリもカードに入れられます。

 

5000円くらいです。

 

でもまぁ AFFINGER5買ったばかりだしぃぃぃ><

という方もおられるでしょう。→私(笑)

 

何かのお役に立てば嬉しいです。

長文をお読みいただき ありがとうございました。


 

 

-ブログ道

© 2021 スコマエ Powered by AFFINGER5