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


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

DIVIアップデート最新情報【2017.11.10】 – 初心者のためのWordpress完全マニュアル

DIVIアップデート最新情報【2017.11.10】

November 11, 2017 / 0 Comment / 829 views

【初心者のためのWordpress完全マニュアル】をいつもご覧いただきありがとうございます。
このブログで紹介しているWordpressの人気テーマ【DIVI】が昨日(2017年11月10日)にアップデートされました。
今回のアップデートによって、新しく各エレメントにボーダーが追加できるようになりました。
さらにユーザーは、ボーダーのスタイルやコーナーのラウンド具合、また太さなどが自由にカスタマイズできます。

今回もデモを使って、この新機能の基本的な使い方についてご紹介していきたいと思います。

 

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

 

 

基本的なボーダー設定

 

それでは早速基本的な色、スタイル、ラウンドコーナーの設定方法についてご紹介していきたいと思います。
サンプルとして、テキストモジュールを使ってご紹介していきます。

テキストモジュールを挿入したら、モジュールの設定画面を開き、デザインタブをクリックします。

境界セクションをクリックすると、ボーダーのカスタマイズ設定をすることができます。

Rounded Cornersでは、ボーダーの角の丸みを設定することができます。また、赤太枠で囲んであるチェーンマークをクリックすると、一括設定のON/OFFを切り替えることができます。

画像のようにチェーンマークがグレイになっていると、一括設定はOFFになっており、画像のように各コーナー毎に丸み度が設定できます。

 

divi new feature demo screenshot

 

次にボーダーのスタイルを設定します。

赤太枠で囲んでいるタブの一番左をクリックすると、ボーダーのスタイルを一括して設定することができ、その他のタブを選択すると、上下左右毎にボーダーを個別設定することができます。

 

divi new feature demo screenshot

 

ボーダー幅では、ボーダーの太さの設定、ボーダーカラーは色の設定、またボーダースタイルでは、ドットや点線などの好きなボーダースタイルを選択できることができます。

サンプルとして、上下左右毎に違ったボーダーの設定をしてみました。

 

divi new feature demo screenshot

 

このボーダーを使うことによって、以前よりももっと自由なデザインを作ることができるようになりました。

またこのボーダーは、モジュール、コラム、セクション毎に設定することが可能です。

Elegant Themesのブログにて、この新機能を使ったデザインのサンプル例を紹介しているので、興味のある方は、デザインの参考にしてみてください。

この記事をシェアする!

コメントを残す

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