Tank_Authのログイン画面のカスタマイズ

Tank_Authは、導入後すぐに使えるようになっていますが、ログイン画面があまりかっこよくありません。そこで、WordPressのログイン画面のように、見た目を少し変更したいと思います。尚、スマートフォンでアクセスしてもきれいに見えるように作成してみたいと思います。

Tank_Authの初期状態のログイン画面を見てみましょう。

これは、テーブルで作成されていますので、スタイルシートで作り直したいと思います。まず、CodeIgniterのルートフォルダに『css』フォルダを作成し、その中に、『style.css』ファイルを新規作成します。とりあえず中身は空で構いません。

次に、『application/views/auth』フォルダの『login_form.php』ファイルを開き、テーブル構造を全て削除した後に、下記のコードを入力します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="<?php echo base_url()?>css/style.css">
	<title>ログイン</title>
</head>

これで、スタイルシートが適用されます。スタイル指定をするために、文書構造の切り分けをします。全体を<body></body>で、bodyの中を<div id=”wrap”>で囲みます。他に、ログインとパスワード用のテキストフィールドを<div id=”input”>、ログインボタンを<div id=”submit”>、パスワードの紛失と新規登録を<div id=”info”>、フォームの入力エラーを<div class=”error”>で囲みました。

先程作成したスタイルシート『style.css』を開き、下記のように指定しました。

/*------------------------------------------------------------
ログインフォーム
-------------------------------------------------------------*/
#wrap{
	width:300px;
	text-align:center;
	margin:10px auto;
	line-height:1.8em;
}
h1{
	color:#00F;
	font-size:1.8em;
	margin-bottom:20px;
}
#input{
	background-color:#D5F2FD;
	border-radius:8px;
	-webkit-border-radius:8px;
	padding:5px;
	margin:5px;
	box-shodow:5px 5px rgba(204,204,204,1);
	-moz-box-shadow:5px 5px rgbargba(204,204,204,1);
	-webkit-box-shadow:5px 5px rgba(204,204,204,1);
}
.error{
	color:#FF0000;
}
#submit{
	margin:10px;
	font-size:85%;
}
#submit a{
	text-shadow:1px 1px 0 #ddd;
	display:block;
	padding:5px 0;
	color:#44444444;
	text-decoration:none;
}
#info{
	margin-top:20px;
	margin-left:40px;
	text-align:left;
	text-height:2.0em;
}

ブラウザで確認してみます。

せっかくですので、ログインフォームの上に、サイト名も表示するようにしたいと思います。『application/controllers』フォルダの『auth.php』ファイルを開き、function login()メソッドの最後の方(95行目あたり)に、

//サイト情報
$data['site_name'] = $this->config->item('website_name', 'tank_auth');

を挿入します。

そして、『login_form.php』ファイルの先頭の方に、

<h1><?php echo $site_name;?></h1>

を挿入します。それでは、再度、ブラウザで確認してみます。

最後に、DreamweaverのDevice Centralでスマートフォンでの表示も確認してみます。

本日は以上です。

尚、たいしたスタイルシートではありませんが、ご自身で作成するのが面倒な方は、下記からダウンロードして下さい。

[download id=”2″ ]

Zipファイル『Tank_Auth_loginform』の中に、『login_form.php』ファイルと、『style.css』ファイルが入っています。
解凍後、『login_form.php』ファイルは、『application/views/auth』フォルダの中に上書き保存して下さい。『style.css』ファイルは、base_urlの直下に、『css』フォルダを作成し、その中に保存して下さい。

補足ですが、base_urlは、『application/config』フォルダの『config.php』ファイルの17行目あたりに記載されていますので、base_urlがわからない方は、そこで確認して下さい。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ