Fixed Footer Bar – WordPress プラグイン導入マニュアル（v1.2）

最終更新：2025-08-15

1. はじめに
2. v1.2 の変更点
3. インストール手順
4. 基本設定
- 4.1 バナー出力条件幅（px）
- 4.2 バナー領域の高さ（px）
5. リンク設定
6. 画面への出力仕様
7. バナー作成ガイド
8. よくある質問（FAQ）
9. トラブルシューティング
10. アンインストール
11. 更新履歴
- (a) プログラム更新履歴
- (b) マニュアル更新履歴

1. はじめに

Turbo Web 提供の WordPress プラグイン Fixed Footer Bar（twp001） の導入・設定方法を説明します。本書は v1.2 を対象としています。

対象読者：WordPress の基本操作が可能な方
推奨環境：WordPress 6 以上 / PHP 7.4 以上

2. v1.2 の変更点（What’s New）

設定画面を刷新し、バナー1～3 のタブ切替で個別設定が可能に。
メディアライブラリ連携（「メディアから選択」）を追加。
バナー領域の高さ（px）を指定可能。
を「URL / 電話番号」から選択。
各リンクに Clickイベント（任意）を設定可能（計測・カスタム JS）。
画像に loading="lazy" / decoding="async" を適用。
object-fit: cover に統一（比率不一致時は自動トリミング）。

3. インストール手順

購入サイトからプラグイン ZIP（fixed-footer-bar.zip）をダウンロード。
WordPress 管理画面 → プラグイン → プラグインを追加。
プラグインのアップロード → ファイルを選択。
今すぐインストール → 有効化。
左メニュー設定 → Fixed Footer Barを開く。

4. 基本設定（General Setting）

4.1 バナー出力条件幅（px）

入力値以下の画面幅でフッターバーを表示します。例：640 → 幅 640px まで表示、641px 以上は非表示。
0を指定すると常時表示。

@media (min-width: 641px) { #fixed_footer_plugin { display: none; } }
@media (max-width: 640px) {
  #fixed_footer_plugin {
    display: flex; position: fixed; bottom: 0; z-index: 1000;
  }
}

4.2 バナー領域の高さ（px）

フッターバーの高さをピクセル指定（例：70）。画像は object-fit: cover で描画され、比率が合わない場合は自動トリミングされます。

5. リンク設定（バナー1～3

5.1 表示設定

チェックで該当リンクを表示（未チェックで非表示）。

5.2 画像バナー

画像のURLを入力、または「メディアライブラリから選択」で自動入力。
3 枚のバナーは 同じ高さ で用意してください。
対応形式：gif / jpg / png

5.3 リンク先

URL：通常のリンク。例：https://example.com/
電話番号：電話発信リンク。数字のみの電話番号（例：0312345678）

5.4 Clickイベント（任意）

クリック時に実行する JavaScript を onclick 属性値として挿入します。

gtag('event','click', { 'event_category': 'Footer', 'event_label': 'LINK1' });

※ 信頼できるコードのみを設定してください。

6. 画面への出力仕様

フッターバーは #fixed_footer_plugin で出力。
表示中は body の下余白を自動調整（バー高さ + 余白）。
画像に loading="lazy" / decoding="async" を付与。
画像は width:100% / height:auto / object-fit: cover。

横 3 分割を前提に、3 枚とも 同じ高さ 推奨（例：高さ 70px）。
文字サイズはスマホ前提で 14～16px 以上 を推奨。
重要要素は端に寄せすぎない（上下左右 8～12px 以上の余白）。

8. よくある質問（FAQ）

Q1. バナー画像の表示を確認できますか？: PCでブラウザ幅を縮めるか、スマートフォン実機で確認できます。PCのブラウザで検証ツールでも確認できます。
Q2. 画像が切れて表示される: object-fit: cover による自動トリミング。重要部分が切れないデザインにしてください。
Q3. クリック不可の画像にしたい: URL/電話番号を空欄にすると <span> で描画されクリック不可になります。
Q4. 電話リンクが機能しない: PC などでは tel: が動作しない場合があります。スマートフォンで確認してください。
Q5. 計測設定は？: 各リンクの OnClick に GA4 の gtag 等を記述（サイトに計測タグ設置済みが前提）。

9. トラブルシューティング

表示されない：バナー出力条件幅と画面幅の関係、テーマの wp_footer()、キャッシュ類を確認。
画像がぼやける：横幅いっぱいに伸びるため十分な解像度の画像を使用。
保存が反映されない：ブラウザ／WP／サーバーキャッシュをクリア。

10. アンインストール

プラグイン一覧から停止 → 削除。設定（fixedfooter_options）は DB に残る場合があります。完全削除はバックアップの上、該当オプションを手動削除してください。