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

WordPressのCocoonテーマではhighlight.jsを用いて、
コードを美しく表示することができます。

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

しかし、モバイルの環境では以下のように、
常にコードにボタンが被ってしまい、よろしくありません。

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

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

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

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

まず、WordPressの管理画面にて「外観→カスタマイズ」をクリックします。

次に「追加CSS」をクリックします。

CSSに以下のコードを追加します。

/* codeのcopy to clipboardを非表示*/
.wp-block-code button {
    display: none;
}

最後に「Copy to clipboard」のボタンが消えたことを確認したら、作業は完了です。

まとめ

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

同様の現象に困っている方はご参考にしてください。