今回はアフィンガーのブログカードをおしゃれにカスタマイズする方法を解説していきます。
カスタマイズのbefore・afterは以下のとおりです。
※タブでbefore/afterの表示切り替えができます
本記事を参考にしてもらうと当ブログのトップページのように、記事一覧を２カラムのカードタイプで表示することができてトップページをすっきり見せることができますよ。
もちろんCSSもいじらないのでプログラミングの知識は必要ありませんし、レスポンシブにも対応しているのでスマホでも見やすくなります。
本記事は有料テーマAFFINGER5のカスタマイズ記事です。
アフィンガー５は標準でも使え切れないほど機能が豊富にあります。
興味がある人はAFFINGER公式サイトやレビュー記事も覗いてみてください。
＼「STINGERタグ管理プラグイン3」プレゼント中／
※プレゼントはいつ終了するかわかりません。詳しくは公式ページをご確認ください
【AFFINGER5カスタマイズ】ブログカード【アフィンガー標準機能編】
ブログカードは、主に記事の中で内部リンクを貼るのに使われるツールです。
テキストリンクより目立たせることができるのでうまく使うことでブログ内の回遊率をあげることができます。
回遊率とは、１人の読者がブログ内の記事をどれだけ閲覧したのかを測る指標です
ブログカードはAFFINGER5に標準で付いている機能なのでボタンひとつで簡単に使うことができます。
以下のように[カード]ボタンを押すだけでショートコード が自動挿入されます。
プレビューするとこんな感じですね。
-
-
【AFFINGER5カスタマイズ】ボックスを破線にする方法【コピペでOK】
続きを見る
以下のようなテキストリンクよりも内部リンクを目立たせることができますね。
ちなみに、簡単にブログカードが使える有料テーマは他にもあるので参考までに。
ブログカードが使える有料テーマ
【AFFINGER5カスタマイズ】ブログカード【カスタマイズ編】
本題の正方形カード型のカスタマイズ方法を説明します。
手順は簡単３ステップです。
カスタマイズ手順
- サムネイル 画像の設定
- レイアウトを２カラムにする
- ブログカードのスタイルを変更する
step
1サムネイル画像の設定
最初に、画像がきれいに表示されるように設定をおこなっておきます。
ワードプレスの「AFFINGER5 管理」の「デザイン」で、サムネイル画像設定を[フルサイズにする]に変更して[save]します。
これで設定完了です。
続いて正方形のブログカードを作っていきましょう。
step
2レイアウトを２カラムにする
まずブログカードを横並び２列にするためにレイアウトを指定します。
「タグ」から「レイアウト」→「PCとTab（959px以上）」→「左右50%」をクリックします。
これでレイアウトの２分割が完了です。
step
3ブログカードのスタイルを変更する
ブログカードを作っていきます。
黄色ボックス内の「このテキストは〜」の前にカーソルを置いた状態で[カード]ボタンをクリックします。
ショートコードが挿入されたら「このテキストは最後に消してください（50％）」を消しましょう。
同じく黄色のボックス内にカーソルを置いた状態で、「スタイル」→「レイアウト」→「カードスタイル」をクリックします。
ショートコードが薄い灰色の枠線で囲まれたらOKです。
あとは、右側部分も同様に変更すればカスタマイズ完了です。
ショートコードのidには表示させたい記事のIDを入力し、readmoreはonからoffに変更しましょう
プレビューしてみましょう。
【AFFINGER5カスタマイズ】ブログカードをカスタマイズしてトップページをおしゃれにしよう
いかがだったでしょうか。
今回はアフィンガー５のブログカード機能をカスタマイズして、記事一覧を２カラムで表示する方法をご紹介しました。
アフィンガー５は有料テーマですが、機能がとても充実しているので簡単にブログをおしゃれにすることができます。
少しでもAFFINGER5に興味を持った人はぜひ公式サイトでどんな機能があるのか眺めてみてください。
＼「STINGERタグ管理プラグイン3」プレゼント中／
※プレゼントはいつ終了するかわかりません。詳しくは公式ページをご確認ください