【Divi】無料プラグイン「Article Card」で簡単でオシャレなブログ一覧を作ろう! – 初心者のためのWordpress完全マニュアル

誰でも作れる低予算のウェブサイト作り

TUTORIAL BLOG


このブログでは、初心者でも分かりやすいよう、WORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、オススメのプラグインの紹介や使い方、SEO対策やアフィリエイトの運営方法まで、STEP BY STEPで紹介しています。

【Divi】無料プラグイン「Article Card」で簡単でオシャレなブログ一覧を作ろう!

August 30, 2017

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

 

Elegant Theme: https://www.elegantthemes.com

Diviテーマ Step by Step チュートリアルhttps://wpbeginnertutorial.com/divi_tutorial1/

 

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

 

 

 

 

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

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

 



 

Article Cardの使い方

 

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

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

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

 

 

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

 

article cardデモ

 

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

 

 

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

 

 

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

 

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

 

 

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

 

 

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

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

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

 

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

 

 

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

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

 

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

これで設定は終了です。

 

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

 

ご安心ください。。

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

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

 

 

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

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

 

まとめ

 

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

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

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

 

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

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

この記事をシェアする!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Powered by Shutterstock