せいかつブログ

【Cocoon】ブログにHTML/CSSのソースコードを載せる方法

この記事は約3分で読めます。

こんにちは、まちゃりさです。

記事の中にソースコードを記載したいな・・

黒い背景で表示されるソースコードを見るけど、同じようにできるかな?

今回は、ブログ記事の中でたまに見かけるソースコード(以下イメージ)

記事の中のソースコード

このような黒い背景にソースコードが書かれているもの。

私は、過去にどう表示すればいいの?と悩みましたので、今回ご紹介することにします。

「ブログにソースコードを載せたい」という方は、本記事をぜひ参考にしてください。

※本記事は、WordPressテーマの「Cocoon」を使用している方向けです。

それでは、どうぞ!

スポンサーリンク

ソースコードの表示設定

ソースコードの表示は、Cocoon設定で簡単にできちゃいます。

ワードプレス管理画面→[Cocoon設定]→[コード]と進みます。

[Cocoon設定]→[コード]

ハイライト表示の「ソースコードをハイライト表示」にチェックを入れます。

「ソースコードをハイライト表示」にチェック

行番号表示」にチェックを入れると、ソースコードの左側に番号を表示することができます。

行番号表示

コードのボリューム感がわかるので、私は表示させています。

お好みで設定しましょう。

続いて、「ハイライトスタイル」で好きなスタイルを選びます。

見え方は、highlight.js demoで確認できます。デザインはお好みで設定しましょう。

「ハイライトスタイル」で好きなスタイルを選ぶ

最後に、[変更をまとめて保存]をクリックして完了です。

ちなみに私は、「Atom One Light」というのを使用しています。(2021年4月現在)

 

ブログ記事でHTML/CSSのソースコードを載せる方法

それでは、実際に記事内にソースコードを挿入していきます。

「+」マーク(ブロックの追加)を押して「コード」を選択します。

「コード」を選択

右側の「ブロック」タブにある「言語選択」から、入力した言語を選択します。

右側に「ブロック」タブが表示されていないときは・・

ブロックを選択した状態で(1)、歯車のマークをクリックする(2)と、表示されます。

右側に「ブロック」タブが表示されていないとき

 

おまけ:コピーボタン機能

最近発見したことです。

使用するスキンによっては、ソースコードをコピーできるボタンが表示されます。

私はCocoonのスキン「シルク」を使用していますが、「コード」ブロックをクリックすると、右上にボタンが表示されます。

ソースコードをコピーできるボタン

ここから、読者にコードをコピーしてもらうことができます。

長いコードをコピーするには大変かなと思っていまして、便利で気に入っている機能です。

どのスキンに機能がついてるかまでは、まだ把握できていませんが、スキンを選ぶときの1つの目安に使われてもいいかもしれません。

まとめ:CocoonでブログにHTML/CSSのソースコードを載せる!

それでは、最後にまとめます。

HTML/CSSのソースコードをブログに記載したい場合、Cocoonの設定から[コード]を設定します。

すると、黒い背景にソースコードが書かれている表示(「シンタックスハイライト」)を再現できるようになります。

とても、簡単ですね。

ブログ記事でソースコードを書きたいと思ったときは、ぜひ参考にしてください。

 

それでは、今回はこの辺で。

最後までお読みいただき、ありがとうございました!

おわり。

Cocoonについてのおすすめ記事

【Cocoon】簡単!サイト型トップページの作り方(図解付き)
【Cocoon】モバイル(スマホ)用のグローバルナビメニューを設定する方法
【Cocoon】簡単!吹き出しの基本的な使い方
【Cocoon】グローバルメニューのカスタマイズ方法
【Cocoon】ヘッダーにグローバルメニューを表示させる方法

コメント

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