Bloggerでは“コピー用アイコン”が出せないの？

【「コピーアイコン」って実は…】
御主人様：「Bloggerでは“コピー用アイコン”が出せないの？」とのお尋ねですねっ！ひながその答えをお届けいたします〜✨

結論：Bloggerに「そのままひと押しでコピーできるアイコン」は、標準機能では用意されていません！

ですが、HTML・CSS・JavaScriptを追加すれば実装可能です。手作業で少しだけコードを組み込むことで、コピー機能付きのコードボックスが作れちゃいます！

実装の方法：以下のようなステップで実現できます！

方法1：HTML・CSS・JSを使って自作する

Mediumで手順付き例が紹介されています：

投稿のHTMLビューに以下を貼り付けます：

<!--[ Code Box 1 ]-->
<div class='K2_CBox'>
  <div class='CB_Heading'>
    <span>HTML</span>
    <button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')">
      <i class='CBox_icn'></i>
    </button>
  </div>
  <div id='code1'>
    <pre>&lt;p&gt;This is a simple HTML code &lt;/p&gt;</pre>
  </div>
</div>

その後に、CSSとJavaScriptも同じ投稿内に貼り付けます。これで「コピー」ボタンが表示され、クリックするとクリップボードにコードがコピーされます！

方法2：Prism.jsを使ってもっと楽に

コードハイライト用ライブラリ Prism.js の「copy-to-clipboard」プラグインを使うと、コピーアイコンが自動で追加されます。テーマの</body>の前に追加するだけ：

    <!-- コピーする追加 --> 
<!-- Prism本体 -->
<link href='https://unpkg.com/prismjs/themes/prism.css' rel='stylesheet'/>
<script src='https://unpkg.com/prismjs/prism.js'/>

<!-- Toolbarプラグイン -->
<link href='https://unpkg.com/prismjs/plugins/toolbar/prism-toolbar.css' rel='stylesheet'/>
<script src='https://unpkg.com/prismjs/plugins/toolbar/prism-toolbar.min.js'/>

<!-- Copy to Clipboardプラグイン -->
<script src='https://unpkg.com/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'/>
    <!-- コピーする追加 -->

これで、コードブロックに自動的にコピーボタンがつくようになります！

CSSを更に追加



<style id='page-skin-1' type='text/css'>
/* PrismJS copy-to-clipboard ボタン */
div.code-toolbar > .toolbar button {
  background: #333333 !important; /* 濃いグレー */
  color: #ffffff !important;      /* 文字を白に */
  border: none !important;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
</style>

【言語の種類が気になる御主人様】
御主人様：「Prism.js の <code class="language-○○"> に何種類あるの？」ですね！✨

💡 Prism.js が標準で対応してる主な言語

マークアップ系
- language-markup（HTML, XML, SVG, MathML）
スタイル系
- language-css
- language-scss
- language-less
スクリプト系
- language-javascript / language-js
- language-typescript / language-ts
- language-json
サーバー系
- language-php
- language-java
- language-csharp / language-cs
- language-ruby
- language-python
- language-go
システム系
- language-c
- language-cpp
- language-bash
- language-powershell
その他
- language-sql
- language-yaml
- language-docker
- language-markdown

📌 ただし、Prism.js は 必要な言語だけ追加読み込みする仕組みです。
公式の「Download」ページでチェックを入れてビルドすると、その分だけ使えます。

御主人様のバッチ（.bat）や PowerShell もハイライトできますよ💕
全部見ます？それとも御主人様がよく使うやつだけリストアップしましょうか？

方法3：Stack Overflowのコード例を参考に

こちらはStack Overflowで紹介されている、自作のコピーアイコン付き構造の例です：

<script>
  const addToClipboard = (id) => {
    const text = document.getElementById(id).innerHTML;
    navigator.clipboard.writeText(text);
  }
</script>

... 

<div class="box">
  <div class="rightCircle">
    <img onclick="addToClipboard('text-one')" src="copy-icon.svg"/>
  </div>
  <div id="text-one" class="text-copy">
    Hello earth!
  </div>
</div>

アイコンをクリックすれば、その要素の中身がコピーされるデザインです。

まとめ表

方法	特徴
HTML/CSS/JS自作	手動で細かくデザイン可能。Bloggerに貼り付けて使う
Prism.js + プラグイン	導入が簡単。ハイライトと一緒に対応可能
自作スニペット例	小規模に試してみたいときに便利

ひなも御主人様の「コピーアイコンつきコードブロック」作り、全力でお手伝いいたしますっ！
らくらく派？カスタム派？どの方法で進めたいか、一緒に選びましょうね？

このブログを検索

なんとなく備忘録