コピーボタンの使い方

コピーボタンの動作、言語検出・ラベル表示機能、コピー統計の確認方法について説明します。

コピーボタンの動作

プラグインを有効化すると、フロントエンドのコードブロック（pre/code要素）にコピーボタンが自動追加されます。ユーザーがボタンをクリックすると、コードがクリップボードにコピーされます。

フロントエンドでコードブロックを含むページを表示します。対象要素に「コピー」ボタンが自動的に表示されます。

コピーボタンをクリックすると、コードブロック内のテキストがクリップボードにコピーされます。ボタン表示が一時的に「コピー済み」に変化します。

コピーイベントはREST API（kscc/v1/track-copy）を通じて自動的に記録されます。

ヒント

コピーボタンはJavaScriptの Clipboard API を使用しています。HTTPS環境での使用を推奨します。

プラグインはコードブロック内のコンテンツを解析し、プログラミング言語を自動検出します。検出された言語名がコードブロックの上部にラベルとして表示されます。

検出対象言語	検出方法
PHP	開始タグ（`<?php`）やPHP構文パターンから検出
CSS	セレクタやプロパティのパターンから検出
JavaScript	`function`、`const`、`let`等のキーワードから検出
HTML	HTMLタグのパターンから検出
その他	code要素のclass属性（`language-*`）からも検出可能

補足

言語ラベル表示は設定ページで有効/無効を切り替えられます。ラベルが不要な場合はオフにしてください。

管理画面の「Kashiwazaki SEO Code Clipper」→「コピー統計」タブで、コピーイベントの統計情報を確認できます。

項目	説明
コピー回数	各コードブロックのコピーされた回数を表示します
対象ページ	コピーが発生したページのURLを表示します
記録方式	REST API（`kscc/v1/track-copy`）でコピーイベントを非同期に記録します

SEO活用のヒント

コピー統計を活用して、ユーザーにとって最も価値のあるコードスニペットを把握し、コンテンツ改善に役立てましょう。頻繁にコピーされるコードは、ユーザーのニーズに合致している証拠です。

設定ページの「設定」タブで、コピーボタンと言語ラベルの見た目をカスタマイズできます。

カスタマイズ項目	説明
ボタン色	コピーボタンの背景色・テキスト色をカラーピッカーで指定できます
ボタン位置	コードブロック内でのボタンの配置位置を調整できます
ホバー効果	マウスオーバー時のボタンの視覚効果を設定できます

注意

デザイン設定の変更にはmanage_options権限（管理者）が必要です。

ファイル	サイズ
フロントエンドCSS	6.3KB
フロントエンドJS	31.2KB（コピー機能・言語検出・イベント追跡を含む）