「Copy to clipboard」のボタンを非表示にする方法 | Cocoonテーマ / WordPress

「Copy to clipboard」のボタンを非表示にする方法 | Cocoon / WordPress
WordPressのCocoonテーマではhighlight.jsを用いて、
コードを美しく表示することができます。

highlight.jsを利用すると、
マウスをコード要素の上に持っていったときに、
コード要素の右上に「Copy to clipboard」のボタンが出現し、
これをクリックするとコード全体をクリップボードにコピーでき便利です。

しかし、モバイルの環境では以下のように、
常にコードにボタンが被ってしまい、よろしくありません。
Cocoonテーマをモバイルで見たときの「Copy to clipboard」のボタン
モバイル環境でもコード要素をフォーカスしたときのみ、
「Copy to clipboard」のボタンが表示されれば良かったのですが、
そのような方法は見つかりませんでした。

そこで、私は「Copy to clipboard」のボタンを非表示にして対応をしました。
(PC環境で全体コピーをするのはそこまで大変ではないので、消してしまって良いかと考えました)
スポンサーリンク

「Copy to clipboard」のボタンを非表示にする方法

「Copy to clipboard」のボタンを非表示にする方法を紹介します。

まず、WordPressの管理画面にて「外観→カスタマイズ」をクリックします。
「Copy to clipboard」のボタンを非表示にする方法
次に「追加CSS」をクリックします。
「Copy to clipboard」のボタンを非表示にする方法
CSSに以下のコードを追加します。
/* codeのcopy to clipboardを非表示*/
.wp-block-code button {
    display: none;
}
最後に「Copy to clipboard」のボタンが消えたことを確認したら、作業は完了です。
「Copy to clipboard」のボタンが消えた図

まとめ

この記事ではCocoonテーマにおいて、「Copy to clipboard」のボタンを非表示にする方法を紹介しました。

同様の現象に困っている方はご参考にしてください。
タイトルとURLをコピーしました