Bloggerでコードを紹介するとき、「読者がコピーしにくい」と感じたことはありませんか？
今回紹介するカスタマイズを入れれば、記事内のCSSやHTMLをワンクリックでコピーできるようになります。外部ライブラリ不要で、AdSenseのナビゲーション誤認にも配慮した安全設計です。
この記事のゴール
・読者がボタン1回でコードをコピーできるようにする
・デザインはシンプルで広告やリンクと誤認されない
・CSSとJSを一度テンプレートに入れるだけでOK
ステップ① サイト全体に設置するコード
まずはサイト全体で使えるように、コピー機能のCSSとJSを一度だけ設置します。テンプレート編集から</head>の直前または</body>の直前に貼り付けてください。
<style>
/* --- Copy Box 基本デザイン --- */
.code-copy {
position: relative;
margin: 1.5em 0;
border: 1px solid #e5e5e5;
border-radius: 6px;
background: #fafafa;
}
.code-copy pre {
margin: 0;
padding: 12px 14px 14px;
overflow: auto;
font-family: ui-monospace, monospace;
font-size: 0.92rem;
line-height: 1.6;
}
.copy-btn {
position: absolute;
top: 8px; right: 8px;
font-size: .85rem;
padding: .45em .8em;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
cursor: pointer;
}
.copy-btn.copied {
color:#0a7c2f; background:#f2fbf5;
}
</style>
<script>
(function(){
function copyText(txt){
if(navigator.clipboard){return navigator.clipboard.writeText(txt);}
var ta=document.createElement("textarea");
ta.value=txt; document.body.appendChild(ta);
ta.select(); document.execCommand("copy");
document.body.removeChild(ta);
}
function getText(box){
var c=box.querySelector("code")||box.querySelector("pre");
return c?c.innerText:"";
}
function handler(e){
var btn=e.currentTarget, box=btn.closest(".code-copy");
copyText(getText(box));
btn.textContent="コピーしました";
setTimeout(()=>btn.textContent="コードをコピー",1500);
}
document.addEventListener("DOMContentLoaded",function(){
document.querySelectorAll(".code-copy .copy-btn")
.forEach(b=>b.addEventListener("click",handler));
});
})();
</script>ステップ② 記事内でコードを使う
あとは記事本文に、次のようなブロックを入れるだけです。<code>の中に好きなCSSやHTMLを書けば、その部分を丸ごとコピーできます。
<div class="code-copy">
<button class="copy-btn">コードをコピー</button>
<pre><code>/* ここにコピーさせたいCSSやHTML */</code></pre>
</div>なぜこの方法が安全なのか
- ボタンは広告やリンクに似せていない → AdSense誤認リスクを回避
- 外部ライブラリ不要 → ページ表示が軽くなる
- コピーしたい部分を1ブロックにまとめられる → 読者が迷わない
よくある質問（Q&A）
Q. ボタンの文字を変えたいときは？
A. <button class="copy-btn">コードをコピー</button> の文字を好きなものに変更してください。「一発コピー」「コピーする」などでもOKです。
Q. 複数のコードを置いた場合は？
A. 同じ枠を増やせばOKです。スクリプトはサイト共通なので、何個置いても全てのボタンが動きます。
Q. PC表示とスマホ表示で違いはある？
A. 特に違いはありません。スマホでもPCでも同じようにワンクリックでコピーできます。スマホではボタンのタップ領域を少し広めにしてあるので押しやすいです。
デザイン調整のコツ
- ボタン色：
.copy-btn { background:#fff; }の色を変えれば好みの色にできます。例：グレーなら#f5f5f5。 - ボタン角丸：
border-radius:4px;を0にすれば直角、20pxにすれば丸ボタンに。 - ボタンサイズ：
paddingを増やせば大きく、減らせばコンパクトになります。 - コピー完了メッセージ：
btn.textContent="コピーしました";の部分を好きな文言に変えてOKです。
実際に使ってみて
導入してみると、自分で記事を書くときにもコードが見やすくなりました。
「一発コピーできるから便利！」という読者の声も期待できます。
まとめ
Bloggerでコード紹介をするなら、コピー機能があると読者にとても親切です。
今回のカスタマイズはシンプルなCSS＋JSだけで実装でき、AdSenseやSEOにも優しい構成。ぜひ自分のブログにも取り入れてみてください。
0 件のコメント:
コメントを投稿