Web整備室｜テンプレ

「HTMLって難しそう…」と思ってる人へ。 HTMLは、ブログやサイトの“骨組み（柱と棚）” です。 これが分かると、ブログの中が整理されて、読者が迷子になりにくくなります。 HTMLって何？（一言で） HTMLは、文章と箱を作るための言葉 です。 見出しを作る 文章を並べる リンクを置く リスト（箇条書き）を作る 枠（ボックス）でまとめる 家でたとえると、こう HTML ＝家の骨組み（柱・壁・部屋の形） CSS ＝内装（色・余白・角丸・見た目の整え） JavaScript ＝仕掛け（自動ドア・電気・動き） つまり、 HTMLがないと家が建たない 。これが基本です。 「HTMLだけ」でどこまでできる？（ブログ編） ブログでよく使うのは、だいたいこのへんです👇 目次 （記事の中身が一目で分かる） 関連記事リンク （回遊が増える） 問い合わせリンク （信頼が上がる） 無料配布や販売ページへの導線 （迷子を減らす） これらは HTML（＋見た目のスタイル込み） で十分作れます。 コピペで試してみよう（枠＋リンク） 下のブロックを、Bloggerの HTMLモード に貼ってみてください。 リンク先だけ自分のURLに変えたら完成です。 はじめての方へ 入口（まずここ） 無料配布 テンプレ販売（BOOTH） お問い合わせ ※この見た目は、HTMLの中にスタイル（見た目の設定）を入れているだけです。外部CSSファイルやJavaScriptは不要です。 よくある質問（FAQ） Q1. HTMLだけだと、動く仕組み（計算や自動化）は無理？ A. 動く仕組みは基本的にJavaScriptの担当です。 でもブログの導線ならHTMLで十分 です。 Q2. 見た目が少し違って見えることはある？ A. あります。テーマ（デザイン）や画面幅で、余白や文字サイズが少し変わる場合があります。 でも、 枠・リンク・目次 は崩れにくいので実用性は高いです。 Q3. どこでも同じように使える？ A. 「HTMLを貼れる場所があるブログ」なら使えます。 ただしサービスによっては一部のタグが制限さ...

こんにちは、Web整備員です。 今日はついに…「お見せできました！」 🎉 商品S01（導線セット）を、ブログからちゃんと見せられる状態にできました。 ✅ 今日できたこと（結論） ブログから 1クリックで商品ページ に行けるようにした テンプレ一覧ページの導線を整えた 「リンクが開けない場合」の逃げ道も用意した 🔗 今の入口（ここから見れます） テンプレ一覧： https://seibishituweb.blogspot.com/p/blog-page.html 無料配布： https://seibishituweb.blogspot.com/p/blog-page_72.html S01 商品ページ（0円）： https://booth.pm/ja/items/8001247 お問い合わせ： https://seibishituweb.blogspot.com/p/blog-page_11.html 🧩 迷ったポイント（でも解決した） 今回いちばん迷ったのは、BOOTHのリンクの形でした。 「ショップのURL」と「商品のURL」があって、同じように見えて混乱しやすい あるリンクだと、ショップ（商品一覧）に飛んでしまって、商品ページに直行できないことがあった 最終的に、ブログ側は 確実に開く商品ページURL を使う形にして解決しました。 📌 学んだこと（小学生でもわかるまとめ） リンクは「行き先（URL）」が命 （ここがズレると迷子になる） 見た目が同じでも、 「商品ページ」と「ショップページ」は別物 うまくいかない時は、 1個ずつ直す （一気にやると余計に崩れる） 🆘 もし開けない場合 もしリンクが開けない場合は、BOOTHの「ショップへのお問い合わせ」か、下のお問い合わせから連絡ください。 お問い合わせ： https://seibishituweb.blogspot.com/p/blog-page_11.html 📝 次回（明日以降）の予定メモ SNSアカウント作成（入口を増やす） 告知文を1回だけ投稿（短文でOK） ※環境（テーマ/幅/端末）によって見え方が変わる場...

今回の作業まとめ（苦戦・わからなかった・学んだこと） 1) 苦戦したこと **「どこを直せば反映されるのか」**が分かりにくかった サイドバー（ガジェット）と記事本文は、 別の場所 で直す必要があった。 「準備中が消えない」問題 直したつもりでも、見ている場所が違うと「まだ古い表示」に見えることがあった。 BOOTH側の設定が多くて迷う 発送日数、支払い、公開、シークレットなど、選択肢が多い。 2) わからなかったこと 「商品ページURL」と「店トップURL」の違い 店トップ：お店の入口 商品ページ：S01に直接飛ぶ近道 「作品ファイル」って何を入れるの？問題 HTMLをそのまま置くだけじゃなく、 ZIPにしてまとめる のが必要だった。 Windowsでファイルをどうまとめて渡すのか 「送る」が見つからず、最初は不安になった。 3) 学んだこと（今回の成長ポイント） 導線は2種類いる サイドバーや入口：まず迷わず案内する 記事のリンク集：買う人を最短で商品へ連れていく（商品ページURL） 「ログイン必要」みたいな注意文は信頼になる 最初に書いてあると、購入者が混乱しない。 空リンクを作らないのが正義 「とりあえず置く」が一番トラブルを増やす。 4) 初めてやったこと（フォルダー作成） 今回、初めてフォルダーを作って その中に template01.html / template02.html / template03.html / README.txt を入れた。 さらにそれを 全部選択してZIP化 できた。 これ、地味にでかい。 「データ商品を作れる側」に一段上がったやつ。 5) 結論（今回の作業で得た一番大事なこと） **ブログ整備 + BOOTH出品は「文章」より「導線」と「ファイル管理」**が勝負だった。 そこをちゃんと通したから、S01は「売り物」として成立してる ✅

今日の結論（先に言う） 「ページを作っただけ」では、上メニューに出ません。 上に出すには「レイアウト → ページリスト」でチェックが必要です。 同じ案内を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. 広告やアフィリエイトはありますか？ 当ブログはアフィリエイト／広告を含む場合があります。リンク先の内容は各販売元の表示をご確認ください。 最後に：リンク集 S01：導線セット（BOOTH）→ 商品ページはこちら もしリンクが開けない場合は、BOOTHの「ショップへのお問い合わせ」から連絡ください。 ブログ名：【WEB整備/テンプレ】