【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

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

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

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

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

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

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

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

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

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

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

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

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

手順は下記になります↓

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

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

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

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

↑「Code sample」を選択

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

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

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

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

まとめ

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

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

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

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

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

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

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

 

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

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

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

独自の高速化技術と高セキュリティで、ブログの読み込み速度と安全性を最大限に保ちます。

月額900円から利用できる高コスパのレンタルサーバーです。

\ 今すぐ無料お試し!/

コメント

コメントする

目次