Get FREEDOM from MONEY

【初心者でも簡単】WordPressオリジナルテーマの作り方「基本デザイン(ヘッダー編)」

2020.12.04

WordPressを利用してオリジナルデザインのサイトを作りたいというという方向けに初心者でも分かりやすく解説していきます。

第1回の今回はこのサイトをオリジナルテーマで作り直す過程、静的サイトのヘッダー部分の製作過程を紹介していきたいと思います。

静的サイトの作成(ヘッダー)

WordPressのテーマ作りをする前に必ずやっておかないといけないことがあります。

それは静的サイトの作成です。

静的ウェブページとは、ユーザーのブラウザにサーバー上に保存されたデータをそのまま変更せずに配信するタイプのウェブページのことである。ウェブアプリケーションにより配信時に生成される動的ウェブページと対比される。

それでは早速ヘッダー部分の解説をさせて頂きます。

HTMLの作成

今回、ヘッダー部分に記載するのはサイトのロゴ、キャッチコピー、そしてメインカテゴリーの3種類の項目です。

ロゴ マネフリのロゴ
キャッチコピー Get FREEDOM from MONEY
メインカテゴリー
  • ホーム
  • お金
  • ライフスタイル
  • 仕事
  • HTML / CSS
  • お問い合わせ

まずはこの3つの項目をHTMLでコード化します。

	
<header>
 <p><img src="logo.svg" alt="マネフリのロゴ" title="マネフリ"></p>
 <p>Get FREEDOM from MONEY</p>
 <ul>
  <li><a href="url">ホーム</a></li>
  <li><a href="url">お金</a></li>
  <li><a href="url">ライフスタイル</a></li>
  <li><a href="url">仕事</a></li>
  <li><a href="url">HTML / CSS</a></li>
  <li><a href="url">デザイン</a></li>
  <li><a href="url">お問い合わせ</a></li>
 </ul>
</header>
	

これだけだとヘッダーに並べたい項目が縦にずらりと並ぶだけです。

DEMO

そこでCSSを使用してデザインをしていきます。



各タグの説明

<header>タグはここがヘッダーだとお知らせするために使用します。

<p>タグは文章などに使用します。今回はロゴでも使用していますが、トップページの場合はロゴは<h1>タグでもいいかなって思っています。

<ul>タグと<li>タグはセットで使用します。リストで表示する際に使用するタグで今回はメニューとして使用しています。

<a>タグはリンクを作るためのタグです。「href=”url”」のurl部分にリンク先のurlを記載することでクリックするとそのページに移動します。

CSSで装飾

cssリセット

まずはCSSをリセットします。

	
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0; padding: 0;
    border: 0;
    outline: 0;
    font-size: 1em;
    vertical-align: baseline;
    background: transparent;
}
	

最近はこのCSSリセットで準備をしています。CSSリセットについて気になる方は検索してみて下さい。色んなサイトで詳しく書かれています。

<header>タグにFlexbox

まずはCSSを使用して各項目を横並びにしていきます。

	
header {
 display: flex;
 align-items: center;
 justify-content: space-between;
}
	

これで横並びになりました。

DEMO

[display: flex;]についてはWebクリエイターボックスさんがメチャクチャ分かりやすく書かれています。



各タグの説明

[display: flex;]は直下のタグ、今回は<header>タグの下層にある<p>タグと<ul>タグの要素が横並びになります。

[align-items: center;]は[display: flex;]で横並びになった各要素を垂直方向に中央揃えにします。

[justify-content: space-between;]は最初と最後の要素を両端に配置して、残りの要素を等間隔に配置します。

<ul>タグにFlexbox

さらにメニュー項目が縦並びになっているのを横並びに変更します。

	
header ul {
 display: flex;
}
	

これでメニュー項目も横並びになりました。

DEMO



各タグの説明

[header ul]は<header>タグ内にある<ul>タグに[display: flex;]を適用します。

<li>タグの黒い点を消す

<li>タグのテキストの前にある「・」が今回は必要ないので消します。

	
header ul {
 display: flex;
 list-style-type: none;
}
	

これで「・」がなくなりました。。

DEMO



各タグの説明

[list-style-type]はliに付いてくる[・]を[○]に変えたりできます。今回は表示を消すのでnoneにしました。

各メニュー項目を離す

このままでは各メニュー項目がくっついているので少しずつ離していきます。

	
header ul li { margin-right: 2em;}
header ul li:last-child { margin: 0;}
	

これで各項目の右側を2emずつスペースを確保。そして最後の項目の右側はスペースなしにしています。

DEMO



各タグの説明

[margin]は項目の前後左右にスペースを開ける要素です。今回は右側に2emのスペースを空けています。

[li:last-child]は今回のメニューの最後の<li>タグを指します。これで最後の<li>の[margin]を0にしてスペースを空けなくしています。

全体を内側に入れて背景を黒くします

各メニューは離れましたがロゴとメニューの最後の項目「お問い合わせ」が画面の端にあるので少し内側に入れます。ついでに背景色を黒く、文字を白くします。

	
header {
	padding: 1em;
	background: black;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
	

これで<header>の要素を1emずつ内側に入れています。

ロゴは白いロゴデータに変更しています。

DEMO



各タグの説明

[padding]は要素の内側にスペースを入れます。今回は<header>内に上下左右1emのスペースを入れました。

[background]で背景色を指定しています。今回は「black」にして黒くしました。

[color]で文字の色を変えます。今回は「white」で白くしています。

リンクの色も白くします

メニューの各項目が青い文字のままでデザインが合わないのでこちらも白くします。

	
header ul li a { color: white;}
	

これで各メニューの文字も白くなりました。

DEMO



各タグの説明

[header ul li a]は<header>タグの中の<ul>タグの中の<li>タグの中の<a>タグを意味します。ここまで指定してメニューの文字の色を白く変更しています。

最後に

今回は長くなりましたのでここで終了です。まだデザインとしては中途半端ですが簡単なメニューでしたらこれでも通用すると思います。

ここから各メニューを装飾して、さらにタブレットやスマホで見ても見やすいように修正をかけていきます。

まだまだ先は長いですができるだけ初心者の方でも分かりやすいように書いていきたいと思いますので付き合って下さい。

よろしくおねがいします。