スポンサーリンク

【Cocoon】CSSを紹介したいときに、コードをそのままコピペできるよう表示する方法。

スポンサーリンク

固定ページをトップページにする方法を紹介するときに、CSSなどのコードを投稿記事内に表示したいのだが、やり方がわからない。

調べてみても、投稿記事のCSSを変更するなどのことばかりで、CSSのコードを投稿する方法が出てこずかなり手間取ってしまった。

検索する用語さえわかればいいのだが、その用語がわからないので詰んでしまっていた。なんとか、発見できたのでその方法を載せておく。

この方法であればプラグインをわざわざ入れる必要がないので良い。

ハイライト表示というらしい。

よくCSSを紹介している人が出しているコピペ可能なあのコード表示は、『ハイライト表示』というようだ。

今度からそれで検索してみることができるようになった。

『Cocoon』であれば、プラグインが不要。

デフォルトで入っているようなので、追加でプラグインを入れる必要がない。

コードを投稿する手順。

コードをコピーしよう。

自分のスタイルシートからコピーしても、他のサイトからコピーしてもいいので、まずはコピーすることが必要だ。

そのときに、自サイト内でしか使えない語句『記事IDの数字』などは違う記号などに置き換えておくと良い。

コードを変換しよう。

そのまま貼り付けすることはできないので、コードを変換する必要がある。

こちらのサイトで変換すると、下側に変換されたものが出てくるので、それをコピーし『フォーマット』→『カスタムHTML』に貼り付けすればよい。

※画像

見た目を変更しよう。

そのままだと、こんな感じのコード紹介っぽくない表示になる。

※画像

したがって、『Cocoon設定』→『コード』→『ソースコードをハイライト表示』にチェックをいれる。

※画像

すると、コード紹介っぽい表示になる。

※画像

あとがき

注意点だが、ショートコードを紹介することはできなかった。どうやら、ショートコードの方が優先されるらしく、コード自体を表示することができないようだ。何らかの方法があるみたいなので、そのうち試してみようと思う。

それを抜きにしても、CSSが投稿できるようになったので、記事の幅が広がった。これで、いろいろと試したものなども載せていくことができるようになった。

コメント

タイトルとURLをコピーしました