【WordPress専用】ヘッダーの作り方(前編)

今回は、レスポンシブWebデザインを用いて、本格的なヘッダーを作りながら、
CSS,JavaScriptについて解説したいと思います。

ヘッダーはホームページの根幹をなす部分で、
中規模以上のホームページを作る上でも、
統一性を保つ上で、大半が決まると言って良い部分です。

まず、CSSなし・HTMLのみの状態と同じ環境で、今回作るヘッダーを見てみましょう。

CSSなしの場合

一見すると、要素がただ縦に並べられているだけで、
どのような入れ子構造になっているのかも分かりません。
次にCSSを入れてみます。

CSSを入れる

PC版のヘッダーが整列されました。

HTML(WordPress)

末尾の赤いボタンを押して、
そのままWordPressのコードエディターに貼り付けてください。


<!-- wp:columns {"metadata":{"name":""},"className":"header-area"} -->
<div class="wp-block-columns header-area"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns {"metadata":{"name":""},"className":"inner"} -->
<div class="wp-block-columns inner"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"Logo"} -->
<p class="Logo">Logo</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"list-for-pc"} -->
<ul class="list-for-pc"><!-- wp:list-item {"className":"top nature"} -->
<li class="top nature"><a href="#">top</a><span></span></li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">News</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">Works</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">Gallery</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">About</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#">Contact</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#"><img src="https://mf-ken.com/note/wp-content/uploads/2024/04/cart.png"></a></li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#"><img src="https://mf-ken.com/note/wp-content/uploads/2024/04/facebook.png"></a></li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"link"} -->
<li class="link"><a href="#"><img src="https://mf-ken.com/note/wp-content/uploads/2024/04/camera.png"></a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"metadata":{"name":""},"className":"sp"} -->
<div class="wp-block-columns sp"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:list {"className":"toggle-list"} -->
<ul class="toggle-list"><!-- wp:list-item {"metadata":{"name":""},"className":"menu"} -->
<li class="menu">Menu</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="#">News</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="#">Works</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="#">Gallery</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="#">About</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="#">Contact</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"last"} -->
<li class="last"><a class="shop" href="#"></a>
<a class="insta" href="#"></a>
<a class="facebook" href="#"></a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
 

CSS


ul{padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
.article ul li{margin: 0;}

.header-area .Logo{
    margin: 0;
    text-align: center;
}

.header-area .inner ul{
	display: flex;
	justify-content: space-around;
	width: 100%;
}

.header-area .inner ul li{
	position: relative;
}

.header-area .inner ul li:hover a,
.header-area .inner ul .top.nature a{
	color: #ff1000;
}

.header-area .inner ul .top span{
	position: absolute;
	bottom: 0;
	left: -10%;
	height: 2px;
	background-color: #ff1000;
}

.header-area .inner ul .top span{
	width: 120%;
	transition: all .2s;
}

.header-area .inner ul li a{
	color: #000;
	font-size: 13.5px;
}

.header-area .inner ul li img{
	width: 17.5px;
}

.header-area .sp{
	display: none;
}

.header-area .sp ul{
	width: 275px;
	margin: auto;
	padding: 0;
}

.header-area .sp ul li{
	display: block;
	line-height: 0;
	text-align: center;
	border-bottom: #666 1px solid;
}

.header-area .sp ul li:not(.menu){
	display: none;
}

.header-area .sp ul li:not(.menu).active{
	display: block;
}

.header-area .sp ul a,
.header-area .sp ul .last,
.header-area .sp ul .menu{
    display: block;
    width: 275px;
    height: 38px;
    background: #000;
    line-height: 38px;
    color: #fff;
}

.header-area .sp ul .menu{
	position: relative;
}

.header-area .sp ul .menu::before,
.header-area .sp ul .menu::after{
	position: absolute;
	content: "";
	width: 26.87px;
	height: 26.87px;
	background-color: #fff;
	transform: rotate(45deg);
}

.header-area .sp ul .menu::before{
	top: 5.565px;
	left: -13.435px;
}

.header-area .sp ul .menu::after{
	top: 5.565px;
	right: -13.435px;
}

.header-area .sp ul .last a{
	display: inline-block;
	width: 36px;
	height: calc(100% - 1px);
	margin: 0 5px;
	background-size: 20px;
	background-position: center;
	background-repeat: no-repeat;
}

.header-area .sp .shop{
	background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/04/cart-2.png");
}

.header-area .sp .insta{
	background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/04/camera-2.png");
}

.header-area .sp .facebook{
	background-image: url("https://mf-ken.com/note/wp-content/uploads/2024/04/facebook-2.png");
}

@media screen and (max-width:781px){
	.header-area .inner .list-for-pc{display: none;}
	.header-area .inner > div{justify-content: center;}
	
	.header-area .inner{
		top: 100px;
		left: 0;
		width: 100%;
	}
	
	.header-area .sp{
		display: block;
	}
}
 

CSSではpxの小数点以下を細かく設定していますが、基本的に、
1px未満の解像度は存在しません。
ただし、デベロッパーツールで要素の大きさを測った場合、
小数点第二位まで表示されますが、これは内部的な数字です。

現段階のヘッダーはPC版(専用)ですが、多くのサイトのヘッダー部分は、
ul要素で作るのが恒例と言えます。
モバイル版も、縦並びのul要素で作られる事が多いようです。
今回はWordPressの機能にあるリスト(ul要素)で作成しました。

ul要素はフレックスボックスと相性が良く、
justify-content: space-around;を設定すれば、li要素の横幅に関係なく、
要素と要素の間および左右端に、一定のスペースを入れてくれます。

ちなみに、主流がfloat(要素を浮かせる)からflexboxに移行したのは2015年頃からで、
機能としては新しいです。

次回予告

次回は、JavaScriptによる装飾とモバイル版について解説したいと思います。

みらいワークの施設利用者
チュンチュン

「WordPress」でのHTML・CSS・JavaScriptに関する情報を、
提供させて頂く予定です。
使用プラグインは「Simple Custom CSS and JS」で、
JavaScriptの表示位置は必ず「要素内」です。
ただし、使用環境により異なる事をご了承ください。

サイト制作
「みらいワーク」利用者ノート
タイトルとURLをコピーしました