ワードプレスの記事にHTMLコードを表示させる方法→グーテンベルグ対応

記事内に広告が含まれています。

ワードプレスの記事にHTMLコードをそのまま表示させる方法です。

↓こんな感じのことが出来ます↓

実際の画像

「直接書き込むとHTMLに変換されて表示されてしまう・表示されない」などで困っているなら本記事のやり方ですぐに解決しまよ。

うちやま
うちやま

すぐに出来るので試してみてね。

スポンサーリンク

ワードプレスで作った記事(グーテンベルグ)にHTMLコードをそのまま表示させる方法

「コード」ブロックを使えばOK

コード

記事作成画面で「ブロックの追加」をクリック。

コード」を選択します。

うちやま
うちやま

コードのブロックがすぎに表示されない場合は「ブロックの検索」で「コード」と打ち込めばすぐに表示されますよ。

「ソースコード」ブロックが表示されるので、記述したいHTMLコードを「コード」コードブロックエリア内で文字化したいhtmlタグを記述します。

コードの記入例

実際にアップした画面で比較。

実際の画面

以下が実際のサンプル例です。

<h2>ワードプレスで作った記事(グーテンベルグ)にHTMLコードを表示させる方法</h2>
うちやま
うちやま

HTMLコードだけでなく、CSSの記述もできます。

Crayon Syntax Highlighterが無くてもOK

グーテンベルグ(以下、グーテンベルグ)以前の環境では「Crayon Syntax Highlighter」というプラグインを使用しなければコードの文字表示化が出来ませんでした。

ですが、グーテンベルグからはデフォルトの設定からコードの表示が出来るようになり、プラグインを導入する必要が無くなりました。

プラグインは便利である一方で、導入するとサイトが遅くなる・モノによってはセキュリティの問題がある、等の懸念材料もあります。

よって、プラグイン無しで対応できる強になったことはサイト運営者側としては非常に嬉しい限りです。

まとめ

サイトで情報発信をする際、特にサイト運営に関わる情報を発信する方は実例の解説としてソースコードを見せながら記事作成した方が良いことが多いです。

該当するテーマのサイト運営を行われる際はソースブロックを活用してみてくださいね。

この機体の開発者
スミ入れがんばる
うちやま(内山智明)

新卒で入社したブラック企業で月の残業168時間、気合努力根性の精神論だけで詰められ、簡単に辞めさせてくれない毎日を過ごして退職するまでに苦労した経験がある。現在は株式会社BuildingBlockの代表となり、自身の経験を元に、会社を辞めたいのに辞められない・辞めると言い出しにくい人向けに退職や辞め方に関する情報発信を行う

うちやま(内山智明)をフォローする

お役立ち資料ダウンロード

びるぶろでは、ブログ運用に役立つ資料をご用意しています。

無料でダウンロードいただけますので、ぜひご活用ください。

>>お役立ち資料を見てみる

資料ダウンロードバナー

|д゚) ココノソンザイニキヅイチャッタ??
ブログ運営でかゆいところに手が届くびるぶろのメルマガ

SEOと猫とガンプラが好きな人が書いてるメールマガジン。以下に反応しちゃう人が読むと面白いと思うよ。

  • 月に10万PVぐらいはやってみたい
  • 上位表示できるキーワード選定を知りたい
  • クリック数を改善したい
  • CVRやCTRを上げたい
  • 私も猫が好きだよって方も是非!
ワードプレスの運用
スポンサーリンク
スポンサーリンク
\ 別部隊の仲間たちにも伝える /
びるぶろ