CMSのログイン画面編集の手順 #ablog_cms
a-blog cmsでは更新のしやすさや、レイアウトの変更、表示されている場所をクリックし編集できるダイレクト編集機能など更新するユーザーの為の優しい機能がたくさんあります。
そんなお手軽な部分だけでなく、「管理画面のここをどうにかしたい」「更新する際にこのボタンはいらない」などCMSの管理画面の部分も割と簡単に編集・変更できるのも特徴です！
そこで今回自社運営サイトのログイン画面を変更する機会があったので、a-blog cmsの管理画面への入り口「<strong>ログインページ</strong>」の編集・変更の手順を紹介していきます。
今回はCMSの導入方法などは全部飛ばしていますのでご了承下さい！
CMSのバージョンは2.6.1.4となっております。
こんな感じに変えたい！
これを
こうしたい。
サイトに合った変更を施すだけでログイン時のテンションが上がってきますよね！
では作業に入ります！
ログイン画面を表示させているファイルはどこ？
a-blog cmsを利用している方はよく見る画面だと思いますが、これがログイン画面です。
ログイン画面を表示しているファイルは契約しているサーバーのa-blog cmsを置いている場所から
/themes/system/<strong>login.html</strong>
このファイルで表示しています。
<em>直接このファイルを編集してしまうとa-blog cmsのバージョンアップデート等を行ったときに上書きされて消えてしまう</em>ので現在使用している（/themes）のフォルダの直下に入れて編集をしていきます。
themesフォルダの直下に移動したところでお使いのエディターでlogin.htmlを開いてみましょう。
開くとこんな感じになっていると思います。
ちゃんと<strong>themesに置いたlogin.html</strong>が適応されているか確認するために<body>のすぐ下に適当な文字を入れて更新してみて下さい。
ペコペコ
左上の方に表示されてたでしょうか？
これでログイン画面を編集する準備は整ったので、実際に中身を見ていきましょう！
ログイン画面の中身はどうなってる？
login.htmlはこのファイル単体でログイン時の表示を全て行っているので、場合による条件分岐がたくさんあり少しごちゃっとしています。
一般的にはログイン画面を度々更新するという事はあまりないと思うので、わかりやすいコメントアウトを残しておく程度で大丈夫だと思います。
login.html内部には下の順番でコンテンツが並んでいます。
- head部分
- ログイン部分
- 読者登録部分
- パスワードのリセット部分
上から順番に解説していきましょう。
head部分
ここの特徴は検索で表示されたりしないようmetaタグでnoindexが指定してあったり、デフォルトのcssが指定してあるぐらいです。
ログイン画面の見た目を編集したい場合はここで新しいcssファイルを読み込ませて、そのcssファイルを更新していくのが良いと思われます。
ログイン部分
ここでログインの部分です。htmlファイルで言うと24行目にある<!-- BEGIN auth -->から96行目にある<!-- END auth -->がログイン時の表示を担当しています。
25行目にある一つ目の条件分岐はa-blog cms 2.7.1.4に付属されているsimple2016または、site2016というテーマを使っていた場合の<strong>ログインヘッダーの画像の表示用分岐</strong>になります。
それ以外のテーマを使っているときは分岐によりa-blog cmsのロゴが表示されますね！
<!-- BEGIN_MODULE Blog_Field -->
<!-- BEGIN_IF [{loginHeaderImage@path}/nem/] -->
<!-- BEGIN loginHeaderImage:veil -->
<img class="acms-admin-loginHeaderImage" src="%{ARCHIVES_DIR}{loginHeaderImage@path}" alt="%{BLOG_NAME}">
<!-- END loginHeaderImage:veil -->
<!-- ELSE --><img class="acms-admin-loginHeaderImage" src="/images/ablogcms_login.gif" alt="a-blog cms">
<!-- END_IF -->
<!-- END_MODULE Blog_Field -->もし何か画像を用意している場合はこの25行目を全て消して新しくimgタグを追加したら良いと思います。
独自にカスタムフィールドで画像を追加している場合もこの部分を上書きすれば良いでしょう。
<strong>これでロゴの変更に成功したと思います！</strong>
その下28行目から94行目は上から順に
- ログインサイトの情報
- ログインエラーメッセージ集
- IDとパスワードinput部分
- パスワードをお忘れですか？ボタン
- 各種SNSログインログインボタン
- 新規の読者登録ボタン＆サイトに戻る
となっています。
エラーメッセージの文言を変えたり、inputにplaceholder属性を追加したりと色々出来ると思います。
ビジュアルを変える場合はcssの読み込みを消して新規で作ったり、現在使われているクラスを消してみたりしていけば良いと思います。
<em>ビジュアルを変える際のおすすめはa-blog cmsのcssは消さずに残しておくことです。</em>
<strong>バリデータを使ったエラーメッセージの表示非表示の変更</strong>や<strong>jQueryを使い自動でフォームにフォーカス</strong>など割りと便利な機能が含まれており、ビジュアル面以外は適応させておいたほうがいいです。
#エラーメッセージの表示非表示にバリデータを使った表示非表示の変更の機能
class名のvalidator-result-{oooo}の部分で機能しています
#jQueryを使い自動でフォームにフォーカスの機能
js-ready-focusというclass名があるタグで機能しています。
読者登録部分
<!-- BEGIN subscribe -->
<div class="acms-admin-titleBox"><!-- BEGIN_MODULE Blog_Field -->
<!-- BEGIN_IF [{loginHeaderImage@path}/nem/] -->
<!-- BEGIN loginHeaderImage:veil -->
<img class="acms-admin-loginHeaderImage" src="%{ARCHIVES_DIR}{loginHeaderImage@path}" alt="%{BLOG_NAME}">
<!-- END loginHeaderImage:veil -->
<!-- ELSE -->
<img class="acms-admin-loginHeaderImage" src="/images/ablogcms_login.gif" alt="a-blog cms">
<!-- END_IF -->
<!-- END_MODULE Blog_Field --></div>
<div class="acms-admin-loginBox">
<div class="acms-admin-siteImageText">
<span class="acms-admin-label" style="background-color:%{BLOG_THEME_COLOR};">%{BLOG_NAME}</span> <span class="acms-admin-label">新規読者登録</span>
</div>
<!-- BEGIN sendMsg#before -->
<p class="acms-admin-login-text">お名前とメールアドレスを登録いただくと指定されたメールアドレスに確認メールが送信されます。メールの内容の従って登録をしてください。</p>
<!-- END sendMsg#before -->
<!-- BEGIN sendMsg#after -->
<p class="acms-admin-alert acms-admin-alert-info">入力されたメールアドレス宛に、確認用URLをパスワードを記載したメールを送信しました。</p>
<!-- END sendMsg#after -->
<label for="input-text-mail" class="validator-result-{name:validator#required} acms-admin-alert acms-admin-alert-danger">名前が入力されていません。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#required} acms-admin-alert acms-admin-alert-danger">メールアドレスが入力されていません。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#email} acms-admin-alert acms-admin-alert-danger">不正なメールアドレスです。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#doubleMail} acms-admin-alert acms-admin-alert-danger">すでに登録されているメールアドレスです。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#send} acms-admin-alert acms-admin-alert-danger">メールの送信に失敗しました。システムの設定に問題があります。システムの管理者にお問い合わせください。</label>
<!-- BEGIN_IF [{step}/eq/step/_or_/{step}/eq/reapply] -->
<!-- 入力画面の時ここが出力 -->
<!-- ELSE_IF [{step}/eq/result] -->
<!-- 完了画面の時ここが出力 -->
<!-- END_IF -->
<div class="acms-admin-form">
<label class="acms-admin-form-block acms-admin-clear">名前</label>
<input type="text" name="name" value="{name}" class="acms-admin-form-large acms-admin-form-block validator-result-{name:validator#required} acms-admin-sp-form-top" placeholder="" />
<input type="hidden" name="user[]" value="name" />
<input type="hidden" name="name:validator#required" />
<label class="acms-admin-form-block acms-admin-clear">メールアドレス</label>
<input type="text" name="mail" value="{mail}" class="acms-admin-form-large acms-admin-form-block validator-result-{mail:validator#required} validator-result-{mail:validator#email} validator-result-{mail:validator#doubleMail} validator-result-{mail:validator#send} acms-admin-sp-form-bottom" placeholder="" />
<input type="hidden" name="user[]" value="mail" />
<input type="hidden" name="mail:validator#required" />
<input type="hidden" name="mail:validator#email" />
<input type="hidden" name="mail:validator#doubleMail" />
<!-- <label class="acms-admin-form-block acms-admin-clear">メールマガジン</label>
<input type="hidden" name="mail_magazine" value="off" />
<label class="acms-admin-form-checkbox" for="input-checkbox-mail_magazine">
<input type="checkbox" name="mail_magazine" value="on"{mail_magazine:checked#on} id="input-checkbox-mail_magazine" />
<i class="acms-admin-ico-checkbox"></i>
メールマガジンを受け取る
</label>
<input type="hidden" name="user[]" value="mail_magazine" />
<label class="acms-admin-form-block acms-admin-clear">モバイルメールマガジン</label>
<input type="hidden" name="mail_mobile_magazine" value="off" />
<label class="acms-admin-form-checkbox" for="input-checkbox-mail_mobile_magazine">
<input type="checkbox" name="mail_mobile_magazine" value="on"{mail_mobile_magazine:checked#on} id="input-checkbox-mail_mobile_magazine" />
<i class="acms-admin-ico-checkbox"></i>
モバイルメールマガジンを受け取る
</label>
<input type="hidden" name="user[]" value="mail_mobile_magazine" /> -->
</div>
<!-- BEGIN submit -->
<p class="loginAction">
<button type="submit" class="acms-admin-btn-admin acms-admin-btn-admin-primary acms-admin-btn-block acms-admin-btn-large" name="ACMS_POST_Login_Subscribe">読者登録</button>
</p><!-- BEGIN_MODULE Touch_SnsLogin -->
<p class="acms-admin-border"><span class="acms-admin-borderText acms-admin-login-text">もしくは</span></p>
<p class="acms-admin-login-text">SNSアカウントで登録するとワンクリックでログインできます。</p>
<div class="acms-admin-grid">
<p class="loginAction acms-admin-btn-snsloginContainer">
<span class="acms-admin-btn-snsimage acms-admin-btn-snsimage-facebook">
<span class="acms-admin-icon acms-admin-icon-facebook"></span>
</span>
<button type="submit" class="acms-admin-btn-admin acms-admin-btn-facebooklogin acms-admin-btn-block acms-admin-btn-large acms-admin-btn-snslogin" name="ACMS_POST_Api_Facebook_OAuth_Login">読者登録</button>
</p>
<p class="loginAction acms-admin-btn-snsloginContainer">
<span class="acms-admin-btn-snsimage acms-admin-btn-snsimage-twitter">
<span class="acms-admin-icon acms-admin-icon-twitter"></span>
</span>
<button type="submit" class="acms-admin-btn-admin acms-admin-btn-twitterlogin acms-admin-btn-block acms-admin-btn-large acms-admin-btn-snslogin" name="ACMS_POST_Api_Twitter_OAuth_Login">読者登録</button>
</p>
<p class="loginAction acms-admin-btn-snsloginContainer">
<span class="acms-admin-btn-snsimage acms-admin-btn-snsimage-google">
<span class="acms-admin-icon acms-admin-icon-google"></span>
</span>
<button type="submit" name="ACMS_POST_Api_Google_OAuth_Login" class="acms-admin-btn-admin acms-admin-btn-googlelogin acms-admin-btn-block acms-admin-btn-large acms-admin-btn-snslogin"><span class="acms-admin-hide-visually">Google</span>読者登録</button>
</p>
</div>
<!-- END_MODULE Touch_SnsLogin -->
<input type="hidden" name="type" value="signup" />
<!-- END submit -->
<div class="acms-admin-grid">
<p class="loginLink acms-admin-col-6">
<a href="/login/" class="acms-admin-btn-flat acms-admin-btn-block">ログイン画面に戻る</a>
</p>
</div>
</div>
<!-- END subscribe -->99行目〜187行目
<!-- BEGIN subscribe -->から始まる部分は読者登録用となっています。
管理画面よりユーザー登録の外部申請を受け付けるにチェックを入れた場合表示されるようになります。
パスワードのリセット部分
<!-- BEGIN remind -->
<div class="acms-admin-titleBox"><!-- BEGIN_MODULE Blog_Field -->
<!-- BEGIN_IF [{loginHeaderImage@path}/nem/] -->
<!-- BEGIN loginHeaderImage:veil --><img class="acms-admin-loginHeaderImage" src="%{ARCHIVES_DIR}{loginHeaderImage@path}" alt="%{BLOG_NAME}"><!-- END loginHeaderImage:veil -->
<!-- ELSE -->
<img class="acms-admin-loginHeaderImage" src="/images/ablogcms_login.gif" alt="a-blog cms">
<!-- END_IF -->
<!-- END_MODULE Blog_Field --></div>
<div class="acms-admin-loginBox">
<div class="acms-admin-siteImageText"><span class="acms-admin-label" style="background-color:%{BLOG_THEME_COLOR};">%{BLOG_NAME}</span> <span class="acms-admin-label">パスワードの再発行</span></div>
<!-- BEGIN sendMsg#before -->
<p class="acms-admin-alert acms-admin-alert-info">パスワード再発行依頼の確認メールを送信します。</p><!-- END sendMsg#before --><!-- BEGIN sendMsg#after -->
<p class="acms-admin-alert acms-admin-alert-info">パスワードリセット申請メールを送信しました。</p><!-- END sendMsg#after -->
<label for="input-text-mail" class="validator-result-{mail:validator#required} acms-admin-alert acms-admin-alert-danger">メールアドレスが入力されていません。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#exist} acms-admin-alert acms-admin-alert-danger">登録されていないメールアドレスです。</label>
<label for="input-text-mail" class="validator-result-{mail:validator#send} acms-admin-alert acms-admin-alert-danger">メールの送信に失敗しました。システムの設定に問題があります。システムの管理者にお問い合わせください。</label>
<!-- BEGIN_IF [{step}/eq/step/_or_/{step}/eq/reapply] -->
<!-- 入力画面の時ここが出力 -->
<!-- ELSE_IF [{step}/eq/result] -->
<!-- 完了画面の時ここが出力 -->
<!-- END_IF -->
<div class="acms-admin-form">
<label class="acms-admin-form-block acms-admin-clear">メールアドレス</label>
<input type="text" name="mail" value="{mail}" class="acms-admin-form-large js-ready-focus acms-admin-form-block validator-result-{mail:validator#required} validator-result-{mail:validator#exist} validator-result-{mail:validator#send}" id="input-text-mail" placeholder="" />
<input type="hidden" name="login[]" value="mail" />
<input type="hidden" name="mail:validator#required" />
<input type="hidden" name="mail:validator#exist" />
</div>
<!-- BEGIN submit -->
<p class="loginAction">
<button type="submit" class="acms-admin-btn-admin acms-admin-btn-admin-primary acms-admin-btn-block acms-admin-btn-large" name="ACMS_POST_Login_Remind">再発行</button>
</p>
<!-- END submit -->
<div class="acms-admin-grid">
<p class="loginLink acms-admin-col-6">
<a href="/login/" class="acms-admin-btn-flat acms-admin-btn-block">ログイン画面に戻る</a>
</p>
</div>
</div>
<!-- END remind -->212行目〜248行目
ここでパスワードのリセット時の表示を変更する事が可能です。
まとめ
自社運営サイトでは最終的にこのような感じに仕上がりました！
このページでご紹介した内容でこのように変更していくことができます。
意外と簡単に編集可能なので是非挑戦してみて下さい！
