「WordPressの画面の右下に、ずっと付いてくるボタンを置きたい。でもプラグインはこれ以上増やしたくない」 「プラグインなしのやり方を調べたら『footer.phpに書く』と出てきた。テーマのファイルを触るのが怖い」 「コピペで置けた。でもスマホで見たら、テーマの『トップへ戻る』ボタンと重なっていた」
3つ目まで来た人は、ボタンの作り方ではなく「どこに置いて、何と重なるか」の話を読んでください。この記事はそこから始めます。
先に結論です。フローティングボタン（画面をスクロールしても同じ場所に固定されるボタン）は、プラグインなしで、しかもJavaScriptなしで作れます。筆者のブログでは、スマホの右下に「＋」の丸いボタンが1つあり、押すとメニューが4つ開きます。中身はHTMLとCSSだけです。ただし、作ってから実際に困ったのは作り方ではなく、次の3つでした。
- 置き場所：テーマのファイルに直接書くと、テーマの更新で消える
- 重なり：テーマにもともと付いている「トップへ戻る」ボタンと、縦46px・横35pxぶん重なっていた
- 直し方：あとから数値を直そうとしたら、サーバーの防犯機能に弾かれて403エラーになった
筆者は40代の会社員（非エンジニア）です。プログラムは書けません。この記事では、AIに作ってもらったボタンを1つのブログで運用して分かったことを、プラグインなしで作る手順と、スマホ実機で見つけた重なりの直し方まで、専門用語を噛み砕いて説明します。
※ 本記事は Claude Code（筆者が使用中のAIアシスタント）が筆者の実体験を元に執筆しています。
この記事はこんな方向け
- フローティングボタンをプラグインなしで置きたいが、テーマのファイルを触るのが怖い人
- スマホだけにボタンを出して、パソコンでは出したくない人
- 置いてみたらテーマの「トップへ戻る」ボタンと重なった人
- メニューを開閉させたいが、JavaScriptは書きたくない人
🎬 この記事に登場するキャラ
- 社長 — 筆者本人（40代・副業で複数の事業を運営）
- 凛 — 姉御肌の相棒。甘えを許さない
- 策 — 冷静な軍師。手順に落とす担当
- Claude — AIアシスタント。実測値を出す担当
社長：「右下の『＋』ボタン、プラグインなしで置けたんだよ。パソコンで見たら綺麗だった。」
凛：「で、スマホで見たら『トップへ戻る』の矢印と重なってたんでしょ。」
社長：「バレてる。しかも重なってたのに、3ヶ月気づかなかった。パソコンには出してないから。」
策：「それは作り方の問題ではありません。置く場所と、もともとそこにあるものを確認していなかっただけです。今日はそこを直します。」
Claude：「実測を先に出します。テーマ標準の『トップへ戻る』ボタンと、筆者の『＋』ボタンの重なりは縦46px・横35pxでした。ボタンの直径が60pxなので、面積の4割以上が隠れていた計算です。」
📌 目次（クリックでジャンプ）
1. 【問題提起】プラグインなしのフローティングボタンで迷う本当の理由
1-1. フローティングボタンの正体は「画面に固定した箱」
まず、フローティングボタンが何でできているかを噛み砕きます。ネットで出てくるプラグインなしの作り方は、ほぼ全部が次の2つの組み合わせです。
| 部品 | 役割 | 読者に見えるもの |
|---|---|---|
| HTML（箱の中身） | ボタンの文字・リンク先・アイコン | 丸いボタンとメニュー |
| CSS（見た目のルール） | 「画面の右下に固定」「色」「大きさ」を決める | スクロールしても付いてくる動き |
「付いてくる」動きの正体は、CSSの「画面に固定する（position: fixed）」という1行です。難しいことは何もありません。これに「右から14px・下から20px」と位置を書けば、右下に張り付きます。
つまり、ボタンを置くだけなら本当に簡単です。世の中の記事はここで終わっています。問題は、その先です。
プラグインなしの記事でよく出てくる置き場所が、テーマの footer.php というファイルです。ここに書けば全ページに出ます。ですが筆者はやりませんでした。理由は2つです。
- テーマの更新で消える：テーマ本体のファイルは、更新のたびに上書きされます。書いたものが消えます
- 1文字間違えるとサイト全体が真っ白になる：PHPというプログラムのファイルなので、括弧1つで全ページが表示されなくなることがあります
「子テーマ（テーマの上に重ねる自分用の設定置き場）に書けばいい」という回答もあります。それも正しいのですが、非エンジニアがPHPのファイルを開いて編集する時点でリスクです。筆者はもっと安全な場所に置きました。3-2で説明します。
1-3. 「メニューを開く」にはJavaScriptが要る、と思い込んでいた
もう1つ、筆者が最初につまずいたのが「ボタンを押したらメニューが開く」動きです。これはJavaScript（ページに動きを付けるプログラム）が要ると思っていました。プラグインを入れたくなる一番の理由がここでした。
結論から言うと、要りませんでした。チェックボックスのオン・オフを使うと、CSSだけで「押したら開く・もう一度押したら閉じる」が作れます。2-2で仕組みを書きます。
凛：「あんた、最初『開閉するからプラグイン入れる』って言ってたわよね。」
社長：「だってボタン押して何か動くのは、全部プログラムだと思ってたんだよ……。」
策：「半分正しいです。ただ『開く・閉じる』の2択だけなら、チェックボックスの仕組みで足ります。それをAIに聞いて分かりました。」
2. 【AI導入で変わった】JavaScriptなし・スマホだけに出るメニューボタンにする
2-1. 先に「どこに出すか」を決める：スマホだけ
筆者のブログは、パソコンでは右側のサイドバーが追従して付いてきます。メルマガ登録の枠がそこにあります。なので、パソコンにまでフローティングボタンを出すと、同じ案内が2か所に出て邪魔になります。
そこで決めたのが、「フローティングボタンはスマホだけ・パソコンでは出さない」です。CSSには「画面の幅が768pxまでならボタンを表示、769px以上なら非表示」という幅で切り替える指定があるので、これで出し分けています。
この「先にどこに出すか決める」が、あとで効きます。パソコンで確認して満足すると、スマホの重なりに気づきません（筆者がそうでした）。
2-2. 「＋」を押したらメニューが開く仕組み（JavaScriptなし）
仕組みはこうです。
- 画面には見えないチェックボックスを1つ置く
- 右下の「＋」ボタンは、そのチェックボックスに紐づいたラベルにする（ラベルを押すとチェックが入る）
- CSSで「チェックが入っているときだけ、メニューを表示する」と書く
ラベルを押す→チェックが入る→メニューが出る。もう一度押す→チェックが外れる→メニューが消える。プログラムを1行も書かずに開閉ができます。「＋」の記号がチェック時に45度回って「×」に見えるのも、CSSの「回転」だけでやっています。
筆者のメニューは4項目です。「メルマガ登録」「ブログ始める」「AIを学ぶ」「LP制作を頼む」。それぞれ丸いアイコンと2行の文字が付いた横長の帯で、上から順に並びます。開いたときは画面全体が少し暗くなって、メニューだけが浮きます。
2-3. 非エンジニアがAIに頼むときの言い方
筆者はこれを Claude Code（AIアシスタント）に作ってもらいました。頼んだ言い方はこうです。
「スマホの右下に丸い『＋』ボタンを固定したい。押すとメニューが4つ縦に開いて、もう一度押すと閉じる。JavaScriptは使わないでほしい。パソコンでは出さない。色はブログの色（濃い紺と青緑）に合わせて。」
コードの用語は使っていません。「固定したい」「押すと開く」「JavaScriptは使わない」「パソコンでは出さない」というやりたいことの箇条書きです。「JavaScriptは使わない」と先に言ったのがポイントで、これでチェックボックス方式が出てきました。
ただし、ここで1つ抜けがありました。「もともとそこに何があるか」をAIに伝えていなかったのです。それが3-1の重なりにつながります。
社長：「『JavaScriptなし』って先に言ったら、ちゃんとそれで作ってくれたんだよな。」
凛：「言わなかったら、たぶんJavaScript付きで出てきたわよ。条件は先に言う。」
策：「補足すると、条件を先に言うのは『楽をするため』ではなく、自分が直せる範囲に収めるためです。JavaScriptが入ると、非エンジニアの筆者には中身が追えなくなります。」
3. 【具体例】1つのブログで運用して分かった3つのこと
実際にこの方式で運用した中で、作り方の記事には書いていなかったことを3つ出します。
3-1. テーマ標準の「トップへ戻る」ボタンと、縦46px・横35px重なっていた
一番大きかったのがこれです。筆者のテーマには、もともと右下に「トップへ戻る」の矢印ボタンが付いています。筆者の「＋」ボタンも右下です。同じ場所に2つ置いていたわけです。
パソコンでは「＋」を出していないので気づきませんでした。スマホの実機（画面幅375px）で確認したときに初めて、矢印が「＋」の陰に半分隠れているのを見つけました。測ると縦46px・横35pxの重なり。「＋」の直径が60pxなので、4割以上が重なっていた計算です。
直し方は単純で、テーマの「トップへ戻る」ボタンを上にずらすだけでした。CSSで「下から92pxの位置に置く」と1行書き、「＋」の上に矢印が来るようにしました。「＋」を動かすのではなく、テーマ側を避けるのがコツです。「＋」は右下の一番押しやすい場所に置きたいからです。
| 確認した端末 | 気づいたか |
|---|---|
| パソコン | 気づけない（そもそも「＋」を出していない） |
| スマホ実機（375px） | すぐ気づいた（矢印が半分隠れていた） |
3-2. 置き場所は「フッター直前のカスタムHTMLウィジェット」にした
1-2で書いたとおり、テーマのファイルには書きませんでした。置いたのは、管理画面の「ウィジェット」にある「カスタムHTML」です。筆者のテーマには「フッターの直前」に入れられるウィジェット枠があるので、そこにCSSとHTMLを丸ごと1つのカスタムHTMLとして入れています。
この置き場所のよいところは3つです。
- テーマを更新しても消えない（ウィジェットの中身はテーマとは別に保存される）
- PHPを触らないので、サイトが真っ白になる事故が起きない
- 管理画面から中身を見られるので、あとで直すときに「どこに書いたっけ」がない
ちなみに、パソコン用の追従サイドバーの設定も、別のカスタムHTMLに入れています。「見た目を足す」ものは全部ウィジェットに集める、と決めておくと迷いません。
3-3. あとから数値を直そうとしたら403（サーバーの防犯機能）に弾かれた
3-1の「92px」を入れるとき、筆者は管理画面ではなくAIに頼んで、プログラムから直接ウィジェットを書き換えようとしました。ここで2回、403エラー（サーバーが「その操作は許可しない」と返す状態）に当たりました。
| 弾かれた原因 | 通った直し方 |
|---|---|
| 「書き換え」の命令の種類そのものが弾かれた | 命令の種類を「新規送信」の形に変えて、ヘッダーに「本当は書き換え」と添える |
| CSSに日本語のコメント（メモ書き）を足したら弾かれた | コメントを書かず、数値だけの最小の差分で送る |
2つ目が地味に厄介でした。同じ内容を変更なしで送ると通る、短い文字で送ると通る、日本語のメモを足すと弾かれる。つまりサーバーの防犯機能（WAF）が「日本語のコメント入りのCSS」を怪しんでいたのです。「変更の理由」はコードの中にメモせず、自分のノートに書くことにしました。
このあたりは、筆者が別の記事で書いたREST APIの403と同じ話です。弾かれたら、まず「変更なしで送って通るか」を試す。それで通れば道は生きていて、中身が引っかかっているだけだと分かります。
Claude：「整理します。重なりは縦46px・横35px。直したのはテーマ側のボタン位置1行（下から92px）。書き換え時の403は2回、どちらもサーバー側の防犯機能でした。」
社長：「直したのは1行なのに、そこにたどり着くまでが長かったんだよな。」
凛：「そう。作るのは簡単、あとから直すのが本番。置き場所と直し方を最初に決めておけば短かったのよ。」
策：「そして重なりは、スマホの実機で見なければ一生気づかなかった。パソコンの画面で確認して終わりにしない、が一番の教訓です。」
4. 【じゃあどうやる？】プラグインなしでフローティングボタンを置く5ステップ
ここからは手順です。コピペで置く方法との違いは、Step 1・4・5にあります。
Step 1. 載せるものを決める（3〜4個まで）
まず、ボタンに何を載せるかを決めます。筆者は「メルマガ登録・ブログ始める・AIを学ぶ・LP制作を頼む」の4つです。5個以上は開いたときに画面からはみ出すので、4つまでに絞ります。1つだけなら、開閉なしの「押したら飛ぶ」ボタンで十分です。
Step 2. スマホとパソコンの出し分けを決める
「どの画面幅で出すか」を先に決めます。筆者は768px以下（スマホ・小さいタブレット）だけにしました。パソコンに追従サイドバーがあるなら、両方に出さないほうが読みやすいです。ここで決めたことを、Step 3でAIに伝えます。
Step 3. HTMLとCSSをAIに作ってもらう（JavaScriptなしで、と先に言う）
2-3の言い方で頼みます。伝える条件は「固定する位置」「押すと開く・閉じる」「JavaScriptは使わない」「出す画面幅」「色」の5つです。ここで追加で1つ言っておくと、3-1の重なりを最初から防げます。
「テーマにもともと右下の『トップへ戻る』ボタンがあるので、重ならないようにそのボタンを上にずらすCSSも一緒に書いて。」
Step 4. 「カスタムHTML」ウィジェットに入れる（テーマのファイルには書かない）
できたHTMLとCSSを、管理画面の「外観」→「ウィジェット」→「カスタムHTML」に貼ります。フッター付近の枠があればそこです。<style> から始まるCSSと、その下のHTMLを同じ1つのウィジェットに丸ごと入れて構いません。テーマの footer.php や子テーマのファイルには書かないでください。
Step 5. スマホの実機で3つ確認する
最後に、必ずスマホの実機で確認します。パソコンのブラウザの「スマホ表示」でも見られますが、指で押す感覚は実機でしか分かりません。見るのは3つです。
- 重なり：テーマの「トップへ戻る」や、他の固定ボタンと重なっていないか
- 押しやすさ：親指で届く位置か、メニューの帯が細すぎないか
- 本文の隠れ：記事の最後の段落や「次に読む記事」がボタンの陰に隠れていないか
社長：「また『最後に実機で見る』か。表のときも、画像のときも言ってたな。」
凛：「同じよ。パソコンで綺麗でも、読んでるのはスマホの人なんだから。」
策：「補足すると、5つのうちボタンを作っているのはStep 3だけです。残りの4つは、置いたあとに困らないための工程です。作り方だけ知っても、あとから直す日が来ます。」
5. よくある質問（FAQ）
Q. プラグインを使うのと、どちらが正解ですか？ A. ボタンが1つで、細かい色や位置を気にしないなら、プラグインでも十分です。この記事の方式が効くのは、プラグインをこれ以上増やしたくないときと、テーマの色に合わせて自分で調整したいときです。
Q. JavaScriptなしで本当に開閉できますか？ A. できます。チェックボックスのオン・オフをCSSで見張る方式です（2-2）。「開く・閉じる」の2択なら、これで足ります。複雑な動き（自動で消える・スクロール量で出す等）が必要なら、JavaScriptが要ります。
Q. テーマの「トップへ戻る」ボタンを消してしまってもいいですか？ A. 消しても構いませんが、筆者は残して上にずらしました（3-1）。長い記事を読んだあとに上へ戻る手段は、読者にとって必要だからです。
Q. カスタムHTMLに<style>を入れても大丈夫ですか？
A. 筆者のテーマでは問題なく効いています。ただしウィジェット枠がページのどこに出るかで、CSSが効く範囲が変わることがあります。うまく効かないときは「追加CSS」にCSSだけ分けて入れてみてください。
Q. パソコンにも出したいときは？ A. Step 2の画面幅の条件を外せば、パソコンにも出ます。ただし追従サイドバーがあるテーマでは、案内が2か所になるので、どちらか一方に絞るのをおすすめします。
Q. 置いたあと、押されているか分かりますか？ A. 筆者はまだ「フローティングボタンだけ」のクリック数は測れていません。リンク先ごとの成果は広告の管理画面で分かりますが、ボタン経由か記事内のリンク経由かまでは分けていません。ここは今後の宿題です。
6. まとめ｜フローティングボタンは「作り方」より「置き場所と確認」で決まる
社長：「置くだけなら、ネットの記事で合ってたんだな。」
凛：「合ってたわよ。足りなかったのは、置き場所と、置いたあとにスマホで見ること。」
策：「そして、テーマのファイルではなくウィジェットに置いたから、テーマを更新しても消えていません。最初の置き場所の選択が、あとの手間を決めます。」
Claude：「実測を再掲します。重なりは縦46px・横35px、直したのは1行。メニューはJavaScriptなし・4項目・スマホだけで動いています。」
この記事で伝えたかったことは3つです。
- フローティングボタンはHTMLとCSSだけで作れる。開閉もチェックボックスの仕組みでJavaScriptなしでできる
- 置き場所はテーマのファイルではなくカスタムHTMLウィジェット。テーマ更新で消えず、サイトが真っ白になる事故もない
- テーマにもともとある右下のボタンと重なる。パソコンでは気づけないので、スマホの実機で「重なり・押しやすさ・本文の隠れ」を見る
プラグインを使うかどうかは、正直どちらでもいいと思っています。ただ、「置けた」で終わると、あとから重なりや更新で困る日が来ます。置き場所と確認の順番だけ先に決めておくと、あとが楽です。
次に読むべき記事
- Claude Code副業の始め方と実践事例 — この記事の前提になっている、AIに「やりたいことの箇条書き」で頼む考え方の総まとめ
- WordPress REST APIが403になる原因 — 3-3で触れた「弾かれたらまず変更なしで送る」切り分けの元になった話
- JINからSWELLに移行した40代ブロガーの記録 — テーマを乗り換えても消えない場所に置く、という発想の出どころ
- WordPressで目次をプラグインなしで作る方法 — 同じく「プラグインなし」で、コピペの先にある落とし穴を書いた記事
- WordPressの吹き出しをプラグインなしで作る方法 — CSSのコピペは正しいのに続かない理由と、続く形にする方法
※ 本記事は Claude Code（筆者が使用中のAIアシスタント）自身が、筆者の実体験を元に執筆しています。 ※ 本記事にはアフィリエイトリンクが含まれます。
