WordPress オリジナルテーマを作ってみよう：⑥ style.css の作成

⑥では、スタイルシートの記述方法をはじめ、フォントのサイズや背景色、flexを使って要素を横並びにする方法などを紹介しています。

スタイルシートの情報

style.css に記述します。

WordPressで使うスタイルシートには、下記のような情報を記述します。
各自、オリジナルテーマの情報を入力しましょう。

/*
1.Theme Name: テーマの名前
2.Theme URI: テーマのURL
3.Author: 作った人の名前
4.Author URI: 作った人のURL
5:Description: テーマの説明
6.Version: 1.0
*/

/* は、コメントの始まり、*/ はコメントの終わりを表します。

コード内でコメントを書くときに使います。
コメントは、プログラム上では無視されるので何個書いても大丈夫です。

文字コードの設定

文字コードはUTF-8を指定します。

@charset "UTF-8";

要素リセット

ブラウザによって独自のスタイルが適用されているので、それをリセットします。

リセットの方法は他にもありますが、今回は簡単に余白のみにします。

/* 要素リセット */
*{
margin:0px; /* マージン（要素の周りの余白）*/
padding:0px; /* パディング（要素の中の余白）*/
}

html全体のフォントサイズを指定する

html{
font-size:16px; /* フォントのサイズ */
}

bodyタグにフォントの種類と色を指定する

body{
font-family: sans-serif; /* フォントの種類 */
color:#333; /* フォントの色 */
}

header のスタイルを作成する

header.php にある、<div>に指定した class="header" は、
「header というクラスを使っている」ということになります。

<div class="header">
 <a href="<?php bloginfo('url'); ?>">
 <?php bloginfo('name'); ?>
 </a>
</div>

クラスは簡単に言うとまとまりです。

スタイルシートでクラスを作るには、「.クラス名」とします。

.header{
background:#FFC0C0; /* 背景色 */
}

これで header クラスに背景色を指定しています。

side と main を横並びにする

side と main を<div> で囲んで、クラスは「container」にします。

<div class="container">
 <?php get_template_part('sidebar'); ?>
 <div class="main">
  コード省略
 </div>
</div>

containerクラスには下記を記述

.container{
display:flex; /* 横並び */
width:90%;　/* 横幅 */
}

親要素に display:flex; を指定すると、子要素が横並びになります。

side のスタイルを作成する

背景色と横幅を設定

.side{
background:#FFFFC0; /* 背景色 */
width:30%; /* 横幅 */
}

main のスタイルを作成する

.main{
background:#D2F1F6;
width:70%; /* 横幅 */
}

footer のスタイルを作成する

.footer{
background:#C0C0FF; /* 背景色 */
}

プレビューで確認してみる

どの部分にスタイルが適用されているか、わかりやすくするため すべての背景に色を指定しました。

このように表示できたでしょうか？

まとめ

簡単ではありますが、各要素にスタイルを適用することができました。

• スタイルシートの情報
• html
• body
• header
• side
• main
• footer

スタイルシートもコードを間違えると反映されないため、最初のうちはコピペでやってみてください。

反映されたら、各自スタイルをアレンジしてみてくださいね。

ただ、これでは 見栄えが悪すぎるので(;'∀')、次の工程でさらにスタイルシートを触っていきたいと思います。