06.09

PHPファイルの管理画面を編集しよう – CSSでの画像設定とフォーム配置
管理画面のアレンジ方法について
今日はニュースを投稿できる「管理画面」に背景画像を設置して
ログインを楽しくする工夫をしていきたいと思います!
ソーシャルボタンはもう卒業したいです。笑
まずは
テーマテンプレートの説明書をご覧ください
こちらのPHPファイルにご注目頂き、フォルダ構成や、14ページに注目して欲しいと思います。
このフォルダ内、 News01 -> news -> admin -> include にある
admin_function.php のスタイルシート(CSS)を編集していきます。
他人が書いたコードは解読がやっかいです。💦
でもここでは、良心的なPHP工房さんのファイルです。
時間をかけて解読すれば、自分のものに出来ますので最後まで諦めないで解読しましょう🌟
どこを編集するのか?
69行目のbody background をbackground-imageに変えて
背景画像の位置を指定すれば完成です。
注意すべき点は背景画像のアップロード先でしょうか。
自分の覚えやすいフォルダにアップロードするのが良いでしょう♪
今回はimgフォルダに配置することにしました。
1 2 3 4 |
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に間違えない様にファイルを指定します。 ↓↓
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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"); } |
背景画像:
http://yukycohamabe.ciao.jp/adminartist/img/In-between.jpg
ログインボックスのメモ画像:
http://yukycohamabe.ciao.jp/artist_boxes/News01/pkobo_news/admin/img/memo.png
(※画像は、良ければ上記のリンクからご利用ください!)
ログインフォームと背景画像の位置調整は、CSSに慣れていないと難しいので、
今回もWebブラウザをChromeの開発管理ツールを使って設計しました。
他人が書いたCSSを解読する時は、必ずと言っていい程使います。
ソースを読むのは、時に目に負担となりますから、ぜひご活用ください。
それでも難しいと感じれば、最初はこのソースをコピペで使って頂ければと思います。
次回は新規登録画面にも背景色を指定していきます。
最後までお読みくださりありがとうございました!
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。