ブログ運用で、有料テーマ「AFFINGER6」を使用している方向けに
トップページをブログカード型にカスタマイズする方法をご紹介します。
初期状態&カスタマイズしたゴールイメージ
通常のAFFINGER6のトップページの記事一覧のレイアウトはこちらです。^_^つ
初期状態
カスタマイズしたゴールイメージ
上のように、ブログカード型に設定すると、各ブログのアイキャッチ画像が
大きく表示されてオシャレにできます。
カスタマイズ方法
具体的な設定方法を見ていきましょう。
【手順1】AFFINGER管理⇨トップページを選択
【手順2】右から二番目のアイコンを押す
これでメニュー類が表示される。
【手順3】タグ⇨レイアウト⇨全サイズ⇨左右50%選択
すると黄色と水色の左右ボックスと『このテキストは最後に消して下さい(50%)』の文字が表示される
【手順4】下画像のように黄色の最後尾にカーソルを合わせる。
【手順5】タグ⇨記事一覧/カード⇨カテゴリ一覧
下記のように黄色枠内文言の後部にコードが表示される
【手順6】表示されるコードを下記のように短縮する。
K
下記のように初めの部分のみ残す感じです。
【手順7】『このテキストは最後に消してください(50%)』を削除
【手順8】右水色ボックス内も同様にする
【手順9】cat="●"とpage="●"の数値変更
cat＝"○"に、表示したい投稿カテゴリーIDを入力。
page＝”○”に、カテゴリー毎に表示したい記事数を入力。
投稿カテゴリーのIDの確認方法
【投稿】⇨【カテゴリー】より確認可能です。
【手順10】コードを選択状態で)スタイル⇨レイアウト⇨カードスタイルを選択
【手順11】AFFINGER管理⇨全体設定⇨サムネイル画像設定⇨フルサイズにする
完成！
綺麗に見せるポイント
アイキャッチ画像を目立つものにする
目を引くものを選びましょう。
アイキャッチ画像サイズ、比率を統一する
サイズを全て同じにしましょう。
K
統一していないと、せっかくブログカード型にしても、横並びが揃いません！
タイトルの文字数に気を付ける
改行の関係で端末によって、多少ずれが生じる可能性があります。
まとめ
ブログカード型にすることで、よりブログトップページが
華やかになりますね。
有料テーマ「AFFINGER6」をせっかく使用するなら、更にオシャレで洗練された
トップページにして、より目を引くようにしたいですね。
ドメイン取得はこちら↓
エックスサーバーはこちら↓
ココナラ登録はこちら↓
