最近頻繁にアップデートをしているWordpressの人気テーマDiviですが、前回ご紹介した、アニメーション効果に引き続き、今回のアップデートでは、大幅にテキストモジュールが進化しました。

※アップデートする前には、必ずバックアップをとることをおすすめします。特にテーマのPHPファイルなどを直接編集している方は、アップデートを行うと全てのファイルが自動的に上書きされてしまいます。アップデート後は手作業で再度自分のコードを付け加える必要がありますので、必ずテキストエディターか何かにソースを保存しておくのがベターです。
このブログを初めてご覧いただく方は、こちらのブログにてDIVIテーマの基本的な使い方をご紹介していますので、興味のある方はぜひこちらをご覧ください^^

追加されたテキストモジュールの新機能をまとめてご紹介！

まずはいつものように新規セクションを挿入→行を挿入したら、テキストモジュールを挿入します。
では早速新しく追加されたテキストモジュールの新機能について１つずつご紹介していきたいと思います。

テキストシャドウの追加が可能！

コンテンツタブでテキストを挿入した後、デザインタブをクリックすると、新しくText Shadowという項目が追加されているのが確認できます。５つのシャドウスタイルから好みのスタイルを選択します。

追加したシャドウは、さらに好みのデザインにカスタマイズすることが可能です。

Text Shadow Horizontal Length: シャドウの位置を左右に動かすことができます。

Text Shadow Vertical Length: シャドウの位置を上下に動かすことができます。

Text Shadow Blur Strength: シャドウのボカシ具合の調整ができます。

Text Shadow Color: シャドウの色を変更できます。

ヘッダー文字が種類毎に変更できるように！

以前は、ヘッダー文字のデザインカスタマイズは、一括でしか変更することができませんでしたが、今回のアップデートにより種類毎のデザインカスタマイズができるようになりました。

試しに下の画像のように、ヘッダー文字を1から5まで追加してみます。ヘッダーの種類は赤太枠で囲んであるところで変更できます。

次にデザインタブのHeading Textをクリックすると、画像のようにH1, H2, H3…と新しくタブが追加されているのが確認できます。

後はデザインを変更したいヘッダーのタブを選択して、いつもの要領でデザインを変更します。

例えば、Heading2のデザインを変更したい場合は、H2をクリックします。

サンプルとして各ヘッダー文字の種類毎に、デザインを変更してみました^^　先ほど紹介したテキストシャドウもヘッダー毎に追加することができます。

テキストボックスにもシャドウの追加が可能！

先ほどのテキストごとのシャドウ追加と同様、テキストボックスにもシャドウが追加できます。

デザインタブ→Box Shadowで好きなスタイルのシャドウを選択します。選択すると下の画像のように、テキストボックス全体にシャドウが追加されたのが確認できます。

テキストシャドウ同様に、シャドウの位置や色などを自由にカスタマイズすることも可能です。

Box Shadow Positionを、Innerにすると影がボックスの内側に表示され、Outerにすると外側に表示されます。

フォントの大幅な改善！

今まではフォントは使用してみるまでは、そのフォントがどんな見た目なのか知ることができませんでしたが、今回のアップデートにより、画像のようにフォントが一目でわかるように改善されました。

また、以前使用したフォントは、Recentというリストに追加されるようになりました。いちいち検索しなくても、以前使用したフォントが１発でわかるのでとても便利ですね。

さらに自分のフォントファイルをアップデートして使用することが可能に！！

デザインタブ→テキスト→テキストフォントの中にあるアップロードをクリックすると、画像のようにフォントファイルがアップデートできます。

対応ファイルは、eot, woff2, woff, ttf, otfです。ttfとotfが一般的かなと思います。

こちらのサイトのように、グーグルで【日本語フォント　フリー】などと検索すると、たくさんフリーフォントを配布しているサイトが見つかるので、ぜひ検索してみてください.

今まではヘッダーにコードを追加して、google fontなどを使用するしか、日本語フォントを変更する方法がなかったので、今回のアップデートにより好きな日本語フォントを使用できるようになったのは、日本人ユーザーにとってかなり嬉しいですね^^

その他追加項目

テキスト Font Weight: 通常の太さから、Ultra Boldまでの4種類の太さが選べるようになりました。

テキスト Font Style: イタリック体やアンダーライン等のデコレーションの追加が可能に。

またヘッダー文字同様、リンクやリスト等、各タグ毎にデザインが設定することができます。

タブのアイコンは左から順に、通常テキスト、リンク、Unorderedリスト(・を使ったリストのこと)、Orderedリスト(数字を使ったリストのこと)、引用を表しています。

この機能を使うためには、テキストのコンテンツ内にタグを挿入する必要があります。使用したい文字を選択して、各アイコンをクリックします。

例えば、下記のようにHelloという文字を引用文にする場合は、Helloをドラッグして選択して、引用アイコンをクリックします。水色で背景色が付いている部分が実際に選択されている範囲になります。

下の赤太枠で囲んでいるアイコンが、実際にデザインをカスタマイズできるタグです。

左から順に、Unordered List、Ordered List、リンク、引用を表しています。

まとめ

今回のアップデートはいかがだったでしょうか？テキストモジュールがものすごく進化したのが、お分りいただけたかと思います^^

最近DIVIは本当に頻繁にアップデートしています。最新版では、ほとんどCSSなんていらないんじゃないかというぐらい、本当になんでもできます。

今回のアップデートにあたっては、私の方では特にバグったりするなどの問題はありませんでしたが、アップデートする前には絶対にバックアップをとってください！iOSのアップデートなどもそうですが、アップデートには何かとトラブルがつきものです。（私事ですが、iOSをアップデートしたことをとても後悔しています笑）

今回のチュートリアルでわからないことや質問などありましたら、お気軽にコメント欄やメッセージでお問い合わせください^^

それではまた次回のチュートリアルでお会いしましょう! See you later<3