無料配布ページ

無料配布

下のテンプレをコピーして使えます。

テンプレ01：入口ガジェット（404ゼロ版）
ブログの「入口リンク」を、ひとつの小さな箱にまとめるテンプレです。
使い方（3つ）
  1. 下のコードをドラッグしてコピーします。
  2. BloggerのHTMLモードに貼ります（レイアウト or 固定ページ）。
  3. リンク文字やURLを自分用に少し直して使います。
注意：このブログにはアフィリエイト/広告が入ることがあります。 
<div style="border:1px solid #ddd; padding:12px; border-radius:10px;">
  <strong>はじめての方へ</strong>
  <ul style="margin:8px 0 0; padding-left:18px; line-height:1.8;">
    <li><a href="https://seibishituweb.blogspot.com/">入口</a></li>
    <li><a href="https://seibishituweb.blogspot.com/p/blog-page_72.html">無料配布</a></li>
    <li><a href="https://docs.google.com/forms/d/e/1FAIpQLSet9K_baaQQWuGqVmlQu_yRD10H0rumZLg1NdA0MknVCZusPw/viewform" target="_blank" rel="noopener noreferrer">お問い合わせ</a></li>
  </ul>
</div>
豆知識：ボタンでコピーする方法もあります

困ったら： お問い合わせ

テンプレ02：お問い合わせリンク箱（シンプル版）
「困ったらここ」だけを、目立つ箱にして置くテンプレです。
使い方（3つ）
  1. 下のコードをドラッグしてコピーします。
  2. BloggerのHTMLモードに貼ります（固定ページ / 記事 / レイアウトでもOK）。
  3. URLや文言を自分用に少し直して使います。
注意：このブログにはアフィリエイト/広告が入ることがあります。 
<div style="border:1px solid #ddd; padding:12px; border-radius:10px;">
  <strong>困ったら、お問い合わせ</strong>
  <div style="margin-top:6px; line-height:1.8;">
    わからない点があれば、こちらから送ってください。
  </div>

  <div style="margin-top:10px;">
    <a href="https://docs.google.com/forms/d/e/1FAIpQLSet9K_baaQQWuGqVmlQu_yRD10H0rumZLg1NdA0MknVCZusPw/viewform"
       target="_blank" rel="noopener noreferrer"
       style="display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid #222; text-decoration:none;">
      お問い合わせフォーム
    </a>
  </div>
</div>
テンプレ03：関連記事リンク箱（空リンク禁止版）
記事の最後に「関連記事」を置くテンプレです。URLがある分だけ貼るので、空リンクが出ません。
使い方（3つ）
  1. 下のコードをドラッグしてコピーします。
  2. 記事の最後（HTMLモード）に貼ります。
  3. 関連記事のURLとタイトルだけ直します（不要な行は削除）。
注意：このブログにはアフィリエイト/広告を含むことがあります。 
<div style="border:1px solid #ddd; padding:12px; border-radius:10px;">
  <strong>関連記事</strong>

  <ul style="margin:8px 0 0; padding-left:18px; line-height:1.8;">
    <li><a href="ここにURL01" target="_blank" rel="nofollow noopener noreferrer">ここにタイトル01</a></li>
    <li><a href="ここにURL02" target="_blank" rel="nofollow noopener noreferrer">ここにタイトル02</a></li>
    <li><a href="ここにURL03" target="_blank" rel="nofollow noopener noreferrer">ここにタイトル03</a></li>
  </ul>

  <div style="margin-top:8px; font-size:12px; color:#555;">
    ※不要な行は削除してOKです（空リンクは作らない）。
  </div>
</div>
更新：2026-02-16
ストア（BOOTH）
ショップを見る（Web整備室｜テンプレ）
S01（0円）導線セットを見る（商品ページ）
※ダウンロードにはBOOTH（pixiv）へのログインが必要です。

コメント

コメントを投稿

このブログの人気の投稿

テンプレ一覧

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

ボタンでコピーできる仕組み（JavaScriptの豆知識）

豆知識：ボタンで「自動コピー」するやり方（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を使わないの？ 安全（変な動きが出ない） シンプル（環境で壊れにくい） 誰でも同じ見た目になりやすい じゃあどうやってコ...
続きを読む

無料CTAボタン！商品名：CTAボタンHTML

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