pctrouble.help

ツールを探す

AI モデルをダウンロード中…

    表示テーマ

    見やすい表示を選んでください。

    表示テーマを選択

    メニュー

    よみToRu ファイル構成マップ工房 Webパーツ工房 ペタッとシェア Webパーツ工房 テーブル支部 らくパス QRuQRu
    英語こわない Taskるカレンダー 撮っとこ! レシピ倍量さん
    ZIP受け渡し前チェッカー CSV事故チェッカー どこデカ リネむん Desktop Library ポイッとDrop きゅっとFile ぎゅっとPDF

    画像加工

    画像おかたづけ ぷちパス工房 ドット絵工房 ニタフォント ファビってアイコン工房 写真かんたん加工ツール 画像かんたん圧縮・変換ツール おもいで写真レスキュー

    動画加工

    うごグラ工房 動画くるん パラパラ工房

    音声加工

    音楽・音声かんたん変換ツール

    ハードウェア診断

    タッチパッド診断カルテ キーボードチャタリングチェッカー マウス診断カルテ Nキーロールオーバー・チェッカー ゲームコントローラー診断カルテ

    ファイル診断

    このファイル、何?チェッカー

    システム診断

    ネットワーク健康診断 Webパーツ工房 かどみえ PCもしもし相談室

    セキュリティ

    コピペミスチェッカー スクショ公開前チェッカー ファイルのお医者さん リンク先まるみえチェッカー
    1. pctrouble.help
    2. › Web・コード生成
    3. › Webパーツ工房 ペタッとシェア

    Webパーツ工房|SNSシェアボタンをコピペで設置

    ペタッとシェア

    サイトに合うボタンを、選んでつくる。

    SNSシェアボタンの色・形・サイズを選び、完成したデザインを見ながらコードを生成。プラグインを追加せず、WordPressや静的HTMLサイトの編集できる場所へ設置できます。

    • 無料
    • 登録不要
    • ブラウザで利用
    シェアボタンを作る →

    生成したコードを設置できるサイト向け。シェア時は各SNSへ移動します。

    架空のブログ記事に、実際に生成したSNSシェアボタンを設置した例
    生成コードを架空のブログへ設置した例。画像のボタンは操作できません。

    サイトに馴染む、3つのデザイン

    公式カラーとシンプルな配色、四角・角丸・円形、大・中・小を組み合わせて作れます。

    架空のブログ記事へ、実際の生成コードでX・LINE・Facebookのシェアボタンを設置した例
    設置例:このブログは作例です。画像内のボタンは操作できません。

    表示例:アプリで生成したボタン

    角丸

    角丸のSNSシェアボタンを生成したプレビュー

    色を使って、分かりやすく

    円形

    円形のSNSシェアボタンを生成したプレビュー

    アイコン中心のコンパクトな形

    シンプル

    シンプルのSNSシェアボタンを生成したプレビュー

    落ち着いた配色でページに合わせる

    自分のサイトに合うボタンをつくる

    プレビューを確認して、そのままコードをコピーできます。

    シェアボタンを作る →

    完成形を確認して、コードをコピー

    デザインを選んで、サイトへ設置

    生成されたコードは、HTMLを編集できるWordPressや静的HTMLサイトなどへ設置できます。設置先がstyleタグやscriptタグを許可しているか確認してください。

    デザイン選択→プレビュー→コードコピー

    生成コードの一部

    <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"], template: 'official', shape: 'rounded', size: 'large', commonText: "" };
        const url = encodeURIComponent(window.location.href), title = document.title;
        const descMeta = document.querySelector('meta[name="description"]');
    

    生成コードはHTML / CSS / JavaScriptを含みます。

    ページ情報を、自動でシェア文に

    タイトル・URL・説明文を取得

    設置したページのタイトルやURL、descriptionを読み込み、シェア文を作ります。共通の追加テキストも指定できます。

    設定のインポート・エクスポート

    選んだSNSやデザイン設定を保存して、別のサイト用のボタン作成にも使えます。

    こんなシェアボタン作りに

    • 公式ボタンはデザインがバラバラで、サイトの見た目が崩れてしまう…
    • プラグインを入れると、サイトが重くなるのが心配
    • おしゃれなボタンを自作したいけど、HTMLやCSSは分からない
    • 静的サイトや無料ブログサービスで、プラグインが使えずシェアボタンを設置できない
    • 毎回シェア用のURLやテキストを手動で設定するのが面倒

    生成時の処理と、シェア時の通信

    設定やコードの生成はブラウザ内で行い、設定はブラウザのlocalStorageに保存します。生成ツールから入力内容を当サイトへ送信する処理はありません。

    完成したボタンを押すと、共有するタイトルやURLなどが各SNSへ渡されます。生成時の処理とは別です。

    プラグインを追加せず、生成したHTML / CSS / JSを設置する方式です。表示速度は設置先のページや他のスクリプトにも左右されます。

    HOW TO USE

    使い方

    1. 01

      デザインを選ぶ

      表示したいSNS、デザイン、形状、サイズなどを左のパネルで組み合わせます。

    2. 02

      コードをコピー

      右側のプレビューを確認し、「コードをコピー」ボタンでHTMLを取得します。

    3. 03

      サイトに貼り付け

      WordPressや静的サイトなど、HTMLを貼り付けられる場所にそのまま設置します。

    FAQ

    よくある質問

    Q1: 本当に無料ですか?商用サイトでも使えますか?

    A1: 無料で利用でき、生成コードは商用サイトにも設置できます。掲載する内容やSNSロゴなどの利用条件は、各提供元の規約も確認してください。

    Q2: WordPress以外でも使えますか?

    A2: はい。静的HTMLサイトや各種ブログサービスなど、生成されたコードを貼り付けられる環境であれば、どこでもお使いいただけます。

    Q3: ページが重くなりませんか?

    A3: プラグインを追加せず、生成したHTML/CSS/JSを設置する方式です。表示速度は設置先のページや他のスクリプトにも左右されます。

    Q4: 入力した情報やサイトの情報はどこかに送信されますか?

    A4: 設定やコード生成はブラウザ内で行い、設定はlocalStorageに保存します。完成したボタンを押すと、共有するタイトルやURLなどが各SNSへ渡されます。

    サイトに合うシェアボタンをつくる

    デザインを選び、生成コードを設置できます。

    無料でシェアボタンを作る →
    リネむん スポンサー広告 広告表示計測(装飾用)

    あわせて使えるツール

    この作業と一緒に使うと便利なツールです。

    • Webパーツ工房 かどみえ シェアしたときのカード画像の見え方を確認する
    • ぷちパス工房 図形やイラスト、文字をベクターで作る
    • ファビってアイコン工房 サイト用のアイコン画像を作る

    ツール一覧

    システム診断

    • PCもしもし相談室
    • Webパーツ工房 かどみえ
    • ネットワーク健康診断

    ハードウェア診断

    • Nキーロールオーバー・チェッカー
    • キーボードチャタリングチェッカー
    • ゲームコントローラー診断カルテ
    • タッチパッド診断カルテ
    • マウス診断カルテ

    セキュリティ

    • コピペミスチェッカー
    • スクショ公開前チェッカー
    • ファイルのお医者さん
    • リンク先まるみえチェッカー

    ファイル診断

    • このファイル、何?チェッカー

    ファイル加工

    • CSV事故チェッカー
    • ZIP受け渡し前チェッカー
    • きゅっとFile
    • ぎゅっとPDF
    • どこデカ
    • リネむん

    ビューア

    • Desktop Library

    通信ツール

    • ポイッとDrop

    画像加工

    • おもいで写真レスキュー
    • ドット絵工房
    • ニタフォント
    • ファビってアイコン工房
    • ぷちパス工房
    • 画像おかたづけ
    • 画像かんたん圧縮・変換ツール
    • 写真かんたん加工ツール

    動画加工

    • うごグラ工房
    • パラパラ工房
    • 動画くるん

    音声加工

    • 音楽・音声かんたん変換ツール

    Web・コード生成

    • QRuQRu
    • Webパーツ工房 テーブル支部
    • Webパーツ工房 ペタッとシェア
    • ファイル構成マップ工房
    • よみToRu
    • らくパス

    メディア・記録

    • 英語こわない
    • 撮っとこ!

    計算ツール

    • レシピ倍量さん

    効率化ツール

    • Taskるカレンダー

    このサイトが役に立ったらシェア!

    症状から探す更新情報サイトについてメディア・引用ガイドプライバシーポリシー利用規約お問い合わせ

    © 2026 pctrouble.help. All Rights Reserved.