ワードプレス

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

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

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

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

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

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

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

この記事の信用性

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。

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

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

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

手順は下記になります↓

「ダッシュボード」→「投稿」→記事を選択→ビジュアルエディタから上にある「挿入」を選択→「Code sample」→「言語」を選択→ソースコードを入力→OKで完了

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

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

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

↑「Code sample」を選択

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

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

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

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

まとめ

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

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

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

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

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

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

【WordPress】行間幅・改行幅を広げるやり方【CSSコードで簡単】ワードプレスで記事を書いているんだけど、文章の改行の幅が狭いから広くて見えにくいなぁ。改行スペースを広くする方法ないかな?そんな悩みにお答えします。...

 

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


↓「ブログ村ランキング」参加中!

PVアクセスランキング にほんブログ村

COMMENT

メールアドレスが公開されることはありません。