S01を改良版｜「見た目はこうなります」プレビュー付き（コピペOK）

この記事でわかること
  • S01を入れると、ブログがどんな見た目になるか
  • コピペ用コード（そのまま使える）
  • 入れ方（Bloggerで迷子にならない手順）

「どんな見た目になるの？」を一発で分かるように、プレビュー（実物）を置きました。

※無料配布ページ：ここ / BOOTH：ここ

① 見た目プレビュー（これが表示されます）

⚠️ ここだけ注意
文字が読めない場合は、背景を明るく（白系）にすると解決しやすいです。
✅ 次の1つだけやる
S01を見に行く（無料）
BOOTHで見る
※導線は増やさず「次の1つ」だけにすると強いです。

② コピペ用コード（そのまま貼れます）

下のコードをそのままコピペして使ってください（URLだけ差し替え）。

📌 コピペ用
<div style="border:1px solid #e7e7e7; background:#ffffff; padding:14px; border-radius:16px; margin:14px 0; line-height:1.8;">
  <div style="font-weight:800; font-size:18px; margin:0 0 6px;">🧭 まずはここ（迷子防止）</div>
  <ul style="margin:0; padding-left:18px;">
    <li><a href="【S01配布ページURL】" target="_blank" rel="noopener">S01の配布ページを見る</a></li>
    <li><a href="【BOOTH商品URL】" target="_blank" rel="noopener">BOOTHで配布ページを見る</a></li>
    <li><a href="【固定ポストURL】" target="_blank" rel="noopener">Xの固定ポストを見る</a></li>
  </ul>
</div>

<div style="border:1px solid #ffe4a8; background:#fff8e6; padding:14px; border-radius:16px; margin:14px 0; line-height:1.8;">
  <div style="font-weight:800; font-size:16px; margin:0 0 6px;">⚠️ ここだけ注意</div>
  <div>文字が読めない場合は、<b>背景を明るく（白系）</b>にすると解決しやすいです。</div>
</div>

<div style="border:1px solid #e7e7e7; background:#ffffff; padding:14px; border-radius:16px; margin:14px 0; line-height:1.8;">
  <div style="font-weight:800; font-size:16px; margin:0 0 10px;">✅ 次の1つだけやる</div>

  <a href="【S01配布ページURL】" target="_blank" rel="noopener"
    style="display:block; text-align:center; padding:14px 16px; border-radius:14px;
    background:#111; color:#fff; font-weight:800; text-decoration:none;">
    S01を見に行く（無料）
  </a>

  <div style="height:10px;"></div>

  <a href="【BOOTH商品URL】" target="_blank" rel="noopener"
    style="display:block; text-align:center; padding:14px 16px; border-radius:14px;
    background:#fff; color:#111; font-weight:800; text-decoration:none; border:1px solid #111;">
    BOOTHで見る
  </a>

  <div style="font-size:12px; color:#555; margin-top:10px;">
    ※導線は増やさず「次の1つ」だけにすると強いです。
  </div>
</div>

③ 入れ方（Bloggerで迷わない）

  1. Bloggerの投稿を開く
  2. 右上あたりの 「HTML」（または鉛筆アイコン）に切り替える
  3. 貼りたい場所にコードをコピペ
  4. プレビューで見た目チェック → OKなら公開
最後にひとこと
「見た目が分かる」だけで安心して使えます。
迷子が減ると、クリックも増えます（人間は単純）。

コメント

コメントを投稿

このブログの人気の投稿

テンプレ一覧

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

ただの文章を見やすい箱にする方法｜初心者向けHTML見本

「ただ文章を書くだけだと、少し見にくいな」と感じることがあります。 今回は、 普通の文章 を 見やすい箱 にすると、どう変わるかを見本でまとめました。 ビフォー まずは、ふつうの文章です。 ▼ 前はこう 無料テンプレはこちらです。使いたい方は下を見てください。 アフター 同じ内容を、箱に入れるとこうなります。 ▼ 後はこう 無料テンプレはこちら 使いたい方は下を見てください。 どう変わったの？ 前：ただの文章 後：箱に入って、少し目立つ 前より「ここが大事」と伝わりやすい 初心者でも見た目の変化がわかりやすい 使うコード 下のコードをコピーして使えます。 ▼ コピーするコード 下の灰色の中を、そのままコピーしてください。 無料テンプレはこちら 使いたい方は下を見てください。 使い方 上の「アフター」の見た目を確認する 下の「使うコード」をコピーする BloggerのHTMLモードに貼る 文字だけ自分の記事に合わせて変える まとめ 今回は、ただの文章を 見やすい箱 にしてみました。 大きく難しいことはしていませんが、前より少し見やすくなります。 初心者向けなら、まずはこういう 見た瞬間に違いがわかる形 から始めるのが分かりやすいです。
続きを読む

比較記事テンプレ 基本編とは？まずはこの形で十分な理由

比較記事を書くとき、いきなりいろいろ足したくなることがあります。 でも、最初から比較表やFAQまで入れようとすると、かえって読みにくくなることがあります。 そこで使いやすいのが、 比較記事テンプレ 基本編 です。 これは、比較記事をわかりやすく始めるための、やさしい土台です。 実際の基本編テンプレも見たい方はこちら → 比較記事テンプレ 基本編 「まず何を書けばいいのか」 「どこをそろえれば見やすいのか」 そこをシンプルに整えるために作りました。 この記事では、この 基本編がどんな役目のテンプレなのか を、初心者にもわかりやすく説明します。 比較記事テンプレ 基本編は、はじめの形を作るためのテンプレです 比較記事は、ただ商品を並べればいいわけではありません。 読む人はまず、 「今日は何をくらべる記事なのか」 を知りたいです。 その次に、 「どこが違うのか」 を知りたくなります。 基本編は、この流れを見やすくするためのテンプレです。 いきなりたくさんの機能を入れるのではなく、まずは 記事の形を整えること を大事にしています。 いきなり全部入れないほうが、かえってわかりやすいです 比較記事というと、比較表や質問コーナーを思い浮かべる人もいるかもしれません。 もちろん、それが役立つ場面もあります。 でも、最初の段階では、そこまで入れなくても大丈夫です。 むしろ、先に入れすぎると、読む人がどこを見ればいいのか迷いやすくなります。 基本編で大事にしていること 何を比べるのか どんな違いがあるのか どんな人に合いそうか まずはこの3つが追いやすいだけでも、記事はかなり読みやすくなります。 このテンプレは、初心者に向いています ...
続きを読む