ペコト 地元の生活にもっとワクワクを。 | 株式会社ペコト

このページのリンクをコピーする

CMSのログイン画面編集の手順 #ablog_cms

才木ケイ 才木ケイ

a-blog cmsでは更新のしやすさや、レイアウトの変更、表示されている場所をクリックし編集できるダイレクト編集機能など更新するユーザーの為の優しい機能がたくさんあります。

そんなお手軽な部分だけでなく、「管理画面のここをどうにかしたい」「更新する際にこのボタンはいらない」などCMSの管理画面の部分も割と簡単に編集・変更できるのも特徴です!

そこで今回自社運営サイトのログイン画面を変更する機会があったので、a-blog cmsの管理画面への入り口「ログインページ」の編集・変更の手順を紹介していきます。
今回はCMSの導入方法などは全部飛ばしていますのでご了承下さい!
CMSのバージョンは2.6.1.4となっております。

こんな感じに変えたい!


これを


こうしたいと思います。
サイトに合った変更を施すだけでログイン時のテンションが上がってきますよね!
では作業に入ります!

ログイン画面を表示させているファイルはどこ?

a-blog cmsを利用している方はよく見る画面だと思いますが、これがログイン画面です。


ログイン画面を表示しているファイルは契約しているサーバーのa-blog cmsを置いている場所から

/themes/system/login.html

このファイルで表示しています。
直接このファイルを編集してしまうとa-blog cmsのバージョンアップデート等を行ったときに上書きされて消えてしまうので現在使用している(/themes)のフォルダの直下に入れて編集をしていきます。

themesフォルダの直下に移動したところでお使いのエディターでlogin.htmlを開いてみましょう。
開くとこんな感じになっていると思います。


ちゃんとthemesに置いたlogin.htmlが適応されているか確認するためにのすぐ下に適当な文字を入れて更新してみて下さい。


左上の方に表示されてたでしょうか?

これでログイン画面を編集する準備は整ったので、実際に中身を見ていきましょう!

ログイン画面の中身はどうなってる?

login.htmlはこのファイル単体でログイン時の表示を全て行っているので、場合による条件分岐がたくさんあり少しごちゃっとしています。
一般的にはログイン画面を度々更新するという事はあまりないと思うので、わかりやすいコメントアウトを残しておく程度で大丈夫だと思います。

login.html内部には下の順番でコンテンツが並んでいます。

head部分
ログイン部分
読者登録部分
パスワードのリセット部分
上から順番に解説していきましょう。

このページのリンクをコピーする