静的サイトで共通部分のh1をトップページと下層ページで切り替える方法
WEB制作をしているとWordPressなどのCMSが入らない完全静的サイトを作ることがあるかと思います。 5ページほどのサイトと仮定してヘッダーなどは共通パーツとして作った場合ヘッダー内にあるロゴをh1にしてしまうと中ページで会社概要などページタイトルをh1にした場合ページ内に2つh1が存在してしまいます。
別にh1が複数あっても大丈夫なのですが個人的に気持ち悪いのでこの記事ではヘッダーのロゴはトップページではh1、中ページでpになるようにする方法をご紹介します。
目次
共通部分のh1をトップページと下層ページで切り替え
今回ご紹介する方法はPHPを使用します。PHPが使えないレンタルサーバーなんてほぼないはずですから。
対象サイト
下記のようなサイトには今回方法が向いているかと思います。
- 静的サイト
- PHPが使用可能
- ヘッダーなどをincludeで共通化している
- 共通部分にh1がある
- トップページではh1、下層ページではpなど別のタグにしたい
- Pugなどテンプレートエンジンを使用していない
ソースコード
ソースコードは以下となります。 コピペで使用できます。
<?php $url = $_SERVER["REQUEST_URI"]; ?>
<?php if ($url == "/" || $url == "/index.php" || $url == "/index.html") : ?>
//ここにトップページ用のHTML
<?php else : ?>
//ここに中ページ用のHTML
<?php endif; ?>使用例
使用例は以下のようになります。 この例ではトップページではヘッダー内のロゴはh1、下層ページではpになります。
<header class="l-header">
<?php $url = $_SERVER["REQUEST_URI"]; ?>
<?php if ($url == "/" || $url == "/index.php" || $url == "/index.html") : ?>
<h1 class="l-header-logo">
<a href="/" class="l-header-logo__content">
<img src="logo.svg" alt="ロゴ" class="l-header-logo__content-image">
</a>
</h1>
<?php else : ?>
<p class="l-header-logo">
<a href="/" class="l-header-logo__content">
<img src="logo.svg" alt="ロゴ" class="l-header-logo__content-image">
</a>
</p>
<?php endif; ?>
</header>解説
仕組みは単純です。
$_SERVER["REQUEST_URI"];これは現在のURLを取得します。 URLがhttps://〇〇〇.comだった場合は/となります。 https://〇〇〇.com/index.htmlのindex.htmlとなります。
トップページは大抵以下の3つに当てはまるはずなので。
- /
- index.php
- index.html
if文で分岐させているだけです。
if ($url == "/" || $url == "/index.php" || $url == "/index.html")これだけです超簡単ですね。
最後に
今回の方法は完全に静的サイトでPHPが使えること前提です。 そもそもWordPressなどシステムが入っている場合はシステム側で対応できるはずなので今回の方法は使わなくてOK。
僕はたま〜に完全静的サイトを作る機会があるので今回の方法を使用しています。 この方法は別にh1の切り替え以外にも使えますがHTMLが汚くなるので今回の場合以外では使用していません。