【Blogger】記事内にコードエディターを設置する方法とコピーボタン実装手順
コードを紹介する記事を書くなら、読者が簡単にコードをコピーできるように「コピーボタン」を設置することは非常に重要です。
「コードを紹介する記事を書くなら、やっぱりコピーボタンは必須だな」と改めて実感。
この記事では、Bloggerの記事にスタイリッシュなコードエディター風のデザインを導入し、さらにワンクリックでコードをコピーできるボタンを実装する手順を、**CSS**と**JavaScript**のコードと共に詳しく解説します。
1. CSSコードの設置
コピーして**STYLEタグを閉じる直前**（</style>の直前）に貼り付けてください。
/*エディターコード崩れ防止*/
.code-box {
position: relative;
margin: 24px 0;
}
.code-box::before {
content: attr(data-lang);
position: absolute;
top: 8px;
left: 8px;
font-size: 11px;
padding: 4px 8px;
border-radius: 4px;
background: #444;
color: #fff;
}
.code-box pre {
counter-reset: line;
background: #1e1e1e;
color: #f8f8f2;
padding: 32px 16px 16px 48px;
border-radius: 8px;
overflow-x: auto;
font-size: 14px;
line-height: 1.6;
}
.code-box code {
font-family: Consolas, Monaco, "Courier New", monospace;
white-space: pre;
}
.code-box code span {
display: block;
counter-increment: line;
}
.code-box code span::before {
content: counter(line);
display: inline-block;
width: 32px;
margin-left: -40px;
padding-right: 8px;
text-align: right;
color: #777;
}
/*padding増やす*/
.code-box pre {
counter-reset: line;
background: #1e1e1e;
color: #f8f8f2;
padding: 48px 16px 16px 56px;
border-radius: 8px;
overflow-x: auto;
font-size: 14px;
line-height: 1.6;
}
/*buttonが被らないようにする*/
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 10;
}
※ 上記のコードは例です。
2. JavaScriptコードの設置
コピーして**BODYタグを閉じる直前**（</body>の直前）に貼り付けてください。
<script>
document.querySelectorAll('.code-box code').forEach(code => {
const lines = code.innerHTML.trim().split('\n');
code.innerHTML = lines.map(line => `<span>${line}</span>`).join('');
});
function copyCode(button) {
const code = button.nextElementSibling.innerText;
navigator.clipboard.writeText(code).then(() => {
button.textContent = "Copied!";
setTimeout(() => {
button.textContent = "Copy";
}, 1500);
});
}
</script>
3. Blogger記事へのHTMLコード挿入
コピーして、ブログ作成用のエディタの**HTML入力モード**に貼り付けます。
<div class="code-box" data-lang="HTML">
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
<pre><code>
ここに内容を記載する。
</code></pre>
</div>
⚠️ 注意点：HTMLのエスケープは必須
タグ（＜＞）はエディター内でHTMLとして解釈されないよう、以下のエスケープシーケンスに置き換える必要があります。
- 前タグ（＜） は ＆lt；
- 前タグ（＞）は ＆ｇt；
HTMLのエディタ内でもエスケープされるので、うまくいかなかったら休憩挟みながら調整してくださいね！
0 件のコメント:
コメントを投稿