ホーム / ブログノウハウ /

【Blogger解説】COPY（コピー）ボタンを表示する方法（2023）

2023/04/01

ブログノウハウ

t f B! P L

 


この記事では、記事内に
コピーボタンを表示する方法を紹介しています
■更新履歴
・2023年4月1日…テンプレ作成

■参考元
カナリの備忘録さんのコードを参考にしました…こちら

手順

①左メニューから「テーマ」をクリックします


②カスタマイズの右にある▼から「HTMLを編集」をクリックします


③コード内を適当に一度クリックした後、
　Ctrl＋Fを押して「Serch：～」（検索窓）を出します


④「Serch：～」に以下のワードをコピペしてEnterキーで検索します

　</body> を探します

⑤以下のコードが見つかるので
　</body>の直上に貼る様にしましょう

　このコードは
　空白は何行あっても良いので、Enterキーを連打して
　どこに挿入したか分かる様にして置いた方が良いです

    <!-- コピーボタン -->
    <!-- jQuery -->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>
    
    <!-- Clipboard.js -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js'/>

    <!-- [START] Highlight.js -->
    <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/foundation.min.css' rel='stylesheet'/>
    <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js'/>
    <script>hljs.initHighlightingOnLoad();</script>
    <style>
      .hljs{
      	font-size: 15px;
        max-height:500px;
        background:#f1f8ff;
        font-family: Consolas, Menlo, sans-serif;
      }
      .code-copy{
      	position:relative;
        margin:1em 0;
      }
      pre::before {
        content: attr(title);
        line-height: 1;
        padding: .3em .5em .3em .5em;
        margin: 0 0 0 0;
        background: #f1f8ff;
        color: #000;
      	font-size: 16px;
        font-family: Consolas, Menlo, sans-serif;
      }
      .code-copy-btn{
      	position:absolute;
      	right:0;
        top:0;
        padding: .3em;
      	background:#779cff;
      	color:#fff;
        border:0;
        border-radius:5px;
      	font-size: 16px;
        font-family: Consolas, Menlo, sans-serif;
      }
      .code-copy-btn:hover{
      	cursor:pointer;
        opacity:0.9;
      }
    </style>
    <!-- [END] Highlight.js -->
  
    <!-- [START] Code Copy Button -->
    <script>
      $(function(){
        new ClipboardJS('.code-copy-btn');
      	$('.code-copy-btn').click(function(){
	      var codeText = $(this).siblings().text();
      	  $(this).attr('data-clipboard-text', codeText);
      	  $(this).text("Copied!"); //Change text
          //Restore original text after 2s
          setTimeout(function(){
            $('.code-copy-btn').text("Copy");
          },2000);
        });
      });
    </script>
    <!-- [END] Code Copy Button -->

⑥HTML生成ツールにアクセスします
　「便利ツール - HTML generator -」…（kamoshakehさん）

⇒「Code：」内に表示したい文章をコピペします
⇒「Generate」ボタンをクリックしてコードを作成します
⇒「Copy Result」ボタンをクリックします




⑦鉛筆アイコンをクリックして、
　記事を（HTML ビュー）に切り替えます


➇HTMLが"ごちゃ”っとしているので、
「HTMLの書式設定」ボタンをクリックして表示を見易くします


⑨HTML生成ツールで生成したHTMLコードを貼り付けます

⑩成功すると以下の様なコピーボタンが使える様になります

ここにコピペして貰いたいコードや文章などを
コピペします

QooQ