今回は、Wordpressの人気テーマのDiviテーマシリーズから、サブチュートリアルとして、Diviチャイルドテーマのセットアップ方法と、簡単な使い方についてご紹介したいと思います。

Diviチャイルドテーマとは、 Diviビルダーを使って作られた、プリメイドのテンプレートのことです。そのため、基本的なカスタマイズ方法はこのブログで紹介しているDiviの基本操作方法と同じです。

Diviチャイルドテーマのカスタマイズは、第三者が作ったテンプレートを、文字を変えたり、画像を変えたりしてリカスタマイズするというイメージです。

もちろん、セクションやモジュールを追加・削除したり、大幅にサイトの構成を変更することも可能です。

「Diviビルダーの使い方は分かるけど、デザインのセンスがない、自信がない。。」または、「一からウェブサイトのデザインから考えるのが面倒くさい。。」という方にとって、Diviチャイルドテーマはもってこいのテーマだと思います。

世界中のWebデザイナーや開発者が、チャイルドテーマを製作して販売しているので、目的や用途に合わせて、様々な種類のテンプレートから選んでいただくことができます。

こちらの記事にて、いくつかの人気のチャイルドテーマやチャイルドテーマのまとめサイトを紹介しているので、よかったらご参考ください。

※チャイルドテーマは、Diviビルダーをインストールしていることが前提で使用できるテンプレートです。Diviテーマの購入がお済みでない方は、まずはDiviテーマの購入からお願いします。こちらをクリックすると、Divi(Elegant Theme)のオフィシャルサイトに飛びます。英語が苦手な方は、こちらの記事にて購入の手順について詳しく紹介しているので、ぜひご覧ください。

テーマのセットアップと使い方

チャイルドテーマのセットアップ方法

Diviテーマを追加していない方は、先にDiviテーマを追加します。

ダッシュボードの外観>>テーマから、新規追加ボタンをクリックして、テーマをアップロードします。

テーマのアップロードが成功すると、以下のようなメッセージがでるので、有効化をクリックします。

Diviテーマをアップロードした手順と全く同じ要領で、今度はチャイルドテーマのZipファイルをアップロードします。

今回は、Allyというチャイルドテーマをサンプルとして使用してみます。

通常、チャイルドテーマを購入すると、Zipファイルがダウンロードできます。Zipファイルを解凍すると、中に取扱説明書や色々なファイルと一緒にZipファイルが入っています。これが実際のテーマのZipファイルになります。

チャイルドテーマのアップロードが終了したら有効化ボタンをクリックします。

基本的な操作方法は、各テーマを購入した際についてくる取扱説明書に書いてありますが、ここではAlleyを元にテーマのセットアップ方法についてご紹介します（テーマによって違ったりするので、ここに書いてある手順と全く違う場合は、取扱説明書をご参照ください。）

では次にチャイルドテーマを使用するにあたって必要なプラグインをインストールします。 外観>>Install Pluginsをクリックします。

Install Pluginsをクリックすると、下記のように必要なプラグインのリストが出てくるので、Installをクリックして、全てインストールをします。

プラグインのインストールが全て終了すると、外観のリストにImport Demo Dataが追加されます。

デモデータをインストールにすることによって、あなたのウェブサイト上にデモデータがそっくりそのまま表示されます。

もし、テンプレートの一部分のみ使用して、スクラッチからWebサイトを作りたい方、もしくはすでにWebサイトのコンテンツが完成していて、デザインを少し組み立て直したいだけの場合（使用前にバックアップを取るのを忘れないように！）は、インストールは不要です。

むしろデモデータをインストールすると必要のない、デモで使用されている子ページがダウンロードされ、勝手にホームに設定しているページがデモページになる上、ナビゲーションメニューもデモで使用されている子ページに変更されます。

自分が今まで作ってきたページやコンテンツが消えることはありませんが、設定し直さないといけなくなります。

またコンテンツが一旦全て完成しているけど、デザインをチャイルドテーマのデザインにフルチェンジしたい方は、面倒臭いですが、マニュアルで、元使用していたページからチャイルドページのデモページに、一つずつテキストをコピーアンドペーストして、組み直す必要があります。。

デモデータをそのまま使用して、新しくWebサイトを作りたい方はそのままインストールしてください。

このように自分のウェブサイトが購入したテーマのデモと全く同じように表示されていたら、セットアップは全て終了です。

チャイルドテーマの使い方

基本的なカスタマイズ方法は、冒頭でも述べた通り、Diviテーマのカスタマイズ方法と全く同じです。

テーマによっては、デザインの一部がグローバル設定になっている場合もあるので、Diviのビジュアルビルダーとテーマカスタマイザーを使って、カスタマイズを行なっていきます。

例えば、Allyの場合グラデーションはグローバル設定になっています。そのため、グラデーションを変更する場合はテーマカスタマイザーから変更する必要があります。

下記の画像のようにテーマカスタマイザーを開くと、通常のDiviテーマには出てこないチャイルドテーマ専用の設定項目が出てきます。

グローバル設定を持っているテーマについては、おそらくほとんどのテーマが、取扱説明書の中で説明していると思いますが、基本的にビジュアルビルダーで変更できない箇所は、カスタマイザーで設定しないといけないと思ってください。

難点としては、グローバル設定を変更すると全て同じグローバル設定を使用しているデザインが変更されるということです。

例えば、Alleyだとこのグラデーションはグローバル設定になっているため、色を変更した場合、全てのグラデーションの変更になり、グラデーションを消すと、全てのグラデーションが消えます。

以下のようにグラデーションの色を緑系の色に変更した場合、このグローバルグラデーションを使用している全ての部分が、紫系から緑系のグラデーションに変更されます。

カスタマイズしたいページでビジュアルビルダーを立ち上げると、通常のDiviテーマと同じようにセクションやモジュールの追加・削除できます。

各チャイルドテーマは、そのテーマオリジナルの、ホバーエフェクトやモジュールなどのデザインを持っています。

追加や削除と同じように、自由に自分のセクションやモジュールを追加することができますが、作成したモジュールにチャイルドテーマオリジナルのエフェクトを付け加えることができます。

各チャイルドテーマのデザインリストについては、取扱説明書に書いてあると思いますので、確認してください。

Alleyの場合、下記の画像のように各モジュールごとにどのようなアニメーションエフェクトが追加できるかのリストが書かれています。

基本的にチャイルドテーマのオリジナルエフェクトは、モジュール設定にclass名を追加することによって、追加することができます。 黒の太文字で書いてある部分がクラス名になりますので、ここをコピーします。

試しにBlurbモジュール（日本語版では広告モジュール）にあるally-blurb1を追加してみます。

このホバーエフェクトを加えると、カーソルがモジュールに当たった時にモジュールがぐるぐると傾きます。

グレイの設定アイコンをクリックして、モジュール設定画面を開いたら、詳細タブのCSSクラスに使いたいエフェクトのクラス名をそのままコピーアンドペーストします。

するとクラス名を加えた方のモジュールだけが、マウスを当てると、下記の画像のように傾き出します。 もちろん何も加えていない左のモジュールは、マウスを当てても何も変化しません。

デモデータをインストールすると、デモが使用している全てのページが勝手に追加されています。

こちらも自由にタイトルや内容を変更できますし、新しく新規ページを作成しても構いません。いらないページは削除することもできます。

まとめ

かなりざっくりとしたカスタマイズ方法の紹介となりましたが、基本的なカスタマイズ方法はDiviの基本操作チュートリアルで紹介した方法と全く同じです。

違う点は、モジュールにクラス名を加えることによって、チャイルドテーマオリジナルのエフェクトがモジュールに加えることができるということです。

チャイルドテーマを使うとプロ並みのデザインが簡単に自分のウェブサイトに導入することができます。

全部を使わなくても、チャイルドテーマを色々みていて、このチャイルドテーマのブログのデザインとこのコンタクトフォームがかっこいいから使いたい！という時などに、チャイルドテーマをテーマ設定にすることによって、パーツパーツを取り入れることも可能です。

ただし設定できるチャイルドテーマは１ウェブサイトにつき１テーマのみなのでご注意を、、

チャイルドテーマは開発者によってかなり仕様が違っているかもしれませんが、基本的な使い方はだいたい一緒です。

もし英語の取扱説明書で分からない部分など、セットアップ方法でつまづいたりした方がいらっしゃいましたら、お気軽にコメント欄やコンタクフォームにてご連絡ください。   それではまた次回のチュートリアルで会いましょう！See you later<3