<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>フッター &#8211; ケケンタの独学ITブログ</title>
	<atom:link href="https://kekenta-it-blog.com/tag/%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC/feed/" rel="self" type="application/rss+xml" />
	<link>https://kekenta-it-blog.com</link>
	<description>プログラミングやWeb制作の情報を発信</description>
	<lastBuildDate>Wed, 13 Aug 2025 10:38:46 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png</url>
	<title>フッター &#8211; ケケンタの独学ITブログ</title>
	<link>https://kekenta-it-blog.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【コピペで簡単！】WordPressでコピーライトの年号を自動更新する方法</title>
		<link>https://kekenta-it-blog.com/wp-copyright-auto-update/</link>
					<comments>https://kekenta-it-blog.com/wp-copyright-auto-update/#respond</comments>
		
		<dc:creator><![CDATA[ケケンタ]]></dc:creator>
		<pubDate>Thu, 31 Oct 2024 00:31:26 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[コピーライト]]></category>
		<category><![CDATA[フッター]]></category>
		<guid isPermaLink="false">https://kekenta-it-blog.com/?p=12194</guid>

					<description><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/10/eye-catch__wp-copyright-auto-update__12194-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>この記事ではWordPressでコピーライト（Copyright）の年号を自動更新させる方法をご紹介します。 コピーライトの例 誰でもコピペで簡単に実装できますのでぜひご活用ください！ 【結論】WordPressでコピー [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/10/eye-catch__wp-copyright-auto-update__12194-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>
<p>この記事ではWordPressで<strong><span class="swl-marker mark_yellow">コピーライト（Copyright）の年号を自動更新させる方法</span></strong>をご紹介します。</p>



<p class="has-text-align-center is-style-balloon_box2">コピーライトの例</p>


<div class="wp-block-image is-style-default">
<figure class="aligncenter size-full"><img decoding="async" width="297" height="37" src="https://kekenta-it-blog.com/wp-content/uploads/2024/10/image-10.png" alt="コピーライトの例" class="wp-image-12195"/><figcaption class="wp-element-caption">コピーライトの例</figcaption></figure>
</div>

<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/11/kekenta-icon-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/11/kekenta-icon-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>コピーライトを自動更新させるようにすれば、<strong>毎年手動で年号を修正する手間も、修正忘れもなくなります！</strong></p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p><strong><span class="swl-marker mark_yellow">誰でもコピペで簡単に実装</span></strong>できますのでぜひご活用ください！</p>


<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-subloop-wq/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】WP_Query（サブループ）の使い方とパラメータ一覧を紹介</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-edit-functions/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-how-to-load-js/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/change-to-swell/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/03/eye-catch__school-php-and-wp__14099-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/school-php-and-wp/">PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】</a>
						<span class="p-blogCard__excerpt">僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション&#8230;</span>					</div>
				</div>
			</div>
		</div>


<h2 class="wp-block-heading">【結論】WordPressでコピーライトの年号表記を自動更新させる方法</h2>



<p class="is-style-bg_stripe"><strong>コピーライト部分のソースコード</strong>を以下のように記述します。</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;!-- 自動更新なし --&gt;
&lt;small&gt;©2023 - 2024 ケケンタの独学ITブログ&lt;/small&gt;

&lt;!-- 自動更新あり --&gt;
&lt;small&gt;©2023 - &lt;?php echo date(&#39;Y&#39;); ?&gt; ケケンタの独学ITブログ&lt;/small&gt;</code></pre></div>


<div class="wp-block-image is-style-default">
<figure class="aligncenter size-full"><img decoding="async" width="297" height="37" src="https://kekenta-it-blog.com/wp-content/uploads/2024/10/image-10.png" alt="出力結果" class="wp-image-12195"/><figcaption class="wp-element-caption">出力結果</figcaption></figure>
</div>


<p>この内、<code>&lt;?php echo date('Y'); ?&gt;</code>の部分が、<strong>年号を自動更新するためのソースコード</strong>です。</p>



<p class="is-style-icon_info"><strong><span class="swl-marker mark_orange">「Y」は大文字</span></strong>です。<br>小文字（y）で入力してしまうと、「2024」ではなく「24」のように２桁表記になってしまうためご注意ください。</p>



<p class="has-text-align-center"><span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGQ9Ik0yMDEuNCAzNzQuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMGwxNjAtMTYwYzEyLjUtMTIuNSAxMi41LTMyLjggMC00NS4zcy0zMi44LTEyLjUtNDUuMyAwTDIyNCAzMDYuNyA4Ni42IDE2OS40Yy0xMi41LTEyLjUtMzIuOC0xMi41LTQ1LjMgMHMtMTIuNSAzMi44IDAgNDUuM2wxNjAgMTYweiI+PC9wYXRoPjwvc3ZnPg==)" data-icon="FasAngleDown" data-id="1" aria-hidden="true" class="swl-inline-icon"> </span></p>



<h2 class="wp-block-heading">【注意点】コピーライトの年号表記について</h2>



<p class="is-style-big_icon_batsu">コピーライトの年号に「現在の年」しか表記していないサイトも見かけますが、実はこれは誤りです。</p>



<p>コピーライトでは、<span class="swl-inline-color has-swl-deep-01-color"><strong><span class="swl-marker mark_orange">「最初の発行年」が必須項目</span></strong></span>となっています。</p>



<p>例えば、「<strong>2023年</strong>に開設したサイト」であれば、必ず以下のような構成でコピーライトを記述する必要があります。</p>



<p class="is-style-balloon_box">「2023」が必須</p>



<p class="is-style-emboss_box">©2023 ケケンタの独学ITブログ<br>©2023 &#8211; 2024 ケケンタの独学ITブログ</p>



<p class="has-text-align-center"><span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGQ9Ik0yMDEuNCAzNzQuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMGwxNjAtMTYwYzEyLjUtMTIuNSAxMi41LTMyLjggMC00NS4zcy0zMi44LTEyLjUtNDUuMyAwTDIyNCAzMDYuNyA4Ni42IDE2OS40Yy0xMi41LTEyLjUtMzIuOC0xMi41LTQ1LjMgMHMtMTIuNSAzMi44IDAgNDUuM2wxNjAgMTYweiI+PC9wYXRoPjwvc3ZnPg==)" data-icon="FasAngleDown" data-id="1" aria-hidden="true" class="swl-inline-icon"> </span></p>



<p>また、冒頭で提示した</p>


<div class="wp-block-image is-style-default">
<figure class="aligncenter size-full"><img decoding="async" width="297" height="37" src="https://kekenta-it-blog.com/wp-content/uploads/2024/10/image-10.png" alt="コピーライトの例" class="wp-image-12195"/></figure>
</div>


<p>のように、「©年号－年号」という表記にする場合、<strong>後者の年号を表記するかどうかの基準</strong>は、<strong><span class="swl-marker mark_yellow">何か新しい情報を付け加えるなど、サイトを更新・リニューアルしたかどうか</span></strong>です。</p>



<p>逆にいうと、<strong>更新・リニューアルなどしていなければ、後者の年号は不要</strong>ということです。</p>



<h2 class="wp-block-heading">【まとめ】コピーライトは著作権を放棄していないことを示すメッセージ</h2>



<p>以上が<strong><span class="swl-marker mark_yellow">WordPressでコピーライトの年号を自動更新する方法</span></strong>でした。</p>



<p>実はコピーライトを記述したからと言っても、日本の法律で保護される著作権が変わるわけではありません。</p>



<p>しかし、コピーライトを明記しておくことで、</p>



<p>「当サイトの著作権は私たちに帰属します」</p>



<p>「著作権は放棄していません」</p>



<p>ということを示すことができます。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>また、個人的な意見ですが、コピーライトが表記されているだけでしっかりしたサイトに見えるという利点もあるように思います！（僕だけ……？）</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>WordPressでサイト制作される際は、ぜひこの記事でご紹介した方法をご活用いただき、効率的なコピーライト管理を行なっていただければ幸いです！</p>



<p>それでは、最後までご覧いただきありがとうございました。</p>



<p>当ブログでは、WordPressやWebサイト、PHPなどに関する情報を発信しています。</p>



<p>ご興味のある方はほかの記事もご覧いただけるとうれしいです！</p>
]]></content:encoded>
					
					<wfw:commentRss>https://kekenta-it-blog.com/wp-copyright-auto-update/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【Web制作】PHPのinclude関数でヘッダーやフッターをパーツ化する</title>
		<link>https://kekenta-it-blog.com/html-include-parts/</link>
					<comments>https://kekenta-it-blog.com/html-include-parts/#respond</comments>
		
		<dc:creator><![CDATA[ケケンタ]]></dc:creator>
		<pubDate>Fri, 05 Jul 2024 06:01:33 +0000</pubDate>
				<category><![CDATA[HTML/CSS]]></category>
		<category><![CDATA[Web制作]]></category>
		<category><![CDATA[パーツ化]]></category>
		<category><![CDATA[フッター]]></category>
		<category><![CDATA[ヘッダー]]></category>
		<guid isPermaLink="false">https://kekenta-it-blog.com/?p=9160</guid>

					<description><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/07/eye-catch__html-include-parts__9160-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>Web制作をしていると ヘッダーやフッターなどの共通部分をパーツ化したい という場面が時折でてきます。 今回はその方法についてご紹介していきます。 当記事は以下の記事を参考に執筆させていただきました。参考：https:/ [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/07/eye-catch__html-include-parts__9160-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>
<p>Web制作をしていると</p>



<p><strong><span class="swl-marker mark_yellow">ヘッダーやフッターなどの共通部分をパーツ化したい</span></strong></p>



<p>という場面が時折でてきます。</p>



<p>今回はその方法についてご紹介していきます。</p>



<div class="swell-block-capbox cap_box is-style-shadow"><div class="cap_box_ttl"><span><span data-icon="LsLightbulb" data-id="0" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzIgNDYuNUgxNmMtMS4xIDAtMi0uOS0yLTJzLjktMiAyLTJoMTZjMS4xIDAgMiAuOSAyIDJzLS45IDItMiAyek00MS43IDE1LjlDNDEuMyAxMyA0MCAxMC4zIDM4LjIgOCAzNC41IDMuMiAyOSAuOCAyMy4xIDEgMTQgMS40IDYuNSA4LjkgNiAxOGMtLjMgNiAyLjQgMTEuNyA3LjIgMTUuNC41LjQuOC45LjggMS41djEuNmMwIDIuMiAxLjggNCA0IDRoMTJjMi4yIDAgNC0xLjggNC00VjM1YzAtLjYuMy0xLjIuOS0xLjcgNS4zLTQgOC0xMC42IDYuOC0xNy40em0tNy4xIDEuN2gtLjNjLS43IDAtMS4zLS41LTEuNS0xLjItLjctMy4yLTMuMi01LjctNi40LTYuMy0uOC0uMS0xLjQtLjktMS4yLTEuN3MuOS0xLjQgMS43LTEuMmM0LjQuOCA4IDQuMiA4LjkgOC42LjEuOC0uNCAxLjYtMS4yIDEuOHoiPjwvcGF0aD48L3N2Zz4=)" aria-hidden="true" class="swl-inline-icon"> </span><strong> この記事で分かること</strong></span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-check_list -list-under-dashed">
<li>HTMLファイル（.html）のままPHPを使用できるようにする方法</li>



<li>PHPのinclude関数でヘッダーやフッターなどの共通部分をパーツ化する方法</li>



<li>パーツの呼び出し元のファイルの階層が異なるときでもパスの「ズレ」を無くして読み込む方法</li>
</ul>
</div></div>



<p class="is-style-icon_pen">当記事は<strong>以下の記事</strong>を参考に執筆させていただきました。<br>参考：<a href="https://yusk.org/memo/php-memo/php_include_001.html">https://yusk.org/memo/php-memo/php_include_001.html</a></p>


<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/web-requ-jsanim/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">Web制作で副業するなら絶対使いこなしたいJavaScriptアニメーション</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/web-production-tab/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【コピペOK】タブ切り替えを紹介｜横並び・縦並び・タブ折返し【HTML】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/php-basic-syntax/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【PHP超入門】PHPの基本構文をまるっと解説！【サンプルコードあり】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/03/eye-catch__school-php-and-wp__14099-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/school-php-and-wp/">PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】</a>
						<span class="p-blogCard__excerpt">僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション&#8230;</span>					</div>
				</div>
			</div>
		</div>


<h2 class="wp-block-heading">HTMLファイルでもPHPを使用できるようにする方法</h2>



<p class="is-style-bg_stripe">今回ご紹介する「共通部分のパーツ化」を行うにあたり、<strong>PHPのinclude関数</strong>を使用します。</p>



<p>そのため、<strong>前提条件</strong>として</p>



<p class="has-text-align-center is-style-big_kakko_box"><strong>パーツを読み込みたいファイル内でPHPが使用できることが必須</strong></p>



<p>です。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>具体的には<strong><span class="swl-marker mark_yellow">下記２つのいずれかの方法</span></strong>によって、そのファイル内でPHPが使用できるようになります。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><span>ファイル内でPHPを使用できるようにする方法</span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li>拡張子を「.php」にする</li>



<li>.htaccessファイルにコードを記述して「.html」ファイル内でもPHPを使用できるようにする</li>
</ul>
</div></div>



<p>①の方法では、単純に拡張子を「.php」に変更するだけでOKですが</p>



<p><strong>②の方法</strong>については、サーバー内に設置されている<strong>.htaccessファイル</strong>に以下のコードを記述する必要があります。</p>



<p class="has-text-align-center is-style-balloon_box">以下の一文を<strong>.htaccessファイル</strong>に記述することで<br>HTMLファイルでもPHPが使用できるようになる</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-plain"><code>AddType application/x-httpd-php .html</code></pre></div>



<p class="is-style-icon_info">サーバーによって記述内容が異なる場合があります。</p>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">PHPのinclude関数で共通パーツを呼び出す</h2>



<p class="is-style-icon_info">この記事では<strong>拡張子を「.php」にする方法</strong>を採用しています。</p>



<p>それでは以下より、具体的に<strong><span class="swl-marker mark_yellow">PHPのinclude関数を用いて共通パーツを呼び出す方法</span></strong>を解説していきます。</p>



<div class="swell-block-capbox cap_box is-style-onborder_ttl2"><div class="cap_box_ttl"><span>include関数とは</span></div><div class="cap_box_content">
<p>PHPの<strong>include関数</strong>は、<strong>外部ファイルを読み込むための関数</strong>です。<br>今回の例で言うと、外部ファイルとして作成してある「ヘッダー」や「フッター」を任意のファイルに読み込むために使用します。</p>



<p class="is-style-icon_info"><strong>注意点</strong>として、<br>ヘッダーやフッターなどの<strong><span class="swl-marker mark_orange">共通パーツ内で読み込む画像などのパスは、あくまでも「読み込んでいる側の階層」が「基点」となる</span></strong><br>ことが挙げられます。<br>この記事では、そちらを考慮した読み込み方法もご紹介します。</p>
</div></div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>「パーツを呼び出すファイル同士の階層」が「同じ」か「異なる」かによって記述内容が微妙に変わってくるため、それぞれのパターンについてご紹介します。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<h3 class="wp-block-heading">【パターン①】呼び出し元のファイルの階層がすべて同じ場合</h3>



<p class="has-text-align-center is-style-balloon_box">今回想定するファイルの階層</p>


<div class="wp-block-image is-style-browser_mac size_xs">
<figure class="aligncenter size-full"><img decoding="async" width="617" height="445" src="https://kekenta-it-blog.com/wp-content/uploads/2024/07/html-include-parts01.jpg" alt="ファイル構成【パターン①】" class="wp-image-9208" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/07/html-include-parts01.jpg 617w, https://kekenta-it-blog.com/wp-content/uploads/2024/07/html-include-parts01-300x216.jpg 300w" sizes="(max-width: 617px) 100vw, 617px" /><figcaption class="wp-element-caption">ファイル構成【パターン①】</figcaption></figure>
</div>


<p class="is-style-balloon_box2"><strong>各ファイル内</strong>で共通パーツを読み込む</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;!-- 各ファイル内（今回の例では、index.phpとcompany.php）でヘッダーを読み込む --&gt;
&lt;?php include &#39;./assets/template/header.php&#39;; ?&gt;</code></pre></div>



<p class="is-style-balloon_box2"><strong>共通パーツ内</strong>で各種ファイルを読み込む</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-html" data-lang="HTML"><code>&lt;!-- パーツファイル内で画像ファイルを読み込む --&gt;
&lt;img src=&quot;./assets/img/logo.png&quot;&gt;</code></pre></div>



<p class="is-style-big_icon_check">【パターン①】のように<strong>呼び出し元のファイルがすべて同じ階層に設置されている場合</strong>、<br><br>「<strong>呼び出し元のファイルを起点とした相対パス</strong>」を記述することで「共通パーツ」も「各種ファイル」も問題なく呼び出すことが可能です。</p>



<h3 class="wp-block-heading">【パターン②】呼び出し元のファイルの階層が異なる場合</h3>



<p class="is-style-bg_stripe"><strong>呼び出し元のファイル階層がそれぞれ異なる場合</strong>はひと工夫必要になります。</p>



<p class="has-text-align-center is-style-balloon_box">今回想定するファイルの階層<br>※呼び出し元のファイルが２・３階層目に存在する点がポイント</p>


<div class="wp-block-image is-style-browser_mac size_xs">
<figure class="aligncenter size-full"><img decoding="async" width="622" height="589" src="https://kekenta-it-blog.com/wp-content/uploads/2024/07/html-include-parts02.jpg" alt="ファイル構成【パターン②】" class="wp-image-9209" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/07/html-include-parts02.jpg 622w, https://kekenta-it-blog.com/wp-content/uploads/2024/07/html-include-parts02-300x284.jpg 300w" sizes="(max-width: 622px) 100vw, 622px" /><figcaption class="wp-element-caption">ファイル構成【パターン②】</figcaption></figure>
</div>


<p class="is-style-balloon_box2"><strong>各ファイル内</strong>で共通パーツを読み込む</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;!-- 一層目にあるファイル内（今回の例ではindex.php）でヘッダーを読み込む --&gt;
&lt;?php 
  $Path = &quot;./&quot;;    // 相対パスの基点
  include &#39;./assets/template/header.php&#39;; 
?&gt;</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;!-- 二層目にあるファイル内（今回の例では、例えばcompany/company.php）でヘッダーを読み込む --&gt;
&lt;?php 
  $Path = &quot;../&quot;;   // 相対パスの基点
  include &#39;../assets/template/header.php&#39;; 
?&gt;</code></pre></div>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;!-- 三層目にあるファイル内（今回の例では、例えばcompany/detail/01.php）でヘッダーを読み込む --&gt;
&lt;?php 
  $Path = &quot;../../&quot;;   // 相対パスの基点
  include &#39;../../assets/template/header.php&#39;; 
?&gt;</code></pre></div>



<p class="is-style-balloon_box2"><strong>共通パーツ内</strong>で各種ファイルを読み込む</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-php" data-lang="PHP"><code>&lt;!-- パーツファイル内で画像ファイルを読み込む --&gt;
&lt;img src=&quot;&lt;?php echo $Path . &quot;assets/img/&quot; ?&gt;logo.svg&quot;</code></pre></div>



<p class="is-style-big_icon_point">include関数で共通パーツを読み込む前に「$Path」という変数（一時的な入れ物のようなもの）に「<strong>自分自身から見たときの『相対パスの基点』</strong>」を格納しています。<br>共通ファイル内でパスを指定するときは、<strong>この「相対パスの基点」を元に相対パスを記述している</strong>という状態になっています。</p>



<p>ここで最も重要なのが「共通パーツから見たときの『相対パスの基点』を正確に設定できているかどうか」です。</p>



<p>これを間違えてしまうと、各種ファイルの読み込みが上手くいかなくなってしまいます。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>ご自身の各ファイルの階層に合わせて「相対パスの基点」を設定してみて下さい。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">共通部分をパーツ化することでメンテナンス性が向上する</h2>



<p>いかがだったでしょうか。</p>



<p>WordPressなどのCMSを使用しているときは特別な工夫をしなくてもヘッダーやフッターを簡単にパーツ化できます。</p>



<p>しかし、静的サイトで共通パーツを読み込む際には、「読み込み元のファイルの階層」を正しく理解して対応することが必要になってきます。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>最初は慣れないかもしれませんが、ご自身であれこれ試すことで理解が進むかと思います。</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>共通部分をパーツ化するメリットとして「メンテナンス性の向上」が挙げられます。</p>



<p>メンテナンス性が向上すればその後の修正作業も効率化されて工数も削減できます。</p>



<p>この記事がその一助となったなら何よりです。</p>


<div class="p-blogParts post_content" data-partsID="10246">
<h2 class="wp-block-heading">もっと効率的にWeb制作を学びたい方へ</h2>



<p>Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。</p>



<p>僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。</p>



<p>特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。</p>



<ul class="wp-block-list is-style-check_list">
<li>学習の方向性に迷いがある方</li>



<li>効率的にスキルを身につけたい方</li>



<li>転職や副業でWeb制作を活用したい方</li>



<li>挫折経験がある方</li>
</ul>



<p>忍者CODEなら、<strong>業界最安値</strong>で24時間サポート付きの学習環境が整っています。</p>



<p class="is-style-icon_announce">ご興味のある方は、<a href="https://kekenta-it-blog.com/ninja-code-web-production-school-guide/" data-type="post" data-id="15595">こちら</a>の記事で詳しくご紹介しています。</p>


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/07/eye-catch__ninja-code-web-production-school-guide__15595-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/ninja-code-web-production-school-guide/">忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】</a>
						<span class="p-blogCard__excerpt">Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...</span>					</div>
				</div>
			</div>
		</div></div>
]]></content:encoded>
					
					<wfw:commentRss>https://kekenta-it-blog.com/html-include-parts/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【WordPress】特定のページで「ヘッダー」や「フッター」を非表示にする方法</title>
		<link>https://kekenta-it-blog.com/wp-header-footer-none/</link>
					<comments>https://kekenta-it-blog.com/wp-header-footer-none/#respond</comments>
		
		<dc:creator><![CDATA[ケケンタ]]></dc:creator>
		<pubDate>Sat, 29 Jun 2024 05:50:33 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[フッター]]></category>
		<category><![CDATA[ヘッダー]]></category>
		<category><![CDATA[特定のページ]]></category>
		<category><![CDATA[非表示]]></category>
		<guid isPermaLink="false">https://kekenta-it-blog.com/?p=8850</guid>

					<description><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-header-footer-none__8850-1024x576.jpg" class="webfeedsFeaturedVisual" /></p>このようなお悩みをお持ちの方に向けて WordPressの特定のページで「ヘッダー」や「フッター」を非表示にする方法 を解説します。 WordPressで特定のページの「ヘッダー」、「フッター」を非表示にする 具体的な作 [&#8230;]]]></description>
										<content:encoded><![CDATA[<p><img src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/eye-catch__wp-header-footer-none__8850-1024x576.jpg" class="webfeedsFeaturedVisual" /></p><div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/困った顔-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>WordPressで一部のページの「ヘッダー」や「フッター」を非表示にしたいんだけどやり方がわからない……</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>このようなお悩みをお持ちの方に向けて</p>



<p class="has-text-align-center is-style-big_kakko_box"><strong><span class="swl-marker mark_yellow">WordPressの特定のページで<br>「ヘッダー」や「フッター」を非表示にする方法</span></strong></p>



<p>を解説します。</p>


<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-how-to-load-js/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】JavaScriptはどこに書けばいい？「３つの方法」を解説</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-read-css-per-page/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】特定ページにCSSを読み込む「５つ」の方法【早見リスト付】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/wp-edit-functions/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点</span>
			</a>
		</div>

<div class="swell-block-postLink">			<a href="https://kekenta-it-blog.com/change-to-swell/" class="c-blogLink -internal" data-style="text">
				<!-- <i class="c-blogLink__icon icon-link" role="presentation"></i> -->
				<span class="c-blogLink__icon">
					<svg xmlns="http://www.w3.org/2000/svg" class="swl-svg-link __svg" width="1em" height="1em" viewBox="0 0 48 48" role="img" aria-hidden="true" focusable="false"><path d="M21.2 30.2c-.5 0-1-.2-1.4-.6l-.7-.7c-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l7.1-7.1c2.3-2.3 5.3-3.5 8.5-3.5s6.2 1.2 8.5 3.5c4.7 4.7 4.7 12.3 0 17l-3.5 3.5c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8l3.5-3.5c3.1-3.1 3.1-8.2 0-11.3-1.5-1.5-3.5-2.3-5.7-2.3-2.1 0-4.2.8-5.7 2.3l-7.1 7.1c-1.5 1.5-2.3 3.5-2.3 5.7s.8 4.2 2.3 5.7l.7.7c.8.8.8 2 0 2.8-.4.3-.9.5-1.4.5z" /><path d="M13.4 46.6c-3.1 0-6.1-1.2-8.5-3.5-2.3-2.3-3.5-5.3-3.5-8.5s1.2-6.2 3.5-8.5l3.5-3.5c.8-.8 2-.8 2.8 0 .8.8.8 2 0 2.8l-3.5 3.5c-1.5 1.5-2.3 3.5-2.3 5.7 0 2.1.8 4.2 2.3 5.7 3.1 3.1 8.2 3.1 11.3 0l7.1-7.1c1.5-1.5 2.3-3.5 2.3-5.7 0-2.1-.8-4.2-2.3-5.7l-.7-.7c-.8-.8-.8-2 0-2.8.8-.8 2-.8 2.8 0l.7.7c2.3 2.3 3.5 5.3 3.5 8.5s-1.2 6.2-3.5 8.5l-7.1 7.1c-2.3 2.3-5.3 3.5-8.4 3.5z" /></svg>				</span>
				<span class="c-blogLink__text">無料テーマCocoonからSWELLに乗り換えた７つの理由【WordPress】</span>
			</a>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2025/03/eye-catch__school-php-and-wp__14099-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/school-php-and-wp/">PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】</a>
						<span class="p-blogCard__excerpt">僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション&#8230;</span>					</div>
				</div>
			</div>
		</div>


<h2 class="wp-block-heading">WordPressで特定のページの「ヘッダー」、「フッター」を非表示にする</h2>


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<p class="is-style-bg_stripe">具体的な<strong>作業の流れ</strong>は以下の通りです。</p>



<div class="swell-block-capbox cap_box"><div class="cap_box_ttl"><span><span data-icon="LsLightbulb" data-id="0" style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBkPSJNMzIgNDYuNUgxNmMtMS4xIDAtMi0uOS0yLTJzLjktMiAyLTJoMTZjMS4xIDAgMiAuOSAyIDJzLS45IDItMiAyek00MS43IDE1LjlDNDEuMyAxMyA0MCAxMC4zIDM4LjIgOCAzNC41IDMuMiAyOSAuOCAyMy4xIDEgMTQgMS40IDYuNSA4LjkgNiAxOGMtLjMgNiAyLjQgMTEuNyA3LjIgMTUuNC41LjQuOC45LjggMS41djEuNmMwIDIuMiAxLjggNCA0IDRoMTJjMi4yIDAgNC0xLjggNC00VjM1YzAtLjYuMy0xLjIuOS0xLjcgNS4zLTQgOC0xMC42IDYuOC0xNy40em0tNy4xIDEuN2gtLjNjLS43IDAtMS4zLS41LTEuNS0xLjItLjctMy4yLTMuMi01LjctNi40LTYuMy0uOC0uMS0xLjQtLjktMS4yLTEuN3MuOS0xLjQgMS43LTEuMmM0LjQuOCA4IDQuMiA4LjkgOC42LjEuOC0uNCAxLjYtMS4yIDEuOHoiPjwvcGF0aD48L3N2Zz4=)" aria-hidden="true" class="swl-inline-icon"> </span><strong>作業の流れ</strong></span></div><div class="cap_box_content">
<ul class="wp-block-list is-style-num_circle -list-under-dashed">
<li>ヘッダーやフッターを非表示にしたいページの「ページID」を確認する</li>



<li>「追加CSS」にヘッダーやフッターを非表示にするためのプロパティを記述する</li>
</ul>
</div></div>



<p class="has-text-align-center"><span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGQ9Ik0yMDEuNCAzNzQuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMGwxNjAtMTYwYzEyLjUtMTIuNSAxMi41LTMyLjggMC00NS4zcy0zMi44LTEyLjUtNDUuMyAwTDIyNCAzMDYuNyA4Ni42IDE2OS40Yy0xMi41LTEyLjUtMzIuOC0xMi41LTQ1LjMgMHMtMTIuNSAzMi44IDAgNDUuM2wxNjAgMTYweiI+PC9wYXRoPjwvc3ZnPg==)" data-icon="FasAngleDown" data-id="1" aria-hidden="true" class="swl-inline-icon"> </span></p>



<h3 class="wp-block-heading">STEP１　ヘッダーやフッターを非表示にしたいページの「ページID」を確認する</h3>



<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">管理画面で「ヘッダー」、「フッター」を非表示にしたいページの「編集画面」を開く</div><div class="swell-block-step__body"><div class="wp-block-image is-style-shadow">
<figure class="aligncenter size-full"><img decoding="async" width="665" height="322" src="https://kekenta-it-blog.com/wp-content/uploads/2024/06/wp-header-footer-none01.jpg" alt="「ヘッダー」や「フッター」を非表示にしたいページの編集画面を開く" class="wp-image-8879" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/06/wp-header-footer-none01.jpg 665w, https://kekenta-it-blog.com/wp-content/uploads/2024/06/wp-header-footer-none01-300x145.jpg 300w" sizes="(max-width: 665px) 100vw, 665px" /><figcaption class="wp-element-caption">「ヘッダー」や「フッター」を非表示にしたいページの編集画面を開く</figcaption></figure>
</div></div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">URLに記載されている「ページID」を確認する</div><div class="swell-block-step__body"><div class="wp-block-image is-style-shadow">
<figure class="aligncenter size-full"><img decoding="async" width="665" height="99" src="https://kekenta-it-blog.com/wp-content/uploads/2024/05/wp-bg-up03.jpg" alt="ページIDを確認" class="wp-image-6697" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/05/wp-bg-up03.jpg 665w, https://kekenta-it-blog.com/wp-content/uploads/2024/05/wp-bg-up03-300x45.jpg 300w" sizes="(max-width: 665px) 100vw, 665px" /><figcaption class="wp-element-caption">ページIDを確認</figcaption></figure>
</div></div></div>
</div>



<p class="has-text-align-center"><span style="--the-icon-svg: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGQ9Ik0yMDEuNCAzNzQuNmMxMi41IDEyLjUgMzIuOCAxMi41IDQ1LjMgMGwxNjAtMTYwYzEyLjUtMTIuNSAxMi41LTMyLjggMC00NS4zcy0zMi44LTEyLjUtNDUuMyAwTDIyNCAzMDYuNyA4Ni42IDE2OS40Yy0xMi41LTEyLjUtMzIuOC0xMi41LTQ1LjMgMHMtMTIuNSAzMi44IDAgNDUuM2wxNjAgMTYweiI+PC9wYXRoPjwvc3ZnPg==)" data-icon="FasAngleDown" data-id="1" aria-hidden="true" class="swl-inline-icon"> </span></p>



<h3 class="wp-block-heading">STEP２　「追加CSS」にヘッダーやフッターを非表示にするためのプロパティを記述する</h3>



<div class="swell-block-step" data-num-style="circle">
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l"><strong>「追加CSS」を開く</strong></div><div class="swell-block-step__body">
<p class="has-text-align-center is-style-bg_stripe">「外観」→「カスタマイズ」→「追加CSS」を開く</p>



<figure class="wp-block-image size-full is-style-shadow"><img decoding="async" width="745" height="458" src="https://kekenta-it-blog.com/wp-content/uploads/2024/05/wp-bg-up04.jpg" alt="追加CSSを開く手順" class="wp-image-6698" srcset="https://kekenta-it-blog.com/wp-content/uploads/2024/05/wp-bg-up04.jpg 745w, https://kekenta-it-blog.com/wp-content/uploads/2024/05/wp-bg-up04-300x184.jpg 300w" sizes="(max-width: 745px) 100vw, 745px" /><figcaption class="wp-element-caption">追加CSSを開く手順</figcaption></figure>
</div></div>



<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">CSSを記述して保存する</div><div class="swell-block-step__body">
<p class="is-style-bg_stripe">STEP1で「追加CSS」を開いたら、下記のCSSを追記します。</p>



<p class="is-style-icon_info"><strong>対象のページが「固定ページ」なのか「投稿ページ」なのか</strong>によって記述内容（class名）が若干変わるため気を付けましょう。</p>



<p class="is-style-balloon_box2"><strong>固定ページ</strong>の場合</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-lang="CSS"><code>.page-id-ページID header {
  display: none;
}

/*例*/
.page-id-9 header {
  display: none;
}
</code></pre></div>



<p class="is-style-balloon_box2"><strong>投稿ページ</strong>の場合</p>



<div class="hcb_wrap"><pre class="prism line-numbers lang-css" data-lang="CSS"><code>.post-id-ページID header {
  display: none;
}

/*例*/
.post-id-5 header {
  display: none;
}</code></pre></div>



<p class="is-style-icon_info">CSSを追記したあとは忘れずにページ上部にある<strong>「公開」ボタン</strong>を押しましょう。</p>
</div></div>
</div>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>以上の手順により<strong><span class="swl-marker mark_yellow">WordPressで特定ページの「ヘッダー」や「フッター」を非表示にすることが可能</span></strong>です！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4374558503914683"
     crossorigin="anonymous"></script>
<!-- ディスプレイ【横長】 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-4374558503914683"
     data-ad-slot="9744298852"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>



<h2 class="wp-block-heading">ページIDが分かれば特定ページのカスタマイズが簡単</h2>



<p>いかがだったでしょうか。</p>



<p>今回のように<strong>そのページのID</strong>が分かれば、そのページに対してだけCSSを設定することが可能です。</p>



<p>今回は「ヘッダー」、「フッター」を非表示にするというピンポイントな内容でしたが、CSSの知識があれば他にも色々なカスタマイズも可能ですので、ぜひ挑戦してみて下さい。</p>


<div class="swell-block-balloon"><div class="c-balloon -bln-left" data-col="gray"><div class="c-balloon__icon -circle"><img decoding="async" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="lazyload c-balloon__iconImg" width="80px" height="80px"><noscript><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2023/07/キリッ-150x150.jpg" alt="" class="c-balloon__iconImg" width="80px" height="80px"></noscript><span class="c-balloon__iconName">ケケンタ</span></div><div class="c-balloon__body -speaking -border-on"><div class="c-balloon__text">
<p>それでは、最後までご覧いただきありがとうございました！</p>
<span class="c-balloon__shapes"><span class="c-balloon__before"></span><span class="c-balloon__after"></span></span></div></div></div></div>


<p>当ブログではWordPressやWeb制作、PHPの情報を発信しています。<br>ご興味のある方は他の記事もご覧いただけると嬉しいです。</p>


<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/04/eye-catch__wp-title-tag-cus__5747-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/wp-title-tag-cus/">【WordPress】ページごとのtitleタグの内容を変更する方法</a>
						<span class="p-blogCard__excerpt">WordPressでWebサイト制作をしていると ページごとにtitleタグのテキストを変えなきゃいけない…！ という状況に出くわすことがよくあります。 方法はいくつかありますが&#8230;</span>					</div>
				</div>
			</div>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/05/eye-catch__wp-bg-up__6665-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/wp-bg-up/">【WordPress】特定のページのみ背景色を変える方法</a>
						<span class="p-blogCard__excerpt">WordPressで特定のページだけ背景色を変えたいんだけどやり方がわからない…… 今回はこのようなお悩みについて解説をしていきます。  この記事で分かること WordPressの&#8230;</span>					</div>
				</div>
			</div>
		</div>

<div class="swell-block-postLink">			<div class="p-blogCard -internal" data-type="type2" data-onclick="clickLink">
				<div class="p-blogCard__inner">
					<span class="p-blogCard__caption">あわせて読みたい</span>
					<div class="p-blogCard__thumb c-postThumb"><figure class="c-postThumb__figure"><img decoding="async" src="https://kekenta-it-blog.com/wp-content/uploads/2024/10/eye-catch__wp-edit-functions__11133-300x169.jpg" alt="" class="c-postThumb__img u-obf-cover" width="320" height="180"></figure></div>					<div class="p-blogCard__body">
						<a class="p-blogCard__title" href="https://kekenta-it-blog.com/wp-edit-functions/">【WordPress】functions.phpを編集する「３つ」の方法と編集時の注意点</a>
						<span class="p-blogCard__excerpt">WordPressで機能カスタマイズをする際は、必ずと言っていいほどfunctions.phpを編集することになります。 しかし、functions.phpを編集したことで何らかのエラーが発生&#8230;</span>					</div>
				</div>
			</div>
		</div>]]></content:encoded>
					
					<wfw:commentRss>https://kekenta-it-blog.com/wp-header-footer-none/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
