Web整備室｜テンプレ

今日の結論（先に言う） 「ページを作っただけ」では、上メニューに出ません。 上に出すには「レイアウト → ページリスト」でチェックが必要です。 同じ案内を2か所に置くと、二重に見えて迷子が増えます。 コード表示（配布ページ）に「本物のHTML」を混ぜると崩れます。 午前に起きた「困ったこと」 新しいページを作ったのに、ブログの上（メニュー）に出ない 同じ案内が2つ見える（上メニュー＋サイドバー） サイドバーに入れたら、文字が縦に割れて読みにくい URLを書いたのに、クリックできない（リンクにならない） 無料配布ページが崩れて、わけが分からなくなる 原因はこれ（Bloggerの罠） ページは作っても自動で上に出ない （仕様） 上メニューは「ページリスト」ガジェットが担当 （レイアウト側） 同じ案内を複数に置くと二重表示 （読者が迷う） 配布ページの<pre>内に本物のHTMLが混ざると崩れる （表示が暴走） <a href="<a href=..." の二重リンク が混ざると壊れる どう改善したか（やったこと） ① 上メニューは「入口」だけにした レイアウト → ページリスト → 表示するページを「入口」だけにチェック 上に増やしすぎない。入口ページを案内所にする ② 「案内所（はじめての方へ）」ページを作った 入口ページに「無料配布」「テンプレ一覧」「お問い合わせ」「信頼ページ」をまとめた 読者は入口だけ押せば迷わない ③ 二重に見える原因を消した サイドバーに同じ案内があるなら、消すか減らす 「案内は1つにまとめる」方が強い ④ 無料配布ページが崩れない形にした 配布ページでは、コードは 文字として見せる （&lt; と &gt; を使う） 配布ページに「本物の<div>」を混ぜない（混ぜると...

目次（ページ内リンク）が飛ばない理由：idが無いだけでした 無料配布ページに「目次」を作りました。 でも、クリックしても飛びませんでした。 原因はシンプルでした。 結論 目次のリンク（#tpl01）と、飛び先の目印（id="tpl01"）がセット です。 どっちかが無いと、飛びません。 ぼくが迷ったところ（ここ大事） 「一番外側」って何？（＝その箱のいちばん最初の<div>のこと） 目次の中に<div>（テンプレ本体）を入れてしまった（←これは混ぜたら崩れます） href="#tpl01"を書いたのに、id="tpl01"を書いてなかった 正しい形（これだけ覚えればOK） 1）目次は、目次だけ テンプレ本体は入れない。 <!-- 目次 --> <div> <ul> <li><a href="#tpl01">テンプレ01</a></li> <li><a href="#tpl02">テンプレ02</a></li> <li><a href="#tpl03">テンプレ03</a></li> </ul> </div> 2）飛び先（id）は、テンプレの箱の先頭に付ける 「そのテンプレが始まる一番最初の<div>」に付けます。 <!-- テンプレ01の箱（先頭） --> <div id="tpl01"> ...テンプレ01の中身... </div> <div id="tpl02"> ...テンプレ02の中身... </div> <div id="tpl03"> ...テンプレ03の中身... </div> よくあるミス（これやると壊れやすい） 目次の<ul...

豆知識：ボタンで「自動コピー」するやり方（JavaScriptあり） ※これは「説明用」です。無料配布ページはJavaScriptなし運用なので、ここでは知識として紹介します。 やりたいこと ボタンを押したら、コードを自動でコピーする 仕組み（かんたん） HTMLに「コピーしたい文字（コード）」を置く ボタンにJavaScriptをつけて「コピーしてね」と命令する サンプル（最小） 下は例です。自分のサイト（HTMLが置ける場所）なら動きます。 <button type="button" id="copyBtn">コピー</button> <pre><code id="copyText">&lt;div&gt;ここにコピーしたいコード&lt;/div&gt;</code></pre> <script> document.getElementById('copyBtn').addEventListener('click', function () { const text = document.getElementById('copyText').innerText; navigator.clipboard.writeText(text); alert('コピーしました'); }); </script> 注意 環境によって動かないことがあります（ブラウザのルール） JavaScriptが使えない場所（Bloggerの一部など）では動きません 広告やテンプレ配布ページは、シンプル運用の方が壊れにくいです 無料テンプレが「ボタンでコピー」できない理由 結論：このページはJavaScriptを使っていないので、ボタンで自動コピーはできません。 なぜJavaScriptを使わないの？ 安全（変な動きが出ない） シンプル（環境で壊れにくい） 誰でも同じ見た目になりやすい じゃあどうやってコ...

ブログ導線のバグまとめ（初心者あるある） ぼくも初心者です。なので、普通に迷子になります。 今回は「入口の案内」「お問い合わせ」「無料配布ページ」を作る中で、 実際にバグった（ように見えた）所 をメモしておきます。 同じ所でつまずく人が減ったらうれしいです。 ※このブログは、アフィリエイト/広告を含むことがあります。 1) 「お問い合わせ」を押すと404になる 起きたこと ：クリックしたら「ページが存在しません」になりました。 正直、最初は「え、なんで？」ってなりました。 よくある原因 リンクが「仮の文字」のまま（例： 【お問い合わせURL】 ） URLに 【 】 や余計な記号が混ざっている 同じ名前のリンクが複数あり、古いほうを押している（メニュー・サイドバーなど） 固定ページが下書きのまま、または公開されていない 直し方（初心者向けに最短） リンク先URLをコピーして、ブラウザのアドレスバーに直で貼って開く 404なら、URLが間違い。 【 】や余計な文字を消す 直で開けるのにサイト上だけ404なら、 別のリンクを押している ので、表示場所を1つに絞る 事故が少ない方法 ：お問い合わせは「Googleフォーム直リンク」にすると安心でした。 <a href="（あなたのGoogleフォームURL）" target="_blank" rel="noopener noreferrer">お問い合わせ</a> 2) Googleフォームに「HTMLを貼る場所」を探して迷子 これ、ぼくはやりました（はい）。 Googleフォームの中にHTMLは貼りません。HTMLを貼るのは、ブログの「ページ」や「記事」の本文です。 フォームURLの取り方 Googleフォーム編集画面の右上「送信」 鎖マーク（リンク） コピー ...

無料CTAボタン（黒×オレンジ） 下の箱を押すと全部選ばれます。コピーして使ってください。 コピペ用コード リンクを開く 説明 このボタンは、「ここを押してね」を分かりやすくするためのものだよ。 文字リンクより、見落とされにくくなるんだ。 使える場所は、記事の 冒頭・途中・最後 。 最初に見せたい時、説明のあとに案内したい時、最後に次の行動をお願いしたい時に使えるよ。 このボタンは、いろんな場面で使える。たとえば… 「くわしい説明はこちら」「使い方ページへ」「まとめページへ」みたいに、次のページへ案内できる。 「テンプレを受け取る」「資料を受け取る」みたいに、ダウンロードの入口にもできる。 「質問はこちら」みたいに、お問い合わせにも使えるよ。 サイト作成なら「料金はこちら」「サービス内容はこちら」「よくある質問はこちら」って案内もできる。 作品ページやツール、ゲームでも「ゲームで遊ぶ」「デモを見る」「最新版を開く」「遊び方を見る」みたいに応用できちゃう。 やってることは全部同じで、 リンク先が違うだけ なんだよね。 使い方は3つだけ。 テンプレのコードをコピー 記事編集でHTMLモードに切り替えて貼り付け 【リンクURL】 を行き先のURLに書き換える これだけ！ 貼ったあとは、リンク先が合ってるかだけ確認してね。 ボタンの文字や色は好みで変えてOKだけど、変えすぎると崩れることもあるから気をつけて。 このボタン、このブログでも使ってるよ(^▽^)/ 無料配布ページへの誘導、お問い合わせフォーム、固定ページ（プロフィールとか）への案内に活躍中！ 今日のポイント 使い方は3つ！ テンプレのコードをコピー 記事編集でHTMLモードに切り替えて貼り付け 【リンクURL】 を行き先のURLに書き換える これだけ！ 貼ったあとは、リンク先が合ってるかを必ず確認。 ボタンの文字や色は好みで変えてOKだけど、変えすぎると崩れることもあるから注意が必要！

このブログでできること 「ブログの崩れ」「CTAの置き方」「見やすさ」を、コピペで整えるテンプレをまとめています。 まずは“貼って使える形”を優先して、短く分かりやすく公開します。 現在の動作確認：Google Blogger（HTMLモード）／他サービスは順次対応（状況により変更あり） 無料テンプレ 無料配布 販売テンプレ 販売テンプレはストアにまとめます。 ストア（BOOTH）→ Web整備室｜テンプレ（BOOTH） ※ダウンロードにはBOOTH（pixiv）へのログインが必要です。 使い方 使いたいテンプレを選んで、HTMLをコピーします。 編集画面で「HTML表示」に切り替えて貼り付けます。 プレビューで崩れがないか確認して、公開します。 FAQ Q1. 貼ったのに見た目が違います テーマや画面幅で見え方が変わることがあります。まずプレビューで確認してください。 Q2. どこに貼ればいいですか？ 基本は記事本文の「HTML表示」です。テンプレによっては「レイアウト（ガジェット）」側に入れる場合もあります。 Q3. 広告やアフィリエイトはありますか？ 当ブログはアフィリエイト／広告を含む場合があります。リンク先の内容は各販売元の表示をご確認ください。 最後に：リンク集 ストア（BOOTH）： Web整備室｜テンプレ（BOOTH） ブログ名：【WEB整備/テンプレ】