Title: Sticky Copy Button for Code Blocks
Author: Kasuga
Published: 2025年8月23日
Last modified: 2026年4月20日
---
プラグインを検索
# Sticky Copy Button for Code Blocks
作者: [Kasuga](https://profiles.wordpress.org/kasuga16/)
[ダウンロード](https://downloads.wordpress.org/plugin/stick-copy-button-codeblock.1.6.0.zip)
* [詳細](https://ja.wordpress.org/plugins/stick-copy-button-codeblock/#description)
* [レビュー](https://ja.wordpress.org/plugins/stick-copy-button-codeblock/#reviews)
* [インストール](https://ja.wordpress.org/plugins/stick-copy-button-codeblock/#installation)
* [開発](https://ja.wordpress.org/plugins/stick-copy-button-codeblock/#developers)
[サポート](https://wordpress.org/support/plugin/stick-copy-button-codeblock/)
## 説明
**Sticky Copy Button for Code Blocks** automatically adds a floating copy button
to each `` block on your website.
It provides convenient front-end copying
for developers, readers, and tutorial users.
### Features
This plugin is light, fast, and highly customizable:
* Adjustable button position (up/down and left/right)
* Customizable labels (“Copy” / “Copied”)
* Adjustable font size
* Background color, text color, or transparent mode
* Max-height option for large code blocks (with scroll support)
* **Optional line numbers** (simple native implementation)
* Custom CSS that is safely sanitized
No dependencies such as Prism or Highlight.js are required.
### Detailed Settings Guide
The following explains **every option** in the plugin settings page.
### 1. **Button Position**
**Adjust vertical position (top offset in px)**
Moves the button up or down relative
to the top of the code block. Use positive or negative values to fine-tune vertical
alignment.
**Adjust horizontal position (right offset in px)**
Moves the button left or right
by adjusting how far it sits from the right edge of the code block. Use positive
or negative values to fine-tune horizontal alignment.
These values help fine-tune button alignment to avoid overlapping with theme elements.
### 2. **Button Text and Behavior**
**Copy button label**
The label shown normally (default: “Copy”).
**Label after copying (2 seconds)**
Once the text is copied, the button temporarily
displays this label. Default: “Copied”.
### 3. **Button Size**
**Button size (8–36 px)**
Controls the font size of the button. Padding is automatically
adjusted based on this value.
### 4. **Button Colors**
**Button text color**
Hex color of button text.
**Button background color**
Hex background color. When copying, the plugin automatically
swaps the text and background colors for visual feedback. However, if the background
is transparent, only the text color is swapped.
**Always transparent background**
If enabled: – The button background always becomes
transparent. – Only text + border remain visible
### 5. **Code Block Max Height**
**Enable**
Must be checked for the value to apply.
**Code block max height (px)**
Sets a maximum height (minimum: 100px). Content
taller than this becomes scrollable.
This prevents long code blocks from stretching your page layout.
### 6. **Display Line Numbers**
**Display Line Numbers (Enable)**
Shows simple line numbers next to each line.
You can also fine-tune the position of the line numbers (offset adjustment is available).
Notes: – Line height is unified for consistency. – Theme-specific code styling is
preserved. – Line wrapping is forcibly disabled.
This is a built-in lightweight alternative to syntax-highlighter libraries.
### 7. **Custom Styles (CSS)**
You can add any custom CSS to adjust:
* Button design
* Wrapper layout
* Code spacing
* Line number appearance
Optionally, you can enable **“Add !important to CSS declarations automatically”**
to force your custom styles to take effect even when the theme’s CSS has higher
specificity.
Usable Selectors (CSS) :
* **.copy-code-btn** The copy button
* **.copy-code-btn.copied** The button after Copying
* **.code-block-wrapper** Wrapper of the code block (position: relative)
* **.code-block-wrapper pre** Inner code text area (the `` element)
* **.line-numbers** The container holding the line numbers
* Example:
`.copy-code-btn {` `font-family: "Comic Sans MS", cursive;` `
font-weight: 700;` `border: none;` `}` Note: Do not include any comments.
### Donate
If you find this plugin useful and would like to support its development,
you can
make a voluntary donation via PayPal.
Your support helps keep this plugin maintained and improved.
Thank you!
PayPal: https://www.paypal.me/Kasuga16
## スクリーンショット
* [[
* Plugin settings screen
* [[
* Button display in an actual blog post
* [[
* Line numbers displayed on a code block.
## インストール
1. Upload via WordPress Dashboard:
2. – In your WordPress dashboard, go to ‘Plugins’ ‘Add New’.
– Search for “stick-
copy-button-codeblock” and click ‘Install Now’. – Click ‘Activate’ once the installation
is complete. – (Optional) Go to ‘Settings’ ‘Stick Copy Button’ to configure options.
3. Manual Installation via FTP:
4. – Download the plugin’s zip file and extract it.
– Connect to your server via
FTP and navigate to the “wp-content/plugins/” directory. – Upload the extracted“
stick-copy-button-codeblock” folder to this directory. – Go to ‘Plugins’ in your
WordPress dashboard and activate the plugin. – (Optional) Go to ‘Settings’ ‘Stick
Copy Button’ to configure options.
## FAQ
### Which code blocks does this plugin support?
It supports only code blocks marked up in the `pre > code` format.
## 評価
### [Excellent plug-in](https://wordpress.org/support/topic/excellent-plug-in-417/)
[ch3252](https://profiles.wordpress.org/ch3252/) 2026年5月5日 1 reply
A great little plug-in that does exactly what I want. Simple to set up, automatically
adds a copy button to any code block.
### [Simple and works well](https://wordpress.org/support/topic/simple-and-works-well-56/)
[Jon Henshaw](https://profiles.wordpress.org/jonhenshaw/) 2025年12月26日
This is an excellent companion to the native code block in WordPress. It adds a
code button inside the code block, which I prefer so it doesn’t take up too much
room. I had to add some CSS overrides in my theme to maintain the appearance of
my code block style, and to move the button to the far right of the block where
I wanted it. I’m giving it 4 stars because of that, but I otherwise would have given
it 5 stars for ease of use. /* Removes 50px padding added by the plugin’s CSS */.
code-block-wrapper { padding-right: 0 !important; }/* Forces the button to move
to the right after removing the 50px padding */.copy-code-btn { right:4px !important;}
[ 2件のレビューをすべて表示 ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/)
## 貢献者と開発者
Sticky Copy Button for Code Blocks はオープンソースソフトウェアです。以下の人々が
このプラグインに貢献しています。
貢献者
* [ Kasuga ](https://profiles.wordpress.org/kasuga16/)
[“Sticky Copy Button for Code Blocks” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/stick-copy-button-codeblock)
### 開発に興味がありますか ?
[コードを閲覧](https://plugins.trac.wordpress.org/browser/stick-copy-button-codeblock/)
するか、[SVN リポジトリ](https://plugins.svn.wordpress.org/stick-copy-button-codeblock/)
をチェックするか、[開発ログ](https://plugins.trac.wordpress.org/log/stick-copy-button-codeblock/)
を [RSS](https://plugins.trac.wordpress.org/log/stick-copy-button-codeblock/?limit=100&mode=stop_on_copy&format=rss)
で購読してみてください。
## 変更履歴
#### 1.6.0
* Refactored CSS settings for broader theme compatibility.
* Improved stability of line number display.
* Added line number offset adjustment option.
* Added automatic !important appending feature for custom CSS.
#### 1.5.1
* Minor fix to the conditional script loading logic introduced in 1.5.0.
#### 1.5.0
* Load scripts only when code blocks are detected.
#### 1.4.0
* Added an option to display line numbers.
* Minor bug fixes.
* Updated readme.txt.
#### 1.3.0
* Changed the method for limiting code block height from line count to pixel-based
sizing.
* Minor bug fixes.
#### 1.2.0
* Added support for limiting code block height by line count.
* Added a Custom CSS option, allowing users to apply their own CSS to style the
copy button or code blocks.
#### 1.1.0
* Changed button size settings from a size selector to a numeric input field.
* Minor improvements and cleanup.
#### 1.0.1
* Minor bug fixes
#### 1.0.0
* Initial release
* Optimized and fixed code for official distribution.
* Added internationalization support.
## メタ
* バージョン **1.6.0**
* 最終更新日 **4週間前**
* 有効インストール数 **30+**
* WordPress バージョン ** 5.0またはそれ以降 **
* 検証済み最新バージョン: **6.9.4**
* PHP バージョン ** 7.4またはそれ以降 **
* 言語
* [English (US)](https://wordpress.org/plugins/stick-copy-button-codeblock/)
* タグ
* [button](https://ja.wordpress.org/plugins/tags/button/)[code](https://ja.wordpress.org/plugins/tags/code/)
[copy](https://ja.wordpress.org/plugins/tags/copy/)[easy](https://ja.wordpress.org/plugins/tags/easy/)
* [詳細を表示](https://ja.wordpress.org/plugins/stick-copy-button-codeblock/advanced/)
## 評価
5つ星中4.5つ星
* [ 1 5-星レビュー ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=5)
* [ 1 4-星レビュー ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=4)
* [ 0 3-星レビュー ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=3)
* [ 0 2-星レビュー ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=2)
* [ 0 1-星レビュー ](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/#new-post)
[すべてのレビューを見る](https://wordpress.org/support/plugin/stick-copy-button-codeblock/reviews/)
## 貢献者
* [ Kasuga ](https://profiles.wordpress.org/kasuga16/)
## サポート
意見や質問がありますか ?
[サポートフォーラムを表示](https://wordpress.org/support/plugin/stick-copy-button-codeblock/)
## 寄付
このプラグインが今後も改善できるよう応援しませんか ?
[ このプラグインに寄付 ](https://www.paypal.me/kasuga16)