初心者のための
WORDPRESS
完全マニュアル


このサイトでは、初心者でも簡単にできる、開発知識のいらないWORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、プラグインの使い方、SEO対策やアフィリエイトなどの実際の運営方法まで、STEP BY STEPで紹介しています。

Divi最新アップデート!【Oct 26, 2017】テキストモジュールが大幅にパワーアップ! – 初心者のためのWordpress完全マニュアル

Divi最新アップデート!【Oct 26, 2017】テキストモジュールが大幅にパワーアップ!

October 31, 2017 / 0 Comment / 952 views

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

 

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

 

 

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

 

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

 

 

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

 

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

 

テキストシャドウデモ スクリーンショット

 

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

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というリストに追加されるようになりました。いちいち検索しなくても、以前使用したフォントが1発でわかるのでとても便利ですね。

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

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

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

 

テキストモジュールデモ スクリーンショット

 

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

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

 

 

その他追加項目

 

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

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

 

テキストモジュールデモ スクリーンショット

 

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

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

 

テキストモジュールデモ スクリーンショット

 

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

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

 

shadow_demo7

 

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

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

 

まとめ

 

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

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

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

 

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

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

 

この記事をシェアする!

コメントを残す

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