管理画面のデザインを自由に変更しよう – CSSの解読と設計

ログイン後のページのデザイン変更

管理画面が作れたら、次はデザインにもこだわってみたくなりますよね。

次は、ログイン後、管理画面に入った後に更新情報が新規投稿できる

PHPファイルのデザインを編集していきます。

前回とは違って、今回はCSSファイルだけを変更します。

夏らしく、梅雨らしく、背景色を水色にしてみたいと思います。

PHP工房さんでファイルをDL、構成を再度確認するならこちらへ

前回の投稿 PHPファイルの管理画面を編集しよう – CSSでの画像設定とフォーム配置はこちら

 

編集するファイルの場所

News01 -> news -> admin -> css -> style.css です。
詳細は、2ページ ?

このファイルを開いて、body要素に背景色を指定してあげます。

style.cssの30行目、background:#87cefa;でライトスカイブルーにします。

body {
font-size:12px;
line-height:100%;
background:#87cefa;
color:#dc143c;
font-family:”メイリオ”, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
}

 

変更・削除ボタンのデザイン変更

こちらは同じファイルの103行目、.buttonAreaというクラスでデザインを設計します。

今回はボタンの背景色をピンク（#ffc0cb）、周りのボーダーをアリスブルー（#f0f8ff）に指定します。

 

.buttonArea a{
display:inline-block;
padding:3px 10px 1px;
margin:0 3px 0 0;
border:1px solid #f0f8ff;
text-decoration:none;
border-radius:4px;
color:#333;
font-size:12px;
background:#ffc0cb;
}
.buttonArea a:hover{
background:#efefef;
}

マウスを載せると変色するようにさせる a:hover　も色をつける様に指定しました。

これにはシルバーホワイト（#efefef）を指定しました。

※　WEB色見本サイトを参照

 

サーバー情報確認・新規登録・ログアウトボタンの変更

今度は、お知らせ・ニュースCMS管理画面トップという見出しのヨコにある
サーバー情報確認・新規登録・ログアウトという３つのボタンを変更してみます。

.linkBtn a {
padding: 5px 0;
border: 1px solid #6495ed;
display: inline-block;
background: #f0fff0;
color: #555;
border-radius: 6px;
width: 140px;
text-align: center;
text-decoration: none;
}

.linkBtn a:hover{
background:#ddd;
text-decoration:none;
color:#000;
}

こちらも先程と同様に、ボタンにマウスを載せると変色する指定を a:hoverでしています。

背景色はhoneydew （#f0fff0）にしてみました♬

IDはadminartist, PWは1104です。

仕上がりをこちらから確認してみてください☆

あとは実践あるのみです♪　

頑張ります。

 

最後までお読み頂きありがとうございました。