PHPファイルの管理画面を編集しよう – CSSでの画像設定とフォーム配置 |

2017
06.09

PHPファイルの管理画面を編集しよう – CSSでの画像設定とフォーム配置

UI, UX

管理画面のアレンジ方法について

今日はニュースを投稿できる「管理画面」に背景画像を設置して

ログインを楽しくする工夫をしていきたいと思います！

ソーシャルボタンはもう卒業したいです。笑

まずは

テーマテンプレートの説明書をご覧ください

こちらのPHPファイルにご注目頂き、フォルダ構成や、１４ページに注目して欲しいと思います。

このフォルダ内、 News01 -> news -> admin -> include にある

admin_function.php のスタイルシート(CSS)を編集していきます。

他人が書いたコードは解読がやっかいです。💦

でもここでは、良心的なPHP工房さんのファイルです。

時間をかけて解読すれば、自分のものに出来ますので最後まで諦めないで解読しましょう🌟

どこを編集するのか？

69行目のbody background をbackground-imageに変えて

背景画像の位置を指定すれば完成です。

注意すべき点は背景画像のアップロード先でしょうか。

自分の覚えやすいフォルダにアップロードするのが良いでしょう♪

今回はimgフォルダに配置することにしました。

body#auth{
	margin-top:50px;	
	background-image:url("http://www.hogehoge.com/adminartist/img/In-between.jpg");
}

body#auth{

margin-top:50px;

background-image:url("http://www.hogehoge.com/adminartist/img/In-between.jpg");

}

DEMO : http://yukycohamabe.ciao.jp/adminartist/News01/news/admin/

真っ白だった管理画面が、カラフルな背景画像に一変🌟

ログインするのが楽しくなりました！

ちなみに、このメモ帳の画像はPixdenの無料画像を利用しています。

Photoshopでちょこっとアレンジして、配置しています。

これも同じテンプレートのimgフォルダに入れておき、
CSSに間違えない様にファイルを指定します。　　↓↓

body#auth #login_form{
	width:127px;
	height:266px;	
	margin:25px auto;
        border: 1px none #fff;
        border-radius: 10px;
        box-shadow: 0 0px 7px ;
        font-weight: normal;
        padding: 96px 96px 20px;
	color:none;
	line-height:1.3;
	font-size:90%;
	background-image:url("http://www.hogehoge.com/adminartist/img/memo.png");
}