Custom Login Page Customizer by Colorlibの使い方と設定
ログインページとログインフォームをカスタマイズできる WordPress 用プラグインの紹介です。
そのような時に便利な WordPress 用プラグインがあります。
それは「Custom Login Page Customizer by Colorlib」です。
その導入手順から日本語化・使い方と設定などを解説していきます。
Custom Login Page Customizer by Colorlib
Custom Login Page Customizer by Colorlib は、ログインページとログインフォームをリアルタイムで確認しながらカスタマイズできます。
Custom Login Page Customizer by Colorlib でカスタマイズできる主な項目は、以下のとおりです。
- 5 種類のカスタムログインページテンプレート
- ログインページのログインロゴの非表示・表示
- ログインページのロゴテキストの表示・非表示
- ログインページのカスタムロゴの設定
- ログインページのロゴの幅と高さの変更
- ログインページの列数の変更
- ログインページの列の幅の調整
- ログインフォームの列の配置の調整
- ログインフォームの垂直方向と水平方向の配置のカスタマイズ
- ログインページの背景色の設定
- ログインページにカスタム背景画像の追加
- ログインフォームの列の背景色の設定
- ログインフォーム列のカスタム背景画像の追加
- ログインフォームの幅と高さをの変更
- ログインフォームのカスタム背景画像の追加
- ログインフォームの背景色の設定
- ログインフォームのボーダーの半径の調整
- ログインフォームフィールドの幅の調整
- ログインフォームフィールドのマージンの調整
- ログインフォームフィールドの境界線のカスタマイズ
- ログインフォームフィールドの境界半径の調整
- ログインフォームフィールドの背景色の設定
- ログインフォームフィールドのテキスト色の設定
- ログインフォームフィールドのラベル色の設定
- ログインフォームの各ラベルのカスタマイズ
- ログインフォームの下の各ページのリンクの表示・非表示
- ログインフォームボタンの背景色の設定
- ログインフォームのボタンへのホバー時の背景色の設定
- ログインフォームボタンの境界線の色の設定
- ホバー時のログインフォームボタンの境界線の色の設定
- ログインフォームのボタンの影の調整
- ログインフォームボタンのテキストシャドウの調整
- ログインフォームのリンク色の設定
- ホバー時のログインフォームリンクの色の設定
- 「ログイン状態を保存する」の非表示・表示
- カスタム CSS コードも入力可
記事を作成もしくは更新時点でのバージョン:1.2.96
インストール手順
Custom Login Page Customizer by Colorlib をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Custom Login Page Customizer by Colorlib – WordPress.org
もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面からインストールできます。
ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Custom Login Page Customizer by Colorlib」と入力します。
検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。
プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。
WordPressプラグインのインストール手順を解説 – WordPress活用術
日本語化
Custom Login Page Customizer by Colorlib を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。
WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。
※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。
日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。
WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術
専用メニュー
管理画面の「設定」メニューの下に追加されています。
使い方
専用のカスタマイザーを起動します。
「Login Customizer」メニューを選択すると外観カスタマイザーが起動しした後、
専用のカスタマイザーが表示されます。
カスタマイズできる項目は、セクションで分けられています。
左側で変更があると、画面の右側でリアルタイムプレビューで確認できます。
設定
Templates
テンプレートを選択します。
Logo options
- Hide Logo
ログを隠すかどうか。 - Use Text Logo
テキストロゴを使用するかどうか。 - Logo URL
ロゴ画像に貼るリンク URL を入力します。 - Logo Title
ロゴの上にカーソルを置くと表示されるツールチップを入力します。テキストロゴを使用するにしていると表示されます。 - Login Page Title
ログインページのタイトルを入力します。
以下の項目は、Use Text Logo を有効・無効にしているかで内容が変化します。
- Logo text color
ロゴのテキストの色を設定します。 - Logo text color hover
ロゴのテキストへのホバー時の色を設定します。 - Logo text size
ロゴの文字サイズを指定します。
初期値:20
- Custom logo
カスタムのロゴ画像を選択します。 - Logo Width
ロゴの幅を入力します。
初期値:84 - Logo Height
ロゴの高さを入力します。
初期値:20
Layout options
Columns:
列数を選択します。
Form Vertical Alignment:
フォームの垂直方向の表示位置を選択します。
Form Horizontal Alignment:
フォームの水平方向の表示位置を選択します。
Background options
Custom background color:
背景色を選択します。
Custom background:
背景として使用する画像を選択します。
General Form options
- Form Width
フォームの幅を指定します。
初期値:350 - Form Height
フォームの高さを指定します。
初期値:400 - Form background image
フォームの背景画像を選択します。 - Form background color
フォームの背景色を選択します。
- Form padding
フォームのパディングを指定します。 - Form border
フォームの枠線をカスタマイズできます。 - Form border radius
フォームを枠線で囲んでいる 4 つの角の丸み具合を指定します。 - Form shadow
フォームの影の付き具合をカスタマイズできます。
- Form field width
フォームのフィールドの幅をピクセル単位で指定します。 - Form field margin
フォームのフィールドのマージンを指定します。 - Form field border
フォームのフィールドの枠線のスタイルを指定します。 - Form field border radius
フォームのフィールドの 4 つ角の丸み具合をカスタマイズできます。
- Form field background
フォームのフィールドの背景色を選択します。 - Form field color
フォームのフィールドの色を選択します。 - Form label color
フォームのフィールドのラベルの色を選択します。
- Lost Password Text
「パスワードを忘れました?」リンクのデフォルトのテキストを変更できます。 - Back to site text
「サイトに戻る」リンクのデフォルトのテキストを変更できます。 - Hide Extra Links
フォーム下の各種リンクを表示するかどうか。
Login Form Texts
ログインフォームで使用するラベルの文言をカスタマイズできます。
Register Form Texts
メンバー登録フォームで使用するラベルの文言をカスタマイズできます。
Lost Password Form Texts
パスワード再発行フォームで使用するラベルの文言をカスタマイズできます。
Form Button & Links
送信ボタンの背景色・枠線の色・ホバー時の色を選択します。
ボタンとボタンのテキストの影の付き具合をカスタマイズできます。
ボタンの色・リンク色・リンクへのホバー時の色を選択します。
また、「ログイン状態を保存する」チェックボックスを非表示にもできます。
Custom CSS
カスタム CSS コードも入力可。
代替プラグイン
Custom Login Page Customizer にほしい機能が無かった場合には、
Custom Login Page Customizer 以外にもログインページをカスタマイズできるプラグインを記事にしています。
以下では、Custom Login Page Customizer を含めて 6 個を簡単に紹介しています。
ログインページをカスタマイズできるWordPressプラグイン一覧