「デフォルトのまま放置しているけど、なんだか味気ない……」
「カスタマイズしてみたいけど、どこから手をつければいいかわからない!」
「プラグインを入れたら逆に壊れてしまった……どうすればいい?」
「“Proudly Powered by WordPress” を消しても大丈夫?」
こんな風に悩んでいる方も多いのではないでしょうか?
- “フッターにSNSアイコンを置きたいけど、埋め込みコードがうまく動かない……”
- “背景をアクセントにしたいけどCSSを書いたことがなくて不安……”
- “自己ホスティング版とWordPress.com版で手順が違うって本当?”
本記事では、初めての方でも迷わないよう、基本知識から応用テクニック、非表示・削除の方法まで、フッターにまつわるあらゆる疑問を一挙解決!🎉
フッターの基本と役割
フッターとは何か
Webサイトにおけるフッターは、ページの最下部に配置される領域を指します。
- グローバルエリア:全ページ共通で表示されることが多く、サイトの一貫性を保ちます。
- 情報集約ゾーン:著作権情報、連絡先、プライバシーポリシーへのリンクなど、ユーザーが求める基本情報をまとめて配置します。
📝 ポイント
- フッターは“最後の案内板”ともいえる重要な場所です。
- 訪問者が迷ったときや追加情報が必要なときに、自然と目を向けるエリアになります。
フッターがサイトに与える効果
フッターを適切に設計することで、サイト全体のユーザビリティや信頼性が向上します。
| 効果カテゴリー | 具体例 | メリット |
|---|---|---|
| ナビゲーション補助 | サイトマップ、主要メニューへのリンク | 迷子防止・回遊率アップ |
| 信頼性向上 | 会社概要、連絡先、認証マーク(SSL/プライバシーポリシー) | 安全・安心感の提供 |
| SEO対策 | 内部リンク強化、重要ページのリンク | 検索エンジンのクローリング促進🔍 |
| ブランディング | ロゴ、タグライン、SNSアイコン | ブランド認知の強化、リピーター獲得😊 |
🔧 効果的なポイント
- リンクの整理:重要なページへのリンクを集約し、わかりやすく並べる。
- 視覚的メリハリ:配色や余白で本文と区切り、見やすさを確保。
- モバイル対応:スマホ表示でもタップしやすいボタンサイズや行間を意識。
以上のように、フッターは“サイトの最後尾”だからこそ、ユーザーの行動をサポートし、信頼感を醸成する役割を担います。
編集前の準備
自己ホスティング版とWordPress.com版の違い
自己ホスティング型(WordPress.org)とWordPress.com版では、フッター編集の自由度や手順が大きく異なります。
| 項目 | 自己ホスティング版 | WordPress.com版 |
|---|---|---|
| カスタマイズ範囲 | テーマファイルから自由に編集可能 | 有料プランで一部のみ編集可 |
| プラグイン利用 | ほぼすべてのプラグインを導入可能 | 制限あり(ビジネスプラン以上で一部利用可) |
| テーマの直接編集 | FTP/管理画面のテーマエディターで対応 | 制限されたテーマのみ |
| コード挿入(PHP/HTML) | footer.php などを直接書き換え可能 | カスタムHTMLウィジェットで限定的に可能 |
🔑 ポイント
- 自己ホスティング版なら、コード・プラグイン・CSS いずれも無制限に活用できます。
- WordPress.com版は無料プランではフッター編集機能がほぼ使えないため、細かな調整には有料プランへのアップグレードが必要です。
注意すべきライセンス表示(“Powered by…”)
多くのテーマではフッターに「Proudly Powered by WordPress」などの文言がデフォルトで表示されます。
この表示を扱う際の注意点は以下のとおりです。
- 利用規約の確認
テーマやライセンスによっては、表示を削除することが禁止されている場合があります。必ずテーマ作者のライセンス条項をチェックしましょう。 - 削除・変更の方法
- ウィジェット:カスタムHTMLウィジェットで上書き
- テーマ編集:footer.php 内の該当コードをコメントアウト
- プラグイン:専用プラグインで簡単に非表示にできる場合も
- 法的リスクと対策
- GPLテーマなら表示変更は原則自由ですが、テーマ作者への感謝を示すためにコピーライトは残すのもマナーです。
- 有料テーマでは「著作権表示を消すと契約違反」というケースもあるため、契約書やライセンスをしっかり確認しましょう。
✅ お役立ちTIP
- テーマを更新すると表示設定がリセットされることがあるので、子テーマで編集するか、専用プラグインを使って設定を維持しましょう。
- 編集前に必ずバックアップを取り、「万が一元に戻せない…」という事態を避けましょう。
ビジュアルツールを使った編集方法
テーマカスタマイザーでの変更手順
- 管理画面から「外観」→「カスタマイズ」を開く
- 左メニュー内の「フッター設定」または「ウィジェット」を選択
- プレビュー画面でレイアウト・色・背景画像などを直感的に調整
- 変更内容を確認後、右上の「公開」ボタンをクリック
🔧 コツ
- プレビューはリアルタイムで反映されるので、小さな変更でも一度試してみましょう。
- 色や余白は「追加CSS」から微調整できます(子テーマ推奨)。
ウィジェットでコンテンツを追加する
- 管理画面の「外観」→「ウィジェット」を開く
- 「フッターエリア(Footer 1〜3 など)」を選択
- 「利用できるウィジェット」からドラッグ&ドロップで配置
テキスト・画像・スクリプトの差し込み方法
- テキストウィジェット
- タイトル/本文欄にHTML可のリッチテキストを入力
- 簡単なリンクや絵文字🎉を使って見やすく装飾
- 画像ウィジェット
- メディアライブラリから画像を選択し、キャプションやリンクを設定
- レスポンシブ対応のため「代替テキスト」を必ず入力
- カスタムHTMLウィジェット
- JavaScriptスニペットや埋め込みコード(地図・フォームなど)を直接貼り付け
- セキュリティ上、信頼できるコードのみ使用しましょう
ブロックエディター/ページビルダーでのフッター調整
- テーマがFull Site Editing(FSE)対応の場合:「外観」→「サイト編集」→「フッター」を選択
- Gutenberg ブロックでカラムやグループブロックを使い、自由にレイアウト
- 非FSEテーマでは、Elementor や Beaver Builder などのプラグインでフッターテンプレートを編集
| プラグイン名 | 特徴 | おすすめポイント |
|---|---|---|
| Elementor | ビジュアルドラッグ&ドロップ、豊富なウィジェット | 無料版でも基本機能が充実 |
| Beaver Builder | 軽量かつ安定性重視、繰り返し使えるセクション保存機能 | 企業サイトにもよく採用される |
| Divi Builder | デザインプリセット多数、A/Bテスト機能内蔵 | デザイン性を重視する場合に最適 |
主要なページビルダープラグインを活用するコツ
- テンプレート保存:一度作ったフッターをグローバルテンプレートとして保存すると、他ページにも反映可能
- レスポンシブ設定:スマホ/タブレット表示をプレビューしながら、各デバイス専用の余白やフォントサイズを調整
- プリセット利用:配色やフォント組み合わせは「デザインキット」や「プリセットセット」を活用し、統一感を確保
プラグインによる強化テクニック
定番プラグインの導入手順
WordPressのプラグインを使うと、コード編集やウィジェット以上の柔軟なカスタマイズが可能です。
以下の流れで導入しましょう。
- プラグイン検索
- ダッシュボードの「プラグイン」→「新規追加」をクリック
- 検索ボックスにプラグイン名を入力
- インストールと有効化
- 該当プラグインの「今すぐインストール」を押し、完了後「有効化」
- 有効化後、管理メニューに新しい設定項目が追加される場合があります
- 初期設定
- 「設定」や「Tools」などに追加されたサブメニューから、APIキーや挿入位置の指定を行う
- デザインや表示条件を必要に応じて調整(管理画面のプレビュー機能で確認しましょう)
❗ おすすめプラグイン例
| プラグイン名 | 主な機能 | 無料/有料 |
|---|---|---|
| Insert Headers and Footers | HTML/JavaScript/CSSを簡単に挿入 | 無料 |
| Header Footer Code Manager | 複数のスニペットを管理し、ページ毎に制御可能 | 無料(Pro版あり) |
| WPCode (旧:Insert Headers and Footers Pro) | 豊富なスニペットライブラリ+条件分岐 | 無料/有料 |
フッター用コード管理ツールの使い方
フッターに限らず、サイト全体のコード挿入を一元管理できるため、後からの編集やトラブル対応が楽になります。
- スニペットの作成
- 「Code Snippets」または「HFCM」メニューを開き、「Add New Snippet」を選択
- スニペット名、タイプ(HTML/CSS/JavaScript/PHP)を選ぶ
- フッターに挿入したいコードを入力
- 表示位置の設定
- 「Location」や「Placement」オプションで Footer を選択
- ページ単位・ユーザー役割単位で表示制御が可能な場合は、必要に応じて絞り込む
- 動作確認と管理
- 保存後、サイトのフッターをリロードしてコード反映をチェック
- スニペット一覧から 有効/無効 スイッチで瞬時にON/OFFを切り替え
- バージョン管理やコメント機能を活用して、いつ・誰が何を編集したかを把握
💡 活用ポイント
- セキュリティ:JavaScriptや外部スクリプトは信頼できるソースのみ使用。
- 環境分岐:開発環境と本番環境でスニペットを切り替える機能があると安心です。
- バックアップ:大規模変更前にはエクスポート機能でスニペットをバックアップしましょう。
コード編集でカスタム実装する手順
footer.phpの直接編集ポイント
- 子テーマを用意
親テーマを直接編集するとアップデートで上書きされるため、まず子テーマを作成し、親テーマのfooter.phpをコピーしましょう。 - 不要な要素の削除・差し替え
- 「Proudly Powered by…」の削除や、不要なリンクをコメントアウトまたは削除します。
- 新たに表示したいHTML(コピーライト表記やメニュー)を挿入。
- HTML構造の最適化
<!-- 子テーマの footer.php 例 -->
<footer id="colophon" class="site-footer">
<div class="footer-widgets">
<?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
<?php dynamic_sidebar( 'footer-1' ); ?>
<?php endif; ?>
</div>
<div class="site-info">
<!-- カスタムコピーライト -->
© <?php echo date('Y'); ?> あなたのサイト名. All Rights Reserved.
</div>
</footer>
- スタイル調整
表示が崩れないよう、子テーマのstyle.cssで余白やフォントサイズを調整します。
🛠️ 注意点
- 必ずバックアップを取ってから編集しましょう。
- HTMLのタグ構造を壊さないよう、開閉タグに注意。
functions.phpへのフック追加例
- 子テーマの functions.php を開く
すでに存在しない場合は、空のfunctions.phpを作成します。 - 独自コードをフッターに挿入
wp_footerフックを使って、HTMLやスクリプトを自動出力できます。
// 子テーマの functions.php 例
function add_custom_footer_content() {
?>
<div class="custom-footer-notice">
<p>🌟 当サイトは〇〇技術を活用しています。</p>
</div>
<?php
}
add_action( 'wp_footer', 'add_custom_footer_content', 20 );
- 条件分岐や優先度の設定
is_front_page()などの条件タグでトップページのみ表示にもできます。- 第3引数(
20)で実行順序を調整し、他プラグインとの衝突を避けましょう。
- セキュリティ&パフォーマンス
- 出力するHTMLやスクリプトは最小限に抑えるのが◎。
- 外部JSを読み込む場合は、
wp_enqueue_scriptを使って管理するとキャッシュ効率が上がります。
以上の手順で、コードベースから柔軟かつ安全にフッターをカスタマイズできます。
プロジェクトの要件に合わせて、子テーマとフックを組み合わせて使い分けましょう!🚀
プラットフォーム別応用編
WordPress.comでのフッター編集手順
WordPress.comではプランによって編集できる範囲が変わります。
以下は代表的な手順です。
- 管理画面の「デザイン」→「カスタマイズ」を開く
- 左側メニューから「ウィジェット」を選択し、「フッター領域」をクリック
- 利用可能なウィジェット(カスタムHTMLやテキスト)をドラッグ&ドロップ
- 内容を入力し、「公開」を押して反映を確認
📝 プランごとの注意点
- 無料プラン:ウィジェット数やカスタムHTMLは利用不可。
- パーソナル/プレミアムプラン:テキスト・画像ウィジェットのみ利用可能。
- ビジネスプラン以上:カスタムCSSやプラグインが使え、細かな調整が可能に。
| プラン | ウィジェット編集 | カスタムCSS | プラグイン利用 | カスタムHTML |
|---|---|---|---|---|
| 無料 | × | × | × | × |
| プレミアム | ○(制限あり) | × | × | × |
| ビジネス/eコマース | ○ | ○ | ○ | ○ |
🎯 ポイント
- 無料/低価格プランでは大きな変更は難しいため、表示したい内容は画像化してテキストウィジェットに貼り付ける小技も。
- ビジネスプランにアップグレードすると一気に自由度が高まります。
自己ホスティングでしかできない調整
自己ホスティング版(WordPress.org)では、サーバー直下からテンプレート編集やプラグイン追加が自在に行えます。
- 子テーマでのファイル編集
footer.php/functions.phpを自由にカスタマイズ- アップデートによる上書きを防ぐため、子テーマを必ず利用
- プラグインの無制限導入
- 任意のコード管理プラグインやデザイン強化プラグインをインストール
- フッター表示条件を細かく設定可能
- サーバー側スクリプト追加
- CDNやアクセス解析タグ、チャットウィジェットなどを直接埋め込み
- 高度なCSS・JavaScript制御
style.css、custom.jsを使ってアニメーションやレスポンシブ対応を追求
💡 活用アイデア
- 条件分岐:
is_home()やis_page()を使い、ページごとに異なるフッターを表示 - 多言語サイト対応:PolylangやWPMLと組み合わせ、言語ごとに文言やリンクを切り替え
- パフォーマンス最適化:不要なスクリプトはフッター読み込みに遅延ローディングを設定
🚀 まとめ
自己ホスティング版なら、ほぼ制限なく「理想のフッター」を実装可能です。サイト規模や要件に合わせて、子テーマ編集とプラグイン活用を組み合わせ、より魅力的なサイト下部を構築しましょう!
実例:デザイン&機能の追加ポイント
SNSアイコン・タイムラインの埋め込み
SNSをフッターに表示すると、最新情報への誘導やファン獲得に効果的です。
以下の方法があります。
- ウィジェット/カスタムHTMLで埋め込む
- 各SNSが提供する埋め込みコード(JavaScript/iframe)をコピー&ペースト
- 注意:外部スクリプトはページ速度に影響するので、必要な範囲だけ使用🎯
- プラグインを活用する
| プラグイン名 | 特長 | こんな人におすすめ |
|---|---|---|
| Smash Balloon Social Photo | Instagramの写真ギャラリー表示 | ビジュアル重視のサイト |
| Custom Twitter Feeds | カスタマイズ可能なTwitterタイムライン | シンプルかつ設定が簡単 |
| Social Icons Widget | 複数SNSアイコンを一括管理 | 主要SNSへのリンクだけ載せたい |
- デザイン調整
- アイコンサイズや間隔はCSSで微調整
- ホバー時に色変更やアニメーションを加えると、訪問者の目を引きやすい✨
背景画像・カラーの設定方法
フッター背景をアクセントにすることで、サイト全体の印象をアップできます。
- テーマカスタマイザーを利用
- 「外観」→「カスタマイズ」→「背景」で画像やカラーを選択
- プレビューを見ながら透明度やリピート設定を調整
- CSSで細かく制御
footer.site-footer {
background-image: url('path/to/image.jpg');
background-size: cover;
background-position: center;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
- ポイント整理
| 設定項目 | 説明 |
|---|---|
| background-size | cover:全面表示、contain:全体収まるよう表示 |
| background-repeat | no-repeat:繰り返しなし、repeat-x:横方向のみ繰り返し |
| background-color | 透過色でテキストを読みやすくする(例:rgba(0,0,0,0.5)) |
🎨 ワンポイント:背景画像の上に透過オーバーレイを入れると、テキストがくっきり見えます。
フッターメニューの構築法
フッターメニューを設置すると、ユーザーの回遊性が向上します。
- ナビゲーションメニューを登録
子テーマのfunctions.phpに以下を追加:
function register_footer_menu() {
register_nav_menu( 'footer-menu', 'フッターメニュー' );
}
add_action( 'after_setup_theme', 'register_footer_menu' );
- テンプレートにメニューを表示
footer.php内の表示箇所に以下を挿入:
<?php
wp_nav_menu( array(
'theme_location' => 'footer-menu',
'container' => 'nav',
'container_class'=> 'footer-navigation',
'menu_class' => 'footer-menu-list'
) );
?>
- 外観>メニューで項目を設定
- 「フッターメニュー」を作成し、リンクを追加
- メニュー構造をドラッグ&ドロップで調整
📱 レスポンシブ対応:
.footer-menu-list li {
display: inline-block;
margin-right: 1rem;
}
@media (max-width: 600px) {
.footer-menu-list li {
display: block;
margin-bottom: 0.5rem;
}
}
これらの実例を参考にして、見た目と機能を両立させ、魅力的なフッターを作りましょう!
コピーライト表示のカスタマイズ
「Proudly Powered by…」の削除可否と手順
多くのテーマではフッターに「Proudly Powered by WordPress」などの文言が自動で表示されます。
この表示を削除する際のポイントは以下のとおりです。
- ライセンスの確認
- GPLテーマ:基本的に自由に編集可能。ただし、開発者へのリスペクトとして残すのも◎。
- 有料テーマ:契約によっては表示を消すと規約違反になる場合があるので、利用規約をチェック。
- 子テーマでの編集
<!-- 子テーマの footer.php 内 -->
<?php
// 該当コードをコメントアウトまたは削除
// <a href="https://wordpress.org/">Proudly Powered by WordPress</a>
?>
親テーマを直接編集せず、子テーマを使うことでアップデート時の上書きを防止。
- プラグイン活用
| プラグイン名 | 機能概要 |
|---|---|
| Remove Footer Credit | フッターのコピーライトをボタン一つで削除 |
| Footer Putter | 複数のテーマ対応+削除/置換が簡単 |
- 有効化後、設定画面で「Powered by…」を非表示に設定するだけでOK。
🚨 注意点
- テーマのアップデート後に元に戻ることがあるため、子テーマまたはプラグインで恒久的に管理しましょう。
自作の著作権表記を加える方法
オリジナルのコピーライトを記載して、ブランド感を高めましょう。以下の2つの方法があります。
- footer.php に直接追加
<div class="site-info">
© <?php echo date('Y'); ?> あなたのサイト名. All Rights Reserved.
</div>
<?php echo date('Y'); ?>で毎年自動的に年号が更新されます。
HTMLタグだけでなく、リンクや絵文字も使えます:
<p>© <?php echo date('Y'); ?> <a href="/">MyBrand</a> 🌟 All Rights Reserved.</p>
- functions.php でフックを使って挿入
function add_custom_copyright() {
echo '<div class="custom-copyright">'
. '© ' . date('Y') . ' <a href="/">あなたのサイト名</a>.'
. ' All Rights Reserved.'
. '</div>';
}
add_action( 'wp_footer', 'add_custom_copyright', 15 );
フックを使うと、テーマファイルを触らずに追加できるため、管理が楽。
優先度(`15`)を調整して、他のフッター要素との順序を制御。
✨ ワンポイント
- コピーライト表示を中央寄せにする場合は、以下のCSSを追加:
.site-info, .custom-copyright {
text-align: center;
font-size: 0.9rem;
margin: 1rem 0;
}
- 多言語サイトでは、PolylangやWPMLの条件分岐を使い言語ごとに文言を切り替えると親切です。
これで、基本的な削除からオリジナル著作権表記の追加まで、フッターのコピーライトを自在にカスタマイズできます!
フッターそのものを非表示または削除する方法
テーマ設定での非表示オプション
多くのモダンテーマやFSE対応テーマでは、管理画面の設定だけでフッターをオフにできます。
- カスタマイザーから無効化
- 「外観」→「カスタマイズ」→「レイアウト」や「フッター」セクションを開く
- 「フッターを表示する」のスイッチをオフにするだけでOK
- テーマ固有のトグル機能
| テーマ名 | 設定メニュー例 | 備考 |
|---|---|---|
| Astra | カスタマイズ → Footer → Footer Bar | Footer Bar のみ非表示可 |
| GeneratePress | カスタマイズ → Layout → Footer | 上部/下部それぞれ切り替え可能 |
| Twenty Twenty-Four | サイト編集 → テンプレートパーツ | 完全FSEテーマはフッター自体を削除可 |
- フッター領域を空にする
- ウィジェット設定で、すべてのフッターウィジェットを「なし」にすると、実質的に空白化できます。
- ページビルダーのグローバルテンプレートで、フッターエリアを削除する方法もあります。
Point: テーマアップデート後も設定が保持されるため、コードを触らずに簡単に管理したい場合に最適です。
コードで完全に除去するテクニック
より徹底的にフッターを消去したい場合は、CSSまたはPHPで直接コントロールします。
- CSSで非表示にする
/* 子テーマの style.css に追加 */
footer, .site-footer, #colophon {
display: none !important;
}
body {
margin-bottom: 0 !important; /* 空白をなくす */
}
メリット:簡単にON/OFF可能
デメリット:HTMLは残るため、SEO的には非推奨の場合あり
- PHPでテンプレートパーツを解除
子テーマのfunctions.phpに以下を追加:
// 親テーマのフッター表示アクションを無効化
function disable_parent_footer() {
remove_action( 'storefront_footer', 'storefront_credit', 20 );
remove_action( 'twentytwenty_footer', 'twentytwenty_footer_content' );
// その他テーマに応じて適宜 remove_action を追加
}
add_action( 'init', 'disable_parent_footer' );
メリット:HTML自体が生成されず、クリーンな状態に
デメリット:テーマによってフック名や優先度が異なるため、調査が必要
- フッター用テンプレートファイルを空にする
子テーマのfooter.phpを用意し、中身を空にする:
<?php
// footer.php を空にすることで、HTMLが一切出力されなくなる
?>
メリット:もっとも強力な方法
デメリット:将来的に必要な要素を戻すのがやや面倒
🚨 注意点
- バックアップ必須:コーディング前に必ずファイルのバックアップを取りましょう。
- 子テーマ活用:親テーマを直接編集するとアップデートで上書きされるので、必ず子テーマを使ってください。
これらの方法を用途に合わせて使い分ければ、フッターを完全に消去したり再表示したりと柔軟にコントロールできます。
まとめ
本ガイドを一通り読めば、以下のポイントがしっかり身につきます。
- フッターの役割と効果を理解し、見落としがちな基本知識を押さえる
- カスタマイザーやウィジェット、ブロックエディターを使った直感的な編集手順
- 定番プラグイン&コード管理ツールで、効率的に機能を拡張する方法
- 子テーマ+フックを活用した安全かつ永続的なコード編集テクニック
- WordPress.com版/自己ホスティング版、それぞれの制限と応用策
- SNSアイコン埋め込みや背景デザインなど、魅せるフッターの実装例
- 「Powered by…」の扱い方から完全削除まで、ライセンス・法的注意点を含めた対処法
あなたのサイトにぴったりのフッターを完成させ、訪問者の回遊率アップやブランドイメージの向上を実現しましょう。
さあ、今日からフッター編集の達人に!🚀

