こんにちは。 yaeです。
最近 ネットをしていると
カード型のサイトが
多くなったと感じませんか？
私は【AFFINGER5】を使っているのですが
「JET」という追加テーマを購入することなく
カード型に できないものかなぁと思って
色々調べたら
あることはあるのですが
アイキャッチ画像にテキストをいれていない
自分のサイトだと 1コマが大きすぎるのです。
↓↓↓
なんか ものすごく間延びがします^-^
そこで3分割はどうかと思って
実行してみました。
↓↓↓
大分コンパクトになり 見やすくなりました。
このカード型3分割の作り方を教えます。
カード型にするための 事前準備
注意ポイント
- アイキャッチ画像のサイズを揃える
- タイトルの文字数の下限～上限を決めておく
- サムネイルデザインをフルサイズにする
step
1アイキャッチ画像のサイズを揃える
カードサイズを統一するためです。
同じサイズにしてあればOKです。(私は1000×600にしています)
※とりあえずはTOPに置きたい記事のものだけで大丈夫です。
step
2タイトルの文字数の下限～上限を決めておく
文字数が少ないと これもまたカードサイズがデコボコします。
上限が32文字以下には SEO的にしてあると思いますが
私は23文字以上が必要になりました。
step
3サムネイルデザインをフルサイズにする
AFFINGER5管理 → デザイン → サムネイル画像設定 → フルサイズに
画像が ぼやけないようにするためです。
但し 処理速度が遅くなることもあるので
プラグインなどで速度補助するといいです。
AFFINGER5 カード型３分割の作り方
- 固定ページをつくる
- レイアウトを３分割にする
- カード型のデザインを作る
- カードを追加する
順にご説明します。
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買ったばかりだしぃぃぃ＞＜
という方もおられるでしょう。→私(笑)
何かのお役に立てば嬉しいです。
長文をお読みいただき ありがとうございました。
