WordPress自作テーマのススメ
配色切替

WordPressサイトのトップページを作る

丁寧モード
時短モード
答えだけわかればいい人は「時短モード」がおすすめ。記事中の「補足」を非表示にします。
目次

↓のようなブログのトップページを作っていきます。

よくあるブログのトップページ構成

言い換えると↓のようなパーツで構成されるページです。

  • ヘッダー
  • 共通メニュー
  • メイン画像
  • 記事一覧
  • サイトについて
  • 著者について
  • SNSシェア
  • 記事検索
  • 新着一覧
  • カテゴリ別一覧
  • タグ一覧
  • 年月別一覧
  • フッター
  1. ページに必要なパーツ（メイン画像、記事一覧、プロフィールなど）をHTMLで書く
  2. 大きさや色など見た目の調整をCSSで書く

この手順をパーツごとに繰り返せば、トップページ的なページが作れます。

メイン画像

トップページを開いて最初に目に飛び込んでくる部分にはだいたいドーンと大きな画像がありますよね。

これとか
これとか

これを作っていきます。

数秒間隔で紙芝居のように切り替わるパターンもよくあります。

メイン画像のイメージ

ただ、画像の切り替えはJavaScriptの知識が必要です。

HTMLが何も見ずに書けるレベルになるまでは「あ、無理」ってなってしまいやすいので、いったんHTMLだけで作れる静止画で進めます。

スライドショーを作りたい方は別の記事にしたのでそちらを見てください。

画像を用意する

まず、表示させる画像を用意します。

なんでもいいので自分の好きな画像を用意してください。

ここではフリーイラスト素材サイトのpixabayから猫の画像を使います。
テーマの中に画像を入れるフォルダ「img」を作り、その中に用意した画像を入れます。
補足
ON

用紙した画像はFTPでアップロードしてください。

画像を表示させる命令を書く

その画像の場所を書くことでページに表示します。

場所はHTMLで<body>と</body>の間に書きます。

画像を表示したいときは<img>タグを使います。

<img>
補足
ON

img＝image（画像）の略です。

画像の場所とファイル名をsrc=""の中に書きます。

<img src="画像の場所とファイル名">

実際のコードは

<img src="<?php echo get_theme_file_uri();?>/img/cat.jpg">

となります。

補足
ON

<?php echo get_theme_file_uri();?>
は、
今使ってるテーマの場所を表示するWordPressの命令です。
WordPressはPHPで動いているのでPHPの形で書きます。
前後に<?phpと?>があるのはそのためです。

サイト上に何かを表示するには、その何かを「取得」して「表示」しないといけませんが、get_theme_file_uri()は「取得」しかしません。
なので、「表示しなさい」というPHPの命令「echo」を組み合わせています。

これでテーマの場所まで指示できます。

そのテーマの中にimgフォルダがあり、その中に用意した画像cat.jpgがあるので
「テーマの場所/img/cat.jpg」
となります。
「/」が「～の中の」の意味です。

↓index.php全体でこうなっていればOK。

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<img src="<?php echo get_theme_file_uri();?>/img/cat.jpg">
</body>

これをFTPでアップしてブラウザで表示を確認します。

こんな感じになってるはず。

見た目を整える

とりあえずメイン画像を表示することはできました。

「え、でも、、、」

ですよね？

そうですね、これじゃサイトらしくないです。

おそらくこのあたりが違和感の原因です。

これを改善すると↓こうなります。

だいぶサイトらしくなったんじゃないでしょうか。

では進めていきます。

まず、背景と前景。

上の図では青い背景に白い前景になっています。

まず、これから。

背景は、言い換えればサイト全体の色です。

なので、サイト全体を包む<body>に対して色をつけます。

<body>はHTMLには既に書いてますね。

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<img src="<?php echo get_theme_file_uri();?>/img/cat.jpg">
</body>

なので、CSSに以下を書きます。

body{
	background: #98B5CF;
}

色は好きな色でいいんですが、上の図の青が#98B5CFだったのでこれにしておきます。

補足
ON

サイト制作での色は16進数で指定します。
たとえば、黒は#000000;、赤は#FF0000、白は#FFFFFFというように。
「black」とか「red」などの色の名前でも指定できますが、大雑把な色にしかなりません。

補足
ON

16進数のカラーの理屈は説明すると長くなるし、知らなくてもサイトは作れるので省きます。
知りたい人は「HTML　色」とかでググってください。

色を決める方法は2つ。
「既にある素材から拾ってくる方法」
と
「自分で決める方法」
です。

まず、既にある素材から拾ってくる場合。

イラストに入っている色から取りたい場合、その画像を「GIMP」というPhotoshopの無料版みたいなアプリで読み込みます。
「Figma」でもいいです。これも無料。

左のメニューにある色のついた四角をクリックして、色を選ぶ画面を出します。

その中にスポイトのようなマークがあります。
これをクリックすると、マウスカーソル（矢印）がスポイトに変わります。

そのままほしい色の上でクリックするとその色のカラーコードが「HTML表記」の欄に表示されます。

補足
ON

自分で色を決める場合は同じように色のついた四角を選んで出た画面を出し、グラデーション部分で好きな色を選びます。

色が決まったら「HTML表記」のカラーコードをコピーします。

補足
ON

わざわざアプリを使わなくてもブラウザがChromeならブラウザだけで直接色を選ぶシミュレーションができます。

Chromeでサイトを開いたら「F12」キーを押します。
（サイトのどこかを右クリックして出たメニューから「検証」を選んでもOK）
画面の端にプログラミングっぽい画面が開きます。

「element.style {」という文字の少し下をクリックするとその下にカーソルが点滅します。
ここにCSSを書きます。
「background」と書いてエンターを押すと右側にカーソルが移るので色名を入れます。

色名を入れたあとは、その左にある色つきの四角を押すと色が変更できます。
自分でカラーコードを指定するよりも直感的に色を選べます。

次に前景です。

背景がbodyで、その中に前景のブロックを置くイメージなので、bodyの中にdivを書きます。

<body>
<div></div>
</body>

そして、その中にメイン画像が来るので、<div>の中にさっき書いたimgを入れます。

<body>
	<div>
		<img src="<?php echo get_theme_file_uri();?>/img/cat.jpg">
	</div>
</body>
補足
ON

HTMLタグには2つのタグで挟むものと1つで完結するものがあります。
bodyやdivが前者で、imgは後者ですね。

2つのタグで挟むものは開始タグでそのブロックが始まり、終了タグで終わります。
その間に入ったタグは外のタグで囲われる形になります。

この入れ子構造をイメージしやすくするために、HTMLを書くときはインデント（字下げ）を意識すると分かりやすいです。
行頭にカーソルを置いて「TAB」キーを押すとできます。（複数行同時にすることもできます。）

インデントがなくても作れるんですが、この先どんどんHTMLを書き足していくと、わけがわからなくなってくるので、こまめに整えていくことが結果的に時短につながります。

ここで実際のサイトの表示を見てみます。

表示は前と変わらずですが、検証ツール（F12キー）で見ると書き足したHTMLが反映されているのが分かります。

HTMLだけ加えても見た目は変わらない（ことが多い）ので、CSSで調整します。

補足
ON

が、divに直接CSSを指定すると、この先、使うdivにも全部同じCSSが適用されてしまいます。

今は前景用のdivだけにCSSを指定したいので、このdiv専用の名前をつけます。
その名前に対してCSSを指定することで、他のdivに影響せずに指定できます。

前景のdivに「main」と名前をつけます。

	<div class="main">
		<img src="<?php echo get_theme_file_uri();?>/img/cat.jpg">
	</div>
補足
ON

名前はタグの中にclass="クラス名"という形でつけます。

クラス名は英数字と一部の記号で書きます。（日本語は使えません。）

CSSでこの「main」divの背景色を白にする命令を書きます。

.main{
	background: #fff;
}
補足
ON

名前の前に「.（ドット）」を書くと「○○というクラス」という指示になります。

divやbodyそのものに指定する場合は「.」は不要ですが、今回はdivの中でもmainという名前がついたものだけにしたいのでこのような書き方になります。

「div.main」とつなげて書くと「mainというクラスのdiv」という意味になります。

ただし、「div .main」と、スペースを空けてつなげると意味が変わり「divの中にあるmainというクラス名を持つもの」となるので注意が必要です。

補足
ON

＜　「main_visual」じゃなくて「main visual」じゃダメなの？

普通の感覚だとそうですよね。スペースで単語をつなぎます。

でも、クラス名でのスペースは「名前を分割する」意味を持つので、ここで使ってしまうと「main」というクラス名と、「visual」というクラス名の2つに分かれてしまいます。

もちろん、それで悪いわけではないんですが、シンプルな1単語だと今後、他のページを作ったときなどに、意図せず同じ名前を使ってしまうかもしれません。
そのときに、ここで決めてた見た目の指示（文字色や文字サイズなど）が意図せず影響してしまうことを避けるために、最低でも2単語、意図せず使いそうにない名前を意識しておくのがいいです。
（意図的に繰り返し使う分には問題ないです）

画像右下のアイコンクリックで原寸大。
画像クリックで戻る。
この記事の目次
  1. メイン画像
  2. 画像を用意する
  3. 画像を表示させる命令を書く
  4. 見た目を整える
前 次