【ワードプレス】デフォルトでソースコードを見やすく表示する方法

どうも、ブログ運営者のポチ（@sunrise_033）です。

ワードプレスでブログカスタマイズ系の記事を書いていて、ソースコードを記入することありませんか？

うさぎ

ソースコードをエディタに普通に書いてもPC表示なら問題ないけど、スマホ表示になると見づらくなる。。

そんなことってありますよね？

実はワードプレスのデフォルト設定でソースコードを見やすく表示することができるんです。

ソースコードを見やすく表示することで、読者がスマホで見やすくなり、コピペも快適にできます。

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

記事内でソースコードを見やすく表示する方法

では詳しく見ていきましょう。

ポチ

今回はクラシックエディタでの手順を紹介します。

手順は下記になります↓

↑ダッシュボードから「投稿」を選択します。

↑編集する記事を選択します。

↑ビジュアルから上にある「挿入」を選択

↑「Code sample」を選択

↑言語を選択して、ソースコードを入力します。

最後に「OK」を選択して完了です。

ポチ

この流れで簡単に作ることが出来ます。

体感的には入力するソースコードが出来ていれば1分もかかりません。

まとめ

ワードプレスのデフォルト設定でソースコードを見やすく表示する方法でした。

ブログカスタマイズの記事で頻繁に使うソースコード。

見やすく表示できる方法を知っておくとスムーズに記事を書く事ができるので便利ですよ。

それにしてもワードプレスは本当に使いやすくてブログ作業が快適にできますよね。

実際に私は「はてなブログ」からワードプレスに引っ越した身なので、それを強く実感しています( ´ ▽ ` )

最後まで読んでいただき、ありがとうございました。

あわせて読みたい

【WordPress】行間幅・改行幅を広げるやり方【CSSコードで簡単】 そんな悩みにお答えします。 この記事では「WordPress」テーマJINで文章の『行間幅』・『改行幅』を広げるやり方を画像付きで解説していきます。 .entry-content p {lin...

ポチ

この記事が良いと思ったら、ポチっ！してくれると嬉しいです！