WordPress オリジナルテーマを作ってみよう：⑦ style.css の仕上げ

⑦では、スタイルシートの仕上げをします。

style.css の仕上げ

header のスタイルを追記

headerクラスに追記します。

.header{
 background:#FFC0C0;
 width:100%;
 height:100px; /* 高さ */
 text-align:center; /* テキストをセンター揃え */
 line-height:100px; /* テキストの高さ */
}

container のスタイルを追記

containerクラスに追記します。

.container{
 display:flex;
 width:90%;
 margin:10px auto; /* containerを左右中央に */
 flex-flow: row wrap; /* 画面が狭くなったら要素を改行 */
 border:solid 1px #ccc; /* 枠線 */
}

side のスタイルを追記

sideクラスに追記します。

.side{
 background:#FFFFC0;
 width:20%; /*横幅*/
 padding:20px; /* 要素の内部余白 */
 border:solid 1px #ccc; /* 枠線 */
}

main のスタイルを追記

mainクラスに追記します。

.main{
 background:#D2F1F6;
 width:70%; /*横幅*/
 padding:20px; /* 要素の内部余白 */
 margin-left:auto; /* 要素の左側へ余白 */
}

.main div{ /* .mainの中にあるdiv */
 background:#fff; /* 背景色 */
 padding:15px; /* 要素の内部余白 */
 margin-bottom:15px; /* 要素の外部下に余白 */
}

.main h2{ /* .mainの中にあるh2 */
 font-size:18px; /* フォントサイズ */
 padding:7px 0px; /* 要素の内部余白 */
 margin-bottom:5px; /* 要素の外部下に余白 */
}

footer のスタイルを追記

footerクラスに追記します。

.footer{
 background:#C0C0FF;
 height:100px; /* 高さ */
 text-align:center; /* テキストをセンター揃え */
 line-height:100px; /* テキストの高さ */
 border:solid 1px #ccc;
}

プレビューで確認

ここまでを確認すると、このようになります。

まだ、カテゴリーやページング、レスポンシブにしたときの見栄えが悪いのでさらに直していきます。

↓ レスポンシブ時

さらにスタイルシートを整える

カテゴリー部分

ul,li{/* ulとliに対して */
 list-style: none; /* リストの飾りをなしに */
 padding: 7px 0px; /* li の内部余白 */
}

.children{/* 子カテゴリーに対して */
 text-indent:10px;
}

ページング部分

.nav-links a{
 padding:5px 10px 7px; /* 要素の内部余白 */
 border:solid 1px #ccc; /* 枠線 */
 text-decoration:none;
}

.current{
 padding:5px 10px 7px; /* 要素の内部余白 */
 background:#E7E7E7; /* 背景色 */
}

マウスオーバーで色を変えたいときは

.nav-links a:hover{
 background:#E7E7E7;
}

レスポンシブ部分

ここでは、768px をブレイクポイントにしていて、768px まではこのスタイルが適用されます。

.footer{} の下に記述してください。

/*--レスポンシブ-----------------------------------------------*/
@media screen and (max-width:768px) {
.container{
 display:block;
 width:95%;
 margin:10px auto; /* containerを左右中央に */
}

.side{
 width:90%; /*横幅*/
 margin:10px auto;
}

.main{
 width:90%; /*横幅*/
 margin:10px auto;
}
}

プレビューで確認

以上のスタイルの他にも、ヘッダー、サイド、フッターの背景色を消してみました。

まとめ

以上で index.php と style.css の仕上げは終わりです。

• headerのスタイル
• sideのスタイル
• mainのスタイル
• footerのスタイル

長丁場でしたが流れはつかめたでしょうか？

index.php をどう作るかということに焦点を当てたので、ヘッダーやサイドバー、フッターの中身は最小限にしています。こちらに関してはまた後日投稿したいと思います。

スタイル部分では、作成したファイルをアレンジいくことで個性のあるテーマが出来上がります。
どこを触ったらどんな変化があるのか、こうしたいけど どうやるのか、など 疑問を持ちながら試行錯誤していくと自然にコードが身についていくと思います。

header の色を変えたり、枠線（border）を入れたり、side と mainを入れ替えてみたり・・・などなど挑戦してみてください。

長々とお付き合いくださりありがとうございました^^
index.php 以外のページの作り方も今後紹介していきますので、今しばらくお待ちくださいませ。