Lit.Link（リットリンク）やLinktree（リンクツリー）みたいなリンクを並べた自分だけのページが欲しい人におすすめです。
{tocify} $title={Table of Contents}
「ぽちっとぼたんず」の基本情報について説明します。リンクをリストアップした自分だけのシンプルなページが欲しくて制作→販売することにしました。
{tocify} $title={Table of Contents}
ぽちっとぼたんず―基本情報
| ブログサービス | Blogger |
|---|---|
| データ形式 | XML |
| マニュアル | あり（3000字超） |
| 販売先 | BOOTH |
| レスポンシブ | ◎ |
| 画像の埋め込み | ◎ |
| 動画の埋め込み | YouTube・TikTokのみ対応 |
| 問い合わせフォーム | △ |
| 独自ドメイン | ◎ |
| Webフォント | Google Fonts |
| 種類 | オリジナル / フロスト（全2種類） |
| SNSアイコン | 15種類に対応 |
補足
Googleが運営する無料のブログサービス「Blogger」で利用できるテンプレートです。フレームワークはBootstrap 5を採用。マニュアルは購入者のみ閲覧できます。文字数3000字超かつスクショ付きで解説しています。
画像・動画の埋め込み方法はマニュアル内で解説しています。
現状、Bloggerのウィジェット「連絡フォーム」には対応していませんが、将来的にアップデートで追加したいと思います。
WebフォントはNoto Sans JPとPoppinsを使用しています。Google Fontsであれば比較的簡単に実装できます。
テンプレートの種類はオリジナルとフロストの2種類あります。ボタンやポップアップの背景がフロストガラスのように透けている方が「フロスト」です。
15種類のSNSアイコンに対応しています。下記のものに加え、メールとリンクのアイコンも含まれます。Font Awesomeを採用。
X（旧Twitter） / Instagram / Threads / TikTok / Twitch / YouTube / LINE / Amazon / Reddit / LinkedIn / Bluesky / Teams / WhatsApp
2026年10月31日まで期間限定で税込2,200円で販売します！11月1日以降は2,400円に値上げします{alertSuccess}
{getButton} $text={商品ページ} $icon={link} $color={#0099ff}
ぽちっとぼたんず｜オリジナル
 |
| ぽちっとぼたんずオリジナル |
ミニマリスト的なデザインです。背景は単色、ボタンと枠線の2色を合わせて、たった3色のみでおしゃれに仕上げられます。
ボタンのマウスホーバー時のアニメーション、シェアアイコンを押したときのポップアップのUIUX。細部にこだわり、わかりやすく無駄のないデザインを実現しました。
{getButton} $text={デモサイト} $icon={preview} $color={#0099ff}
2種類目が「フロスト」です。フロストガラスのような透け感あるデザインに仕上げました。
背景画像を設定したい人にはフロストがおすすめです。背景イラストが映えるので、私のページでもフロストを使っています。
フロストはボタンの存在感を抑えつつ、視認性・可読性を損なわないよう細かく調整しながらデザインを考えました。
{getButton} $text={デモサイト} $icon={preview} $color={#0099ff}
ここまでお読みいただきありがとうございます！最後にFAQです。
Q：Bloggerを初めて使うのですが問題ないですか？
A：Bloggerに慣れてなくても利用できますが、ある程度基礎的なことは知っておいた方がいいのでこちらのサイトを参考にしてください。
Q：ファビコンは変更できますか？
A：はい、ダッシュボードの設定から変更できます。
Q：アフターフォローはありますか？
A：はい、あります。購入後にダウンロードできるZIPファイルの中にあるドキュメントに連絡先を記載しています。
Q：Lit.Linkとの違いは何ですか？
A：Lit.Linkには広告とロゴが表示されてしまいますが、ぽちっとぼたんずにはそういったものは一切含まれません。フッターのコピーライトも自由に編集できます。
Q：連絡フォームウィジェットに対応しないのはなぜですか？
A：Bloggerの連絡フォームはスマホで送信するときに機能しない不具合があるので実装を断念しました。GoogleフォームやMicrosoftフォームズなどの外部サービスを推奨します。
何かご質問・ご要望ありましたらBoothからお気軽にDM送ってください！
{getButton} $text={商品ページ} $icon={link} $color={#0099ff}
{getButton} $text={デモサイト} $icon={preview} $color={#0099ff}
ぽちっとぼたんず｜フロスト
 |
| ぽちっとぼたんずフロスト |
背景画像を設定したい人にはフロストがおすすめです。背景イラストが映えるので、私のページでもフロストを使っています。
フロストはボタンの存在感を抑えつつ、視認性・可読性を損なわないよう細かく調整しながらデザインを考えました。
{getButton} $text={デモサイト} $icon={preview} $color={#0099ff}
カスタマイズの範囲
ぽちっとぼたんずでは、HTMLとCSSの知識がなくても柔軟にカスタマイズできるような仕様にしています。
ダッシュボード→「レイアウト」からお好みでそれぞれの要素を追加・削除できます。
Cookieポップアップがいらなければ削除できますし、SNSアカウントをもってなければSNSアイコンも削除できます。
ボタン色、枠線、文字色、マウスホーバー時の色まで配色を細かく編集できます。「レイアウト」「カスタマイズ」画面のスクショは商品ページに載せています。
最後に｜よくある質問
ここまでお読みいただきありがとうございます！最後にFAQです。
Q：Bloggerを初めて使うのですが問題ないですか？
A：Bloggerに慣れてなくても利用できますが、ある程度基礎的なことは知っておいた方がいいのでこちらのサイトを参考にしてください。
Q：ファビコンは変更できますか？
A：はい、ダッシュボードの設定から変更できます。
Q：アフターフォローはありますか？
A：はい、あります。購入後にダウンロードできるZIPファイルの中にあるドキュメントに連絡先を記載しています。
Q：Lit.Linkとの違いは何ですか？
A：Lit.Linkには広告とロゴが表示されてしまいますが、ぽちっとぼたんずにはそういったものは一切含まれません。フッターのコピーライトも自由に編集できます。
Q：連絡フォームウィジェットに対応しないのはなぜですか？
A：Bloggerの連絡フォームはスマホで送信するときに機能しない不具合があるので実装を断念しました。GoogleフォームやMicrosoftフォームズなどの外部サービスを推奨します。
何かご質問・ご要望ありましたらBoothからお気軽にDM送ってください！
{getButton} $text={商品ページ} $icon={link} $color={#0099ff}