ブログにHTMLやCSSをキレイに表示する方法【ソースコードを載せる】

ソースコードをキレイに載せる方法【2020年4月12日更新】

ブログをしていると今回の記事のようにソースコードをブログに載せたいと思うときがあります。

今回の記事は、ブログにHTMLやCSSをキレイに表示するおすすめの方法をまとめました。

【本記事の特徴】

○ブログにHTMLやCSSなどをキレイに載せる方法がわかる。

○ソースコードを載せる基本的な知識がつく。

○おすすめのWPプラグインがわかる。

今回の記事は5分で理解できるよ!

エスケープする必要がある文字を理解する

エスケープ(英語: escape)は、「逃亡する」、「脱出する」、監禁・拘束・危険・災難などから「のがれる」ことを意味します。

基本的なアルファベットはそのままの入力で足りますが、いわゆる「記号」が対象になっています。よく使われる文字は以下の通り。

表示した時入力した時
<&lt;
>&gt;
&&amp;
&quot;

ワードプレスなどでHTMLに修正を加えて表示させたときに、なぜか『<』などが一緒に表示されるということがあります。

その場合、ソースコードを見直して、上の表の文字列がソースコードに入っていないか確認してください。その文字列を消すと解決します。

よく他のサイトからHTMLなどのコードをコピペしたときに『<』などの記号が一緒に付いてくることがあるんだ。

ソースコードを表示させるための『タグ』

ブログなどにソースコードを表示させたいときに使う『タグ』を簡単に説明していきます。

<code>要素

<code>要素は、これはソースコードですよとブラウザに認識させるための「タグ」です。

<pre>要素

<pre>要素は、空白などもそのまま表示させるための「タグ」です。ソースコードにある空白や改行もしっかりと反映させたい場合は、この<pre>を使います。

この2つを組み合わせたコードは以下の通り。

<pre>
 <code>
  ここにソースコードを記述します
 </code>
</pre>

ソースコードを表示させるおすすめのWPプラグイン

上記まではあくまでソースコードを表示させるための知識でした。

上記のコードでソースコードを表示すると表示はされるものの、デザインが味気ないモノになってしまいます。

そこでソースコードを表示させるおすすめのWPプラグインを紹介します。

Highlighting Code Block

以下のようなデザインになります。

<pre>
 <code>
  ここにソースコードを記述します
 </code>
</pre>

僕はこのプラグインを使っているんだ。更新もちゃんとされていて、デザインも悪くないと思うな!

Crayon Syntax Highlighter

ソースコードを表示させるWPプラグインで一番人気のあります。

しかし、約4年間、WPプラグインの更新がないことがきになります。WordPressのテーマによっては使えないこともあります。

以下、サンプルを載せます。

Classicテーマ

NETAONE参照

Twilightテーマ

NETAONE参照

これら以外にも豊富なテーマが用意されています。

まとめ

今回の記事では、ブログなどにソースコードをキレイに表示させる方法をまとめました。

webデザインにも大きく係わってきますので、ソースコードを表示させたい場合は参考にしてください。


コメントを残す

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