WordPress標準のログイン画面に画像スライダーを入れたりデザインをカスタマイズできるプラグイン「Login Slider」 | Knowledge Base

WordPress標準のログイン画面に画像スライダーを入れたりデザインをカスタマイズできるプラグイン「Login Slider」

まあバックエンドだから仕方ないことですが、Wordpress標準のログイン画面はちょっと無機質な感じがしませんか?

そこでCSSを追加してデザイン変更を!!と思っても、実はWordpressのログイン画面などは通常のテーマで使われているCSSとは別のファイル(別物)なんです。したがってテーマのCSSでカスタマイズしても一向に反映されないんですね。

自身でCSSの編集ができる人なら

Wordpressでは通常のテーマで制御できない管理画面側のCSSがあります。「Admin Customizer」オリジナルのCSSを記述して自由にログイン画面や管理画面のデザインを変更できるプラグインです。

などを使ってカスタマイズすればOKですね。でもそこまでしなくても・・・という方も多いはず。

それにいくらカスタマイズしても色や文字の大きさなどのカスタマイズだけではやっぱりどこか冷たい?感じがする・・・という場合におすすめなのが今回紹介する【Login Slider】です。

この記事を公開する時点ではログイン画面に画像スライダーを使えるプラグインはこれだけだと思われます。

スポンサーリンク

【Login Slider】プラグインの基本的な機能・できること

  1. ログイン画面にスライダー画像を挿入できる
  2. 画像にはそれぞれリンクが設定でき、クリックで別のページへリダイレクトできる
  3. 基本的に変更するであろう項目についてはメニュー化されている
この記事の内容について
このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います
  1. すべての環境で動作するとは限りません
  2. できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります
  3. 有料版と無料版がある場合、テストは原則無料版のみで実施しています
  4. テスト環境については文末に記載しています
  5. 使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Login Slider】プラグインの設定画面や表示の日本語化と翻訳

【Login Slider】プラグインは日本語化が可能な言語ファイルが同梱されており、翻訳してみましたが適用されないようです(設定項目が少ないので英語表記でも大丈夫だと思います)。

【Login Slider】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。
を参照ください

【Login Slider】プラグインの基本的な使い方

設定は「外観」→「カスタマイズ」を開き、出てくるカスタマイザーメニューの一番下に追加される「Login Slider」から行います。さまざまな項目については以下の通りです

Slidesメニュー

スライダー画像の設定を行います。最大で7枚までの画像をスライド表示させることができます。

設定項目は

  1. Transition Style
  2. 画像入れ替え時の効果を設定します

  3. Slide Duration (milliseconds)
  4. 画像を入れ替える速度を設定します

で、この設定を行った上で画像を追加していくだけです

Colors and Brandingメニュー

ログイン画面のいろいろなデザイン変更ができます
項目は

  1. Login Form Logo
  2. ログイン画面にあるWordpressロゴをオリジナル画像に変更できます

  3. Body Background
  4. ログイン画面全体の背景色です

  5. Form Background
  6. ログイン情報入力フォームの背景色です

  7. Form Label Color
  8. 入力フォームラベルの色です

  9. Form Input Background Color
  10. 入力欄の背景色です

  11. Form Input Text Color
  12. 入力した文字の色です

  13. Form Button Text Color
  14. ボタンの文字色です

  15. Form Button Background Color
  16. ボタンの背景色です

  17. Below Form Links
  18. フォーム下のリンク文字色です

※ボタンの色はホーバー時(マウスオーバー時)の設定項目もあります

【Login Slider】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

残念ながらカスタムCSSを適用する機能がないためさらに細かく設定変更するには別のプラグインを用いるなどする必要がありますが、今回は同時使用のテストをしていません。

が、これぐらいのカスタマイズができればおそらく十分でしょうし、他のプラグインとのCSS読み込み順などによっては表示が崩れたりする可能性がありますから自身でチェックしてみてくださいね。

プラグインのテスト環境&個人的評価

最後に【Login Slider】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

  1. WordPressのバージョン:4.7.5
  2. PHPのバージョン:7.0
  3. テーマ:Simplicity バージョン2.3.0g
  4. プラグインのバージョン:1.0.0
  5. このプラグインの最新バージョンは1.0.0です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

    5段階評価

  1. 設定のしやすさ:★★★★★
  2. 使いやすさ:★★★★☆
  3. おすすめ度:★★★★☆

多数のユーザーで投稿するタイプのサイトでなくても、ログイン画面に画像があるだけで何となくやる気になりますよ。モチベーションアップにおすすめのプラグインです。

Amazonの人気商品楽天市場の人気商品
いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

  • 価   格:¥ 1,706
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4295000795
    インプレス

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

本当によくわかるWordPressの教科書 はじめての人も、挫折した人も、本格サイトが必ず作れる

  • 価   格:¥ 1,685
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4797395168
    SBクリエイティブ

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

WordPress 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

  • 価   格:¥ 3,002
  • 販 売 者: Amazon.co.jp
  • 評   価:
  • 商品の概要:ASIN: 4774173800
    技術評論社

CS Shop
【100円クーポン配布中!】いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏

【100円クーポン配布中!】いちばんやさしいWordPressの教本 人気講師が教える本格Webサイトの作り方/石川栄和/大串肇/星野邦敏

  • 価   格:1,706 円 (税込)
  • 販 売 者: bookfan 1号店 楽天市場店
  • 評   価:
  • 商品の概要:著者石川栄和(著) 大串肇(著) 星野邦敏(著)出版社インプレス発行年月2017年03月ISBN9784295000792ページ数255P9784295000792内容紹介大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バ..
一歩先にいくWordPressのカスタマイズがわかる本【電子書籍】[ 相原知栄子 ]

一歩先にいくWordPressのカスタマイズがわかる本【電子書籍】[ 相原知栄子 ]

  • 価   格:2,894 円 (税込) 送料込
  • 販 売 者: 楽天Kobo電子書籍ストア
  • 評   価:
  • 商品の概要:<p>【本電子書籍は固定レイアウトのため7インチ以上の端末での利用を推奨しております。文字列のハイライトや検索、辞書の参照、引用などの機能が使用できません。ご購入前に、無料サンプルにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください】<..
WordPressユーザーのためのPHP入門第2版 [ 水野史土 ]

WordPressユーザーのためのPHP入門第2版 [ 水野史土 ]

  • 価   格:2,592 円 (税込) 送料込
  • 販 売 者: 楽天ブックス
  • 評   価:
  • 商品の概要:水野史土 エムディエヌコーポレーション インプレスワードプレス ユーザー ノ タメノ ピーエイチピー ニュウモン ミズノ,フミト 発行年月:2017年03月 ページ数:256p サイズ:単行本 ISBN:9784844366584 水野史土(ミズノフミト) レスキューワーク株式会社代表。WordPres..
楽天ウェブサービスセンター CS Shop

プラグインに関するお問い合わせ

最後までお読みいただきありがとうございました。 内容の相違、導入後のトラブル、設定方法のお問い合わせなどはこちらのリンクからお願いします。
さまざまな情報をいただくことで、プラグインの紹介記事をより正確でよりわかりやすく、よりいろいろな方のお役に立てる情報にしていきたいと考えておりますので、ぜひともご協力をお願いいたします。
役に立つ情報でしたらぜひSNSやメールでシェアしてください
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
    1
    シェア
  • 1
  •  
  •  
  •  
  •  

似たようなプラグインをお探しですか?

このプラグインはに分類されています。リンクをクリックすると同じような機能を持つプラグインの紹介記事一覧が表示されますので、プラグイン探しに是非ご活用ください。

メニューを表示できません

ページ先頭へ