今回は、Diviテーマで使えるブログのための無料プラグイン、Article Cardについてご紹介します。

このArticle Cardを使うと、下の動画の様にブログ一覧にサムネイルにマウスを当てると、下のテキストボックスが上がってきて、全体にドロップシャドウが現れます。また、日付とカテゴリーも自動でこんなふうに可愛らしく（？）表示される様になります。

カスタマイズ性はかなり低いですが、初心者の方でもクリック一つで簡単に導入できると、難しい設定が一切ないというところがポイントです。

こだわりたい方にはあまりオススメできないかもしれません。。

Article Cardの使い方

まずは、こちらをクリックして、プラグインをダウンロードします。

ダウンロードが終了したら、ダッシュボードから、プラグイン>>新規追加をクリックし、先ほどダウンロードしたzipファイルをアップロードします。

プラグインを有効化すると、ダッシュボードのサイドバーに、Divi100という項目が現れるので、その中のArticle Cardをクリックします。

Article Cardを開くと、この青いふと枠で囲ってある日付とカテゴリーの部分の背景色が変更できます。

Active Article CardをENABLEにして、SELECT ACCENT COLORでお好きな色を選んでください。

ビジュアルビルダーを立ち上げて、通常セクションを追加し、1コラムを選びます。

ブログモジュールを挿入します。

ブログ設定のコンテンツタブから、投稿数や、表示させたいカテゴリーが選択できます。

コンテンツセクションの、抜粋を表示にすると、指定の文字数が表示されます。（デフォルトでは270文字）

文字数の指定に関してはDiviのファイルを直接書き換えないといけないんですが、初心者の方には難しすぎるので、今回は省略します。

興味のある方は、リンクを貼っておきますので、こちらをのぞいてみてください。

R18: How to Change the Excerpt Length of Divi Blog Posts

話は戻りますが、コンテンツの中の要素セクションをクリックすると、今度は、コメントや日付など、表示させたい情報を選択できます。

次にデザインタブ >> レイアウト >> レイアウトでグリッドを選択します。

グリッドを選択すると、下の様に今までのフルワイドで表示されていたのが、３コラム表示になります。

あとは、いつもの様にヘッダーテキストなどの細かい設定を決めていきます。

これで設定は終了です。

おいおい、全然最初の動画と違うじゃねーか！！ヽ(∴｀┏Д┓´)ﾉ彡

ご安心ください。。

ビジュアルビルダーでは、大体プラグインによるアニメーションはうまく動きません。

ここで一旦保存して、ビジュアルビルダーを終了してみます。

するとこの様なきれいなブログ一覧が表示されます^^

残念なことに最初に設定した、カテゴリーと日付の色はグローバル設定なので、カテゴリー毎に色を変えたりすることはできません。。

まとめ

今回のDivi専用プラグイン、Article Cardはいかがだったでしょうか？

まあカスタマイズ性は乏しいですが、大した設定をしなくても、簡単に作れるところが初心者の方には嬉しいプラグインだなと思います。

あと無料ていうのもいいですね^^

何かわからないことや、質問がございましたら、いつもの様にコメント欄にてお答えします！またこのプラグイン気になるけど、英語だし、使い方わからないから教えてというリクエスト等も受け付けています^^

では次回また。See you later<3