副業・ブログ

【JIN】プラグイン無し!!『 ソースコード(プログラムコード)』を記事内に表示させる方法

ソースコードを記事内に表示させる方法_アイキャッチ

今回は有料テーマである【JIN】で、記事内に『ソースコードプログラムコード』を表記させる方法をご紹介します。

ソースコードというのは以下のようなものです。

/*ブログカードのタイトルをリンク色に変更*/
.blog-card-title {
		color: #0003ea;
		text-decoration: underline;
	}

「CSS」や「HTML」「JavaScript」を記事内で紹介したいときに使用すると便利です。

りりまん

プラグインや変換サイトを利用する方法もあるけど、なにも使わないのが1番楽で速いよ!!

「シンタックスハイライター機能」を使う

【JIN】には「シンタックスハイライター機能」というものがあります。

難しく考える必要はなく、冒頭で記載したソースコードを貼る機能と思っていただければ良いです。

JIN公式ページで紹介している方法を、より細かくわかりやすく記載していきます。

設定方法

設定方法は凄く簡単で、以下の3ステップです。

  1. Word press〔外観〕⇒〔カスタマイズ〕をクリック
  2. 〔その他の設定〕をクリック
  3. 〔コードのシンタックスハイライターを利用する〕にチェックを入れる

画像付きで説明していきます。

Word press〔外観〕⇒〔カスタマイズ〕をクリック

まず、Word pressのダッシュボードから〔外観〕⇒〔カスタマイズ〕をクリックします。

Wordpress_外観カスタマイズ

〔その他の設定〕をクリック

次に〔その他の設定〕をクリックします。

Wordpress_外観カスタマイズ(詳細)

〔コードのシンタックスハイライターを利用する〕にチェックを入れる

最後に〔コードのシンタックスハイライターを利用する〕にチェックを入れたら設定は完了です。

JIN_コードシンタックスハイライター

使用方法

あとはビジュアルエディター上にアイコンが表示されるので、〔コードサンプルを挿入/編集〕をクリックします。

ビジュアルエディター_説明画面

CSSを記載したい場合は赤枠部のプルダウンより選択し、青枠部に記載したいコードを入力します。

コードの表記方法は以上です。

上記は「クラシックエディタ」での使用方法であったため、次項で「ブロックエディタ」での使用方法を簡単に説明します。

ビジュアルエディター_コードサンプル挿入画面

ビジュアルエディター上で「ツールバー」が閉じている場合もあるので、その際は「ツールバーの切り替え」をクリックしてみてください

ブロックエディタ(Gutenberg)の場合

上記で説明した内容及び、JIN公式ではクラシックエディタでの操作方法を記載しています。

ブロックエディタ(Gutenberg)での操作方法もほとんど同じなのですが、合わせて説明します。

設定方法

まず、設定方法はクラシックエディタと同じですので、上記で説明した手順で設定してください。

  1. Word press〔外観〕⇒〔カスタマイズ〕をクリック
  2. 〔その他の設定〕をクリック
  3. 〔コードのシンタックスハイライターを利用する〕にチェックを入れる

使用方法

ブロックエディタ(Gutenberg)特有の操作はこの分だけです。

画面左上のプラスマークをクリックし、〔クラシック〕を選択します。

ブロックエディター_説明画面

後は先ほど説明した通り〔コードサンプルを挿入/編集〕をクリックし、赤枠部のプルダウンより選択し、青枠部に記載したいコードを入力します。

ブロックエディター_コードサンプル挿入画面

最後に

有料テーマ(JIN以外も)では、意外と知らない機能がたくさんあります。

それは「探しながら」「研究しながら」分かりやすい記事を書くのはブログ運営の醍醐味ですよね!

ブログ運営に関わる内容は「0からのブログ運営」で全て公開しているので、お時間がある際に見てみてください。

では、また!!

ブログのノウハウ_アイキャッチ
【完全保存版】ブログのノウハウを全て公開|初心者のためのブログ運営!! 2021年5月22日:初版発行2021年6月30日:記事追加(6記事追加) 2021年2月10日よりブログを開始し、...

にほんブログ村 にほんブログ村へ

関連記事はこちら!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA