いつも【初心者のためのWordpress完全マニュアルブログ】をご覧いただきありがとうございます。
Webサイトは誰でも作れる！このブログでは、Web開発知識や経験のない初心者の方でも、ドラッグ&ドロップなどの簡単操作でできるウェブサイト作りを提案しています。

このStep By Stepチュートリアルの通りに作っていくだけで、サンプルの様なスタイリッシュなウェブサイトが作れちゃいます！

 前回までのおさらい

Diviテーマ Step By Stepチュートリアル サンプルデザイン:  https://yukifel-divitutorial.com/

Diviテーマの購入はこちら:  https://www.elegantthemes.com

前回までのチュートリアル

• Step1: テーマのセットアップ
• Step2: ランディングページ・ナビゲーションメニューの作成
• Step3: コラム・広告モジュールの使い方
• Step4: メンバープロフィールの作り方

ストック画像オススメ

Pexels:　無料だけどやたらと解像度の良い、クオリティの高いストック画像が著作権フリーでダウンロードできます。ちなみにこのチュートリアルで使っている画像は、著作権を考慮して、大体このサイトから取得しています。

Shutterstock: 有料には有料の良さがある！種類の豊富さとクオリティの高さはお墨付き。ネットサーフィンをしていて、この画像いいなと思った画像はだいたいShutterstockと言っても過言ではありません。ただ有料であることには間違いないので、トップ画像とかここぞという場所に！

今回は世界人気No.1 WordPressテーマ【Divi】Step By Stepチュートリアルシリーズ第５弾ということで、サークルカウンターモジュールを使ったカウンターの設置方法をご紹介します。

サンプルで言う所のこの部分です。

正直に言います。設置するのに大した意味はありません←

ただ置くとかっこいいというだけで、何の機能も持ち合わせていません。ちなみにこの数字は、手動で打ち込んだものです。

別に何か実際のデータに基づいて、勝手に数字がカウントされていくという様な高機能は持ち合わせていません。。

なので、もしそんな機能いらねーよ！！！って方は、今回のStep５は飛ばしていただいて構いません。

ただこのカウンターの設置、とにかく流行っています。最近のDiviのサンプルとか他のデザイナーさんが作ったテンプレートとかを見てると、このカウンター特に意味はないのにやたらと出てきます。

なんでウェブサイトをスタイリッシュに見せたいという方には、オススメです。

まあでもこういう具体的な数値データを載せるというのは、ビジネスサイトにとってはクライアントさんへのアピールになるので、全く意味のないことはないと思いますが^^;
 



 

 カウンターの設置方法

①　ビジュアルビルダーを立ち上げる

では早速いつもの様に、Diviのビジュアルビルダーを立ち上げるところから始めていきます。

②　新規セクションを作成して、コラムを挿入する。

今回は通常セクションを使用します。

コラムは何コラムでも構いませんが、サンプルでは4コラムを挿入しています。

③　サークルカウンターモジュールの挿入

今回は、サークルカウンターモジュールを使用します。

④　コンテンツの入力

コンテンツ >> テキストから、タイトルと数字を入力すると、画像の様に表示されます・

要素のパーセント記号をオフにすると、以下の様に%マークが消えます。こちらはコンテンツに合わせて、お好みでどうぞ。

背景の色を変更すると、画像の様にメーターの色が変更できます。

⑤　デザインの設定

次は、デザインタブをクリックして、いつもの様にデザインの設定をしていきます。

サークルセクションの、サークルの色を変更すると以下の画像の様にメーターが回っていない部分の色を変更できます。

円グラフカラー透明度で、サークルの透明度を設定します。あまりに透明度をあげると訳がわからないことになるので、デフォルトのままでいいと思います。

テキスト、タイトルテキスト、数字テキストに関しては、いつもと同じなので省略します。

以上でカウンターモジュールのカスタマイズは終了です。設定を保存して、モジュール設定ウィンドウを閉じます。

⑥　モジュールを複製する。

いつもの様に赤太枠をクリックして、モジュールを必要な分だけ複製して移動させます。

あとは、各モジュールごとにコンテンツの内容や色を変更したら、モジュールの設置は完了です。

⑦　セクションの設定

では、次にセクションの設定を変更していきます。水色の+アイコンをクリックします。

今回の使用画像をダウンロードしたい方は、こちらをクリックして画像をダウンロードしてください。

ちなみに背景画像の位置を変更することによって、画像の切り抜き位置を変更することができます。

Background image Repeatは、コンテンツが元の背景画像よりも縦に長かったり、横に長かったりした時に、画像を繰り返すかどうかの設定ができます。

デザインタブ >> 余白でパディングが設定できます。

今回はトップ100px、ボトム100pxを挿入しましたが、こちらもお好みで構いません。

全て設定が完了すると、以下の画像の様なセクションが出来上がりました。

まとめ

これで全ての工程は終了です。今回のチュートリアルいかがだったでしょうか？

冒頭でも言った様に、大した機能は搭載していませんが、設定もすごく簡単なので、デザインのアクセントに加えてぜひ加えてみてはいかがでしょうか？

Divi Step By Stepチュートリアルも今回で第５弾でしたが、Step5ともなると皆さんも大体の基本操作には慣れてきたのではないでしょうか？

とにかく使いまくってみるのみです！最初からデザインを決めるのではなく、色々あちこちクリックして実験してみるといいと思いますよ！

次回は、値段表の作り方についてご紹介しますので、乞うご期待！^^

今回もわからないところや、質問等ございましたら、コメント欄やSNSまたはメールにてお答えします。また、Wordpressに関して使ってみたいけど、使い方が分からないプラグインやテーマ、こんな事してみたいけどどういうプラグインを使ったらいいか分からない等のリクエストもどしどし受け付けてます！

お気軽にご連絡ください！

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