ブログ運用で、有料テーマ「AFFINGER6」を使用している方向けに
トップページをブログカード型にカスタマイズする方法をご紹介します。
初期状態&カスタマイズしたゴールイメージ
通常のAFFINGER6のトップページの記事一覧のレイアウトはこちらです。^_^つ
初期状態

カスタマイズしたゴールイメージ

上のように、ブログカード型に設定すると、各ブログのアイキャッチ画像が
大きく表示されてオシャレにできます。
カスタマイズ方法
具体的な設定方法を見ていきましょう。
【手順1】AFFINGER管理⇨トップページを選択

【手順2】右から二番目のアイコンを押す

これでメニュー類が表示される。
【手順3】タグ⇨レイアウト⇨全サイズ⇨左右50%選択

すると黄色と水色の左右ボックスと『このテキストは最後に消して下さい(50%)』の文字が表示される

【手順4】下画像のように黄色の最後尾にカーソルを合わせる。

【手順5】タグ⇨記事一覧/カード⇨カテゴリ一覧

下記のように黄色枠内文言の後部にコードが表示される

【手順6】表示されるコードを下記のように短縮する。


下記のように初めの部分のみ残す感じです。

【手順7】『このテキストは最後に消してください(50%)』を削除

【手順8】右水色ボックス内も同様にする

【手順9】cat="●"とpage="●"の数値変更

cat="○"に、表示したい投稿カテゴリーIDを入力。
page=”○”に、カテゴリー毎に表示したい記事数を入力。
投稿カテゴリーのIDの確認方法
【投稿】⇨【カテゴリー】より確認可能です。

【手順10】コードを選択状態で)スタイル⇨レイアウト⇨カードスタイルを選択


【手順11】AFFINGER管理⇨全体設定⇨サムネイル画像設定⇨フルサイズにする


完成!

綺麗に見せるポイント
アイキャッチ画像を目立つものにする
目を引くものを選びましょう。
アイキャッチ画像サイズ、比率を統一する
サイズを全て同じにしましょう。

統一していないと、せっかくブログカード型にしても、横並びが揃いません!
タイトルの文字数に気を付ける
改行の関係で端末によって、多少ずれが生じる可能性があります。
まとめ
ブログカード型にすることで、よりブログトップページが
華やかになりますね。
有料テーマ「AFFINGER6」をせっかく使用するなら、更にオシャレで洗練された
トップページにして、より目を引くようにしたいですね。
ドメイン取得はこちら↓

エックスサーバーはこちら↓

ココナラ登録はこちら↓
