2017
06.09

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

CSS, PHP

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

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

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

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

まずは

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

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

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

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

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

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

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

 

どこを編集するのか?

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

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

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

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

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

 

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

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

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

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

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

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

背景画像:
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を解読する時は、必ずと言っていい程使います。

ソースを読むのは、時に目に負担となりますから、ぜひご活用ください。

それでも難しいと感じれば、最初はこのソースをコピペで使って頂ければと思います。

次回は新規登録画面にも背景色を指定していきます。

 

最後までお読みくださりありがとうございました!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。