【コピペで完了】ブログのSNSシェアボタンを秒速カスタマイズ！「ペタッとシェア」を公開します
「自分のブログにも、おしゃれなSNSシェアボタンを置きたいな…」
「でも、HTMLとかJavaScriptとか難しくてよく分からない…」
ブログを運営しているあなたなら、一度はこう思ったことがあるのではないでしょうか？
読者が「この記事、面白い！」と感じたその瞬間に、気軽にシェアしてもらうためのSNSボタンは、アクセスアップに欠かせない重要なパーツです。しかし、いざ設置しようとすると、
- 公式のボタンはデザインがサイトに合わない…
- プラグインを導入するとサイトが重くなりそう…
- コードを自分でいじるのは怖くてできない…
といった壁にぶつかりがちです。
そんな悩みを一発で解決するために、専門知識ゼロでも・無料で・自分好みのSNSシェアボタンが作れるブログパーツ生成ツール「ペタッとシェア」を開発しました！
Webパーツ工房「ペタッとシェア」とは？
「ペタッとシェア」は、表示したいSNSやデザインを選ぶだけで、あなたのブログに最適なシェアボタンのコードを自動で生成するツールです。
最大の特徴は、一度コードをブログに貼り付けてしまえば、どの記事ページでもそのページのURLとタイトルを自動で読み取ってくれること。記事ごとにいちいち設定し直す必要は一切ありません。
主な特長
✅ 知識不要で超かんたん！
チェックボックスやラジオボタンをポチポチ選ぶだけの直感的な操作で、誰でも迷わず使えます。
✅ デザインは自由自在
「シンプルなデザイン」「公式カラー」「四角いボタン」「丸いボタン」「サイズの大中小」など、豊富な選択肢を組み合わせることで、あなたのブログデザインに完璧にマッチするボタンが作れます。
✅ プレビューで即時確認
設定を変更すると、画面右側のプレビューにリアルタイムで反映されます。「こんな感じになるのか」と見た目を確認しながら、じっくりデザインを練ることができます。
✅ 賢い自動化機能
生成されたコードは、閲覧されているページのURLとタイトルを自動で取得します。さらに、X (Twitter) へのシェアでは、文字数制限を超えないように投稿文を自動で最適化する賢い機能も搭載しています。
✅ 設定は自動で保存
作成したデザイン設定は、お使いのブラウザに自動で保存されます。次回ツールを開いたときも、前回の続きからすぐに作業を再開できます。設定をファイルとして保存（エクスポート/インポート）することも可能です。
✅ WordPress以外でもOK！自動でページ情報を読み取る仕組み
このシェアボタンの最大の特長は、設置されたページの情報を自動で読み取ってくれる「賢さ」にあります。
具体的には、ほとんどのウェブサイトの＜head＞内に設定されている、以下の2つの基本的なHTMLタグを探し出し、その内容をシェアする文章に利用します。
- ページのタイトル:
<title>ここにページのタイトルが入ります</title> - ページの説明文:
<meta name="description" content="ここにページの説明文が入ります。">
これにより、「ペタッとシェア」はWordPressブログはもちろん、静的なHTMLで作られたサイトや、他のブログサービス、手作りのポートフォリオサイトなど、どんなウェブページでも最適なシェア文を自動で生成できるのです。
一度コードを貼り付けるだけで、サイト内のどのページでもインテリジェントに動作する。それが「ペタッとシェア」の便利なポイントです。
使い方（たった4ステップ！）
使い方は驚くほどシンプル。4つのステップで完了です。
Step 1: SNSを選ぶ
まず、あなたのブログに設置したいSNS（X, LINE, Facebook, Bluesky）をチェックボックスで選びます。
Step 2: デザインをカスタマイズ
「テンプレート」「形状」「サイズ」を選んで、お好みのデザインに仕上げていきます。プレビューを見ながら、いろいろ試してみてください。共通のハッシュタグを入れたい場合は、「テキスト設定」も活用できます。
Step 3: プレビューで動作確認
完成したボタンがプレビューに表示されます。実際にボタンをクリックすると、シェア画面が開くので、どんな風に動作するかもしっかり確認できます。
Step 4: コードをコピーしてブログに貼り付け！
デザインが決まったら、出力されたコードを「コードをコピー」ボタンでコピーします。
あとは、あなたのブログのシェアボタンを表示したい場所に貼り付けるだけ！
例えば、多くのブログテーマでは「記事下のフッター」や「サイドバー」などに、HTMLを直接貼り付けられるウィジェットや設定項目が用意されています。
▼貼り付けコードの例
<div id="petatto-share-buttons"></div>
<script>
(function() {
const container = document.getElementById('petatto-share-buttons');
if (!container) { console.error('Share button container #petatto-share-buttons not found.'); return; }
const config = { sns: ["x","line","facebook","bluesky"], template: 'official', shape: 'circle', size: 'large', commonText: "" };
const url = encodeURIComponent(window.location.href), title = document.title;
const descMeta = document.querySelector('meta[name="description"]');
const description = descMeta ? descMeta.content : '';
const iconSVGs = { x: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="currentColor" d="M 6.9199219 6 L 21.136719 26.726562 L 6.2285156 44 L 9.40625 44 L 22.544922 28.777344 L 32.986328 44 L 43 44 L 28.123047 22.3125 L 42.203125 6 L 39.027344 6 L 26.716797 20.261719 L 16.933594 6 L 6.9199219 6 z"></path></svg>`, line: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 10 28 28"><path fill="currentColor" d="M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-5.204c0-0.379,0.308-0.687,0.687-0.687h2.604c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z"></path></svg>`, facebook: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>`, bluesky: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="currentColor" d="M12.104,7.999C16.919,11.614,22.099,18.944,24,22.877c1.902-3.933,7.081-11.263,11.896-14.878 C39.371,5.391,45,3.373,45,9.795c0,1.283-0.735,10.774-1.167,12.315c-1.499,5.357-6.962,6.724-11.821,5.897 C40.506,29.452,42.667,34.241,38,39.03c-8.863,9.094-12.738-2.282-13.732-5.197c-0.182-0.534-0.267-0.784-0.268-0.572 c-0.001-0.213-0.086,0.037-0.268,0.572C22.738,36.748,18.863,48.124,10,39.03c-4.667-4.789-2.506-9.577,5.988-11.023 c-4.86,0.827-10.323-0.539-11.821-5.897C3.735,20.569,3,11.077,3,9.795C3,3.373,8.63,5.391,12.104,7.999L12.104,7.999z"></path></svg>` };
const textContent = { x: 'Xでシェア', line: 'LINEで送る', facebook: 'Facebook', bluesky: 'Bluesky' };
const createXShareText = (pageTitle, pageDesc, commonText) => {
const TWEET_MAX_LENGTH = 280, URL_LENGTH = 23, SEPARATOR = '\n', ELLIPSIS = '...';
const availableLength = TWEET_MAX_LENGTH - URL_LENGTH - 1;
let text = commonText ? pageDesc + SEPARATOR + commonText : pageDesc;
if ((pageTitle + SEPARATOR + text).length <= availableLength) return pageTitle + SEPARATOR + text;
const textToTruncate = pageTitle + SEPARATOR + text;
return textToTruncate.substring(0, availableLength - ELLIPSIS.length) + ELLIPSIS;
};
const shareText = (config.commonText ? (description ? description + '\n' + config.commonText : config.commonText) : description);
const shareUrls = {
x: `https://twitter.com/intent/tweet?url=${url}&text=${encodeURIComponent(createXShareText(title, '', config.commonText))}`,
line: `https://social-plugins.line.me/lineit/share?url=${url}&text=${encodeURIComponent(title + (shareText ? '\n' + shareText : ''))}`,
facebook: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
bluesky: `https://bsky.app/intent/compose?text=${encodeURIComponent(title + (shareText ? '\n' + shareText : '') + '\n' + decodeURIComponent(url))}`,
};
const styles = {
colors: { official: { x: { bg: '#000000', text: '#ffffff', hover: '#333333' }, line: { bg: '#00c300', text: '#ffffff', hover: '#00a900' }, facebook: { bg: '#1877f2', text: '#ffffff', hover: '#166fe5' }, bluesky: { bg: '#0092D3', text: '#ffffff', hover: '#0081bc' } }, simple: { bg: '#f3f4f6', text: '#1f2937', hover: '#e5e7eb' } },
sizes: { small: { p: '0.5rem 0.875rem', i: '1.25em', t: '0.875rem', c: '2.5rem' }, medium: { p: '0.625rem 1rem', i: '1.25em', t: '1rem', c: '3rem' }, large: { p: '0.75rem 1.25rem', i: '1.25em', t: '1.125rem', c: '3.5rem' } },
shapes: { square: { r: '0.375rem' }, rounded: { r: '9999px' }, circle: { r: '50%' } }
};
const wrapper = document.createElement('div');
Object.assign(wrapper.style, { display: 'flex', flexWrap: 'wrap', gap: '0.75rem', fontFamily: 'sans-serif' });
config.sns.forEach(sns => {
const btn = document.createElement('a'); btn.href = shareUrls[sns]; btn.target = '_blank'; btn.rel = 'noopener noreferrer';
const cs = styles.colors[config.template] || styles.colors.simple; const c = cs[sns] || cs; const sz = styles.sizes[config.size]; const sh = styles.shapes[config.shape]; const iSz = config.shape === 'circle' ? '1.5em' : sz.i;
Object.assign(btn.style, { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: '600', textDecoration: 'none', whiteSpace: 'nowrap', transition: 'background-color 0.2s ease, transform 0.15s ease', backgroundColor: c.bg, color: c.text, fontSize: sz.t, borderRadius: sh.r, padding: sz.p, boxShadow: '0 1px 2px 0 rgba(0,0,0,0.05)', });
btn.onmouseover = () => { btn.style.backgroundColor = c.hover; btn.style.transform = 'translateY(-2px)'; }; btn.onmouseout = () => { btn.style.backgroundColor = c.bg; btn.style.transform = 'translateY(0)'; };
const iconSpan = document.createElement('span'); iconSpan.innerHTML = iconSVGs[sns]; const svg = iconSpan.querySelector('svg');
if (svg) Object.assign(svg.style, { width: iSz, height: iSz, verticalAlign: 'middle' });
btn.appendChild(iconSpan);
if (config.shape === 'circle') { Object.assign(btn.style, { width: sz.c, height: sz.c, padding: '0' }); }
else { const textSpan = document.createElement('span'); textSpan.textContent = textContent[sns]; textSpan.style.marginLeft = '0.5rem'; btn.appendChild(textSpan); }
wrapper.appendChild(btn);
});
container.appendChild(wrapper);
})();
</script>たったこれだけで、あなたのブログの全記事に、最適化されたオリジナルのシェアボタンが表示されるようになります。
こんな方におすすめです
- ブログ初心者で、難しいことは分からないけどシェアボタンを置きたい方
- 既存のプラグインのデザインや機能に満足していない方
- サイトの表示速度を少しでも速く保ちたい方
- 手軽に自分だけのオリジナルパーツを作ってみたい方
まとめ
「ペタッとシェア」は、「もっと手軽に、もっと自由に、ブログの表現を楽しんでほしい」という思いから生まれたツールです。
これまでシェアボタンの設置をためらっていた方も、ぜひこの機会に「ペタッとシェア」を使って、あなたの素敵な記事をたくさんの人に届けるお手伝いをさせてください！