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

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

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

基本的なボーダー設定

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

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

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

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

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

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

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

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

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

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

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

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