PR

【WordPressプラグイン】ブログのコードブロックに「コピーボタン」「行番号」を簡単に追加する方法

ブログ運用
2025.12.12
スポンサーリンク

はじめに

ブログにソースコードを掲載する際、「コピーボタンがあれば便利なのに……」と思ったことはありませんか？
また、「行番号があるとコードの説明がもっとしやすいのに」と感じたことがある人も多いでしょう。

読者がワンクリックでコードをコピーできるようになると、記事の利便性は向上します。さらに、コードブロックに行番号を表示すれば、可読性が高まり、解説もスムーズになります。

この記事では、WordPress向けに開発した「Sticky Copy Button for Code Blocks」プラグインの使い方から、各オプションの詳細、そしてカスタムCSSを使った応用テクニックまでを解説します。

Sticky Copy Button for Code Blocks
Adds a customizable copy button to code blocks, making it easy for users to copy code with a single click.
ja.wordpress.org

このプラグインを導入するだけで、あなたのブログに少し便利になったコードブロックを簡単に追加できるようになります。

プラグインの特徴

「Sticky Copy Button for Code Blocks」は、WordPressの投稿内にあるすべてのコードブロック（<pre><code>要素）に対して、自動的に「コピーボタン」を追加するプラグインです。

  • すべてのコードブロックに自動でコピーボタンを追加
    • ボタン位置・ボタンの文字・サイズ・カラーなどをカスタマイズ
  • コードブロックの最大高さ設定
    • 縦スクロールの表示
  • 行番号の表示機能
  • 任意のカスタムCSSを設定画面から追加可能

使い方

1. プラグインのインストール

  1. WordPress管理画面にログインします。
  2. 左メニューの [プラグイン] > [プラグインの追加] をクリックします。
  3. 検索窓に「Sticky Copy Button for Code Blocks」と入力します。
  4. プラグインを見つけたら、[今すぐインストール]をクリックし、その後[有効化]します。

これで、コードブロック（<pre><code>）に自動でコピーボタンが表示されます。

2. 基本的な設定

WordPressのテーマによってコードブロックのデザインや余白、背景色が異なるため、ボタン位置やサイズを最適化することで、より美しく使いやすい表示になります。

  1. WordPress管理画面の左メニューから[設定] > [Sticky Copy Button]をクリックします。
  1. この設定ページで、表示するコピーボタンのスタイルと設置位置を調整します。

初期設定（最小限の調整）

以下の基本設定項目をお使いのコードブロックに合わせて調整すれば、十分に見栄えの良いコピーボタンを表示できます。

基本設定項目説明
ボタン上下位置の調整 (px)0px の場合はコードブロックの上端に表示されます。
プラス値で上方向、マイナス値で下方向へ移動します。
ボタン左右位置の調整 (px)0px の場合は右端に配置されます。
プラス値で右方向、マイナス値で左方向へ移動します。
コピーボタンのラベルボタン内に表示される文字列を設定します。「Copy」「コピー」「コピーする」など
コピー後のラベル (2秒間)ボタンをクリックした直後に表示される文字列です。「Copied」「コピー済」「コピーしました」など
ボタンのサイズ (8 ~ 36 px)12px〜16px程度に設定します。
ボタンの文字色ボタン内の文字列の色です。コードブロックの背景色としっかり区別できる色を選びます。
ボタンの背景色ボタン内の背景色です。
こちらもコードブロックの背景と被らない色を選びます。
  1. 設定を変更したら、忘れずにページ下部の [変更を保存] ボタンをクリックしてください。

ここからは、より使いやすいコードブロックにするため、設定ページに用意されているすべての設定項目について詳しく解説します。

3. 設定項目の詳細

ボタンのスタイルと位置の調整

設定項目説明補足
ボタン上下位置の調整 (px)コードブロックの上端から、ボタンをどれだけ上下に動かすかをピクセルで設定します。コードブロックの外側にボタンを置きたい場合は、正の値（例：20）を指定すると、上に浮かせるように配置できます。
ボタン左右位置の調整 (px)コードブロックの右端から、ボタンをどれだけ左右に動かすかをピクセルで設定します。コードブロック内側に配置したい場合は、負の値（例：-20）を指定すると、スクロールバーと重ならず、自然な位置に収まります。
コピーボタンのラベル通常時のボタンに表示されるボタン内の文字です。「📋コピー」のように絵文字を使うこともできます（※サーバーの文字設定に依存）
コピー後のラベル (2秒間)ボタンが押された後、2秒間だけ表示されるボタン内の文字です。「✅ Copied!」など、視覚的にコピー完了がわかるように設定します。
ボタンのサイズ (8 ~ 36 px)ボタンのフォントサイズを設定します。フォントサイズに応じて、ボタンサイズも自動調整されます。
ボタンの文字色ボタンの文字色（通常時）を設定します。ボタンが押されると、２秒間だけボタンの背景色と色が交換されます。
ボタンの背景色ボタンの背景色（通常時）を設定します。ボタンが押されると、２秒間だけボタンの文字色と色が交換されます。
常に背景を透明にするチェックを入れると、背景色が常に透明になります。ボタンが押されると、２秒間だけボタンの文字色が背景色と交換されます。
もし文字色が変わる効果を避けたい場合は、「ボタンの文字色」と「ボタンの背景色」を同じ色に設定します。

その他の機能設定

設定項目説明補足
コードブロックの高さ上限 (px)チェックを有効☑にすると、コードブロックの 最大高さをピクセル単位で設定できます。
コードがこの高さを超えた場合、縦スクロールバーが表示されます。		30行以上の長いコードを表示する際は、400px前後に設定すると、記事全体の見た目がスッキリまとまります。
行番号の表示チェックを有効☑にすると、コードブロックの左側に行番号が表示されます。長いコード行は折り返さず1行のまま表示される仕様となります。
そのため、必要に応じて横スクロールバーが表示されます。
カスタムスタイル (CSS)テキストエリアにCSSコードを入力することで、記述したスタイルが反映されます。
※ 次の項目で詳しく解説

4. カスタムスタイル (CSS) によるやや高度なカスタマイズ

カスタムCSSを使ってボタンやコードブロックのスタイルを更に細かく設定ができます。

設定ページの一番下にある［カスタムスタイル (CSS)］のテキストエリアに、CSSコードを入力します。
※CSSコードにはコメントや説明文を記載せず、コードのみを入力してください。

利用可能なCSSセレクタ

セレクタ対象要素
.copy-code-btnコピーボタン本体を指すセレクタです。フォント・色・サイズなど、最も基本的なスタイルを調整できます。
.copy-code-btn.copiedコピーボタンを押した後（約2秒間）に適用されるクラスです。コピーボタンのスタイルやアニメーションを調整したいときに使用します。
.code-block-wrapperコードブロック全体を囲むラッパー要素です。外枠のデザイン変更に使用します。
.code-block-wrapper preコード本文を含む<pre>タグを対象とするセレクタです。行間・余白・背景色などの調整に利用します。
.line-numbers行番号エリア（行番号本体）を指すセレクタです。フォントの色、余白、背景色などをここで調整できます。

5. 具体的なカスタマイズ例

以下のCSSコードの例を参考にし、ご自身の環境に合わせてコピーボタンのスタイルをカスタマイズしてください。

1. ボタンのスタイルの変更

コピーボタンのフォントを変更し、枠線をなくして文字を強調します。

.copy-code-btn, .copy-code-btn.copied {
    font-family: "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif;
    border: none;
    font-weight: 700;
}

2. 行番号のスタイルを変更

行番号の色を薄いグレーから黒に変更し、文字を太くします。

.line-numbers {
    color: #000;
    font-weight: 700;
}

3. ボタンの配置を変更

ボタンをコードの左側に固定します。

.copy-code-btn {
    left: 10px;
    right: auto;
}

4. コードエリアの調節

コードエリアの上部に、コピーボタン用のスペースを確保します。

.code-block-wrapper {
    position: relative;
    padding-top: 30px;
}

5. コードブロック自体のカスタマイズ

ステッチデザインのコードブロックとして表示されます。

.code-block-wrapper pre {
    background-color: #e8fff7;
    color: #333333;
    border: 3px dashed #7dd3c7;
    border-radius: 12px;
    box-shadow: 
        0 0 0 4px #e8fff7,
        0 0 0 8px #c9f2e7;
    padding: 20px;
}
.line-numbers {
    background-color: #e8fff7;
    color: #4a6b67;
    border: 2px dashed #7dd3c7;
    padding: 10px 12px;
    font-weight: 600;
    border-radius: 12px 0 0 12px;
    box-shadow:
        inset -3px 0 0 #c9f2e7;
}

6. コピー後ボタンのスタイル変更

コピーボタンが押されると、ボタン（.copied）が通常の3倍の大きさで表示されます。

.copy-code-btn.copied {
    transform: scale(3);
    transition: transform0.3sease;
}

7. とにかく派手なコピーボタンを演出

遊び心あふれる派手なコピーボタンです。常時光り輝き、ホバーすると斜めに回転し、クリック時にはボタンが拡大表示されます。

.copy-code-btn {
	position: absolute;
	outline: none !important;
	border-radius: 8px;
	cursor: pointer;
	opacity: 0.9;
	z-index: 10;
	font-weight: bold;
	color: #fff;
	background: linear-gradient(45deg,
		#ff00ff,
		#ff8800,
		#ffee00,
		#00ff44,
		#00ddff,
		#8844ff,
		#ff00aa
	);
	background-size: 400% 400%;
	animation: rainbowMove 3s linear infinite;
	transition:
		transform 0.4s ease,
		filter 0.4s ease,
		opacity 0.4s ease;
}
@keyframes rainbowMove {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.copy-code-btn:hover {
	transform: scale(1.2) rotate(8deg);
	filter: drop-shadow(0 0 10px #fff) brightness(1.3);
	opacity: 1;
}
.copy-code-btn.copied {
	font-size: 300%;
	animation:
		buttonFlash 0.6s ease,
		rainbowMove 3s linear infinite;
}
@keyframes buttonFlash {
	0% {
		transform: scale(1) rotate(0deg);
		filter: drop-shadow(0 0 4px #fff);
	}
	30% {
		transform: scale(1.4) rotate(10deg);
		filter: drop-shadow(0 0 20px #fff);
	}
	70% {
		transform: scale(0.9) rotate(-6deg);
		filter: drop-shadow(0 0 6px #fff);
	}
	100% {
		transform: scale(1) rotate(0deg);
		filter: drop-shadow(0 0 4px #fff);
	}
}

8. このサイトでのスタイル

参考までに、現在表示されているコピーボタンのスタイルです。

.copy-code-btn, .copy-code-btn.copied {
    color: #999;
    font-weight: 500;
    border: none;
}
.copy-code-btn:hover {
    color: #000;
    font-weight: 700;
}
.code-block-wrapper pre {
    padding-top: 30px;
}

以上で、プラグイン「Sticky Copy Button for Code Blocks」の使い方の説明は終了です。
ぜひこのプラグインを活用して、ご自身の環境に合った、より便利なコードブロックをお使いください。

おわりに

ブログ用のテーマは数多く存在しており、どんなシンプルなテーマでも、ひと昔前と比べれば信じられないほど高機能なHTMLビルダーになりました。
しかし、現在主流のテーマでも、コードブロックに「コピーボタン」が標準搭載されているものは多くありません。また、行番号の表示機能が用意されているテーマも比較的少数です。

さらに、コードブロックの最大高さや、必要に応じて縦スクロールバーを表示する設定が用意されていないテーマも多く、コード掲載が多いブログでは物足りなさを感じる場面があります。

おそらく、一般的なブログではエンジニアのようにソースコードを掲載する機会が少なく、その必要性があまり意識されていないのかもしれません。

このプラグインは、もともと「コピーボタンを追加するだけ」のつもりで作りました。しかし、自分自身がテーマに不足を感じていた機能を少しずつ追加していくうちに、現在のような形へと発展していきました。

私のようにソースコードの掲載の多いブロガーで、テーマに対して不足を感じていた方には、役立つプラグインだと思います。

コメント

タイトルとURLをコピーしました