Diviのログインモジュールの使い方

こんにちは、根本です。今回は、Diviのログインというモジュールの使い方をご紹介していきます。

Diviのログインモジュールとは？

ログインモジュールでは、WordPressサイトにログインするためのフォームを作成することができます。例えば、何かの商品やサービスを販売していて、アフィリエイターを雇っていたり、会員サイトを運営しているなど。そのような時に使ってみると良いのかなと思います。

コンテンツ設定

テキスト

「タイトル」では、ログインフォームのタイトルを、「ボディ」では説明文を記入します。

転送

「はい」にすると、現在のページにユーザーをリダイレクトすることができます。「いいえ」のままだと、WordPressのダッシュボードに誘導されます。

デザイン設定

フィールド

• フィールド 背景色：ログイン情報入力欄の背景色を設定します。
• フィールド テキストカラー：入力フィールドに表示されるテキストの色を設定します。
• フィールド フォーカスの背景色：ユーザーが入力フィールドをクリックした時に背景色がここで設定した色に切り替わります。
• フィールド フォーカステキストの色：ユーザーが入力フィールドで文章を入力している時のテキストの色がここで設定した色になります。
• フィールドのマージン：入力フィールドの上・下・左・右の余白を調節できます。
• フィールドパディング：入力フィールドの上・下・左・右のパディング（コメント欄の外枠と中のテキストとの隙間）を調節できます。
• フィールド フォント：入力フィールドに表示されるテキストのフォントを変更できます。
• フィールド ソフトライト：フォントのタイプを選択できます。
• フィールド 書式コピー：テキストを車体にしたり、アンダーラインを引いたりできます。
• 文字列の揃え：文字の整列を設定できます。
• フィールド 文字サイズ：入力フィールド内の文字の大きさを調節できます。
• フィールド 文字間隔：入力フィールド内の文字間隔を調節できます。
• フィールド 行の高さ：入力フィールドに表示される文章の行の高さを調節できます。
• フィールド 文字サイズ：入力フィールドの文字のシャドウを設定できます。
• フィールド 角丸長方形：入力フィールドの4つの角の丸みを調節します。
• フィールドボーダースタイル：入力フィールドのボーダーの色を設定します。
• 強調ボーダーカラーを使う：「はい」に切り替えると、「フィールドフォーカス 角丸長方形」、「フィールドフォーカス ボーダースタイル」、「フィールドフォーカス ボーダー幅」、「フィールドフォーカス ボーダーカラー」、「フィールドフォーカス ボーダースタイル」の5つの設定項目が表示されます。
• フィールドフォーカス 角丸長方形：入力フィールドを選択している時の4つの角の丸みを調節します。
• フィールドフォーカス ボーダースタイル：入力フィールドを選択している時に表示したいボーダーのタイプを選択します。
• フィールドフォーカス ボーダー幅：（入力フィールドを選択している時の）ボーダーの幅を調節します。
• フィールドフォーカス ボーダーカラー：（入力フィールドを選択している時の）ボーダーの色を設定します。
• フィールドフォーカス ボーダースタイル：（入力フィールドを選択している時の）ボーダーの形状を選択します。
• フィールド ボックスシャドウ：入力フィールドのシャドウを選択します。

テキスト

• 文字列：コメントモジュール全体のテキストの位置を選択します。
• テキストの色：コメントモジュール全体のテキストの色を「明るい」か「暗い」から選択します。
• 文字サイズ：コメントモジュール全体のテキストのシャドウの設定をします。

タイトル・ボディテキスト

• 見出し3を挿入：これは、タイトルテキストのみに表示される項目で、ログインフォームタイトルのHタグを選択します。
• フォント：テキストのフォントを変更できます。
• ソフトライト：文字の太さを選択します。
• 書式のコピー：テキストの書式（斜体にしたり、打ち消し線を引いたり）を設定します。複数の書式を選択することも可能です。
• 文字の揃え：テキストの位置を設定します。
• テキストカラー：文字の色を設定します。
• 文字サイズ：文字の大きさを調節します。
• 文字間隔：テキストの各文字の隙間を調節します。
• 行の高さ：縦の幅を調節します。
• 文字サイズ：テキストにかけるシャドウを設定します。

テキストの細かい設定は、「タイトルテキスト」と「ボディテキスト」の2種類ありますが、使い方はほぼ同じなので、上にまとめてしまいました。

ボタン

• ボタンにカスタムスタイルを使用：「はい」に切り替えると以下の設定項目が表示され、ボタンの細かい設定が可能になります。
• ボタン 文字サイズ：ボタンの文字の大きさを設定します。
• ボタン テキストカラー：ボタンの文字色を設定します。
• ボタン Background：ボタンの背景色（メインとなる色）を設定します。
• ボタン ボーダー幅：ボタンのボーダーの幅を調節します。
• ボタン ボーダーの色：ボタンのボーダーの色を設定します。
• ボタン 境の半径：ボタンの角の丸みを調節します。
• ボタン 文字間隔：ボタンテキストの字間を調節します。
• ボタン フォント：ボタンテキストのフォントを選択します。
• ボタン ソフトライト：ボタンテキストの書体を変更できます。
• ボタン 書式のコピー：ボタンテキストの書式を設定します。
• ボタン アイコン：アイコンを表示したい場合は、こちらからデザインを選択します。
• ボタン アイコンの色：設定したアイコンの色を設定します。
• ボタン アイコンを配置：アイコンの配置をテキストの「左」に置くか「右」に置くか設定します。
• みのアイコンを止のためのボタン：アイコンを常時表示しておきたい場合は、「はい」に切り替えます。「いいえ」のままだと、マウスカーソルが置かれた時だけアイコンが表示されます。
• ボタン 文字サイズ：ボタンテキストのシャドウの設定ができます。
• ボタンのマージン：ボタン単体のマージンを設定できます。
• ボタンのパディング：ボタン単体のパディングを設定できます。
• ボタンのボックス影：ボタンにシャドウをつける場合は、こちらからデザインを選択します。