私はWordPressを使用してブログを運営していますが、公開した記事に「おうちでVBAを勉強 Microsoft OfficeなしでVBAをやってみる」というものがあります。
内容はLibreOfficeの表計算ソフトウェアであるCalcでVBAの動作方法を紹介したものになりますが、この記事の中にVBAのソースコードを記載しています。
例えば、以下のソースコードを記事に記載していましたが、記事を公開した当初は
Option VBASupport 1
という表示になっていました。
上記表示の場合、記事で採用されているフォントが異なることが一般的であり、そのままコピペができない可能性があります（使用しているエディタによってはできるかもしれません・・・）。
Option VBASupport 1そのため、記事を修正し上記のように表示されるように変更しました。
上記のように表示できれば、コピペをすることができました。
ここでは、ブログ記事にソースコードを表示させる方法について紹介させていただきます。
コピペ可能な表示ならプラグインは不要
コピペ可能なソースコードを表示させるだけなら、WordPressのプラグインを使用することなく以下のように記載することで実現することができます。
<pre><code>～</code></pre>～の部分にソースコードを記載します。
私自身、HTMLをほぼ理解していませんが、上記のように記載をすればコピペ可能なソースコード表示ができました。
ぺらラボさんの記事を参考にさせていただきました。
具体的な記載方法について
上記のように私はWordPressでブログ運営をしていますが、「Open Live Writer」というWindows10で動作するソフトウェアを使ってブログ記事の下書きを行っています。
Open Live WriterはWordPressを立ち上げることなくオフラインでブログ記事を作成することができ、記事を下書きとしてWordPressに送信することができ、重宝しています。
WordPress上だけでなく、Open Live Writerで下書きを書いているときに記載できないかを試しにやってみました。
Open Live Writerでの記載方法について
Open Live Writerを起動すると、上記画像のような画面が出ます。
起動時は、編集タブで立ち上がります。
この編集タブで文章を書いたり画像を挿入したりすることができます。
しかし、ここでは<pre><code>～</code></pre>を入力しても表示は変わりません。
<pre><code>～</code></pre>をOpen Live Writerで記載し、記事公開後に所望通りに表示させるには、ソースタブを選択して、ここに記載する必要があります。
ただし、このソースタブ・・・かなりやっかいで実際に文章を書いていくと下の画像のように表示されます。
見ていただいてもわかるように改行が全くされない状態で表記されてしまっています。
凄くやりづらそうですが、以下のように行えば案外スムーズに対応できます。
- 編集タブで必要な文章の記入や画像の挿入を行う
- ソースコードを表示させたい段落に来たらソースタブに切り替えて<pre><code>～</code></pre>を記入する
- 改行して何等かの文章を記入する
- 編集タブに戻り文章の記入や画像の挿入の作業に戻る
改行して文章を入れないと編集タブの一番下の行に赤枠のソースコード表記枠が来てしまい、文章の記入や画像の挿入の作業ができなくなりますので、必ず上記3を行うようにしてください。
ソースコード表記枠は以下のように操作することができます。
- ソースコード表記枠の中をダブルクリックすれば直接編集することができ、ソースコードを記入することが可能
- ソースコード表記枠をダブルクリックしてドラッグ＆ドロップをすることで編集タブ内を移動させることが可能（ただし改行すると上手くいかないときがあります）
- ソースコード表記枠は編集タブ上でコピーすることができる
ソースタブで<pre><code></code></pre>と記入すると以下のようにソースコード表記枠が表示されます。
ソースコード表記枠にソースコードを記入し、WordPressに下書きとして投稿後、プレビューを見るとちゃんと表示されることを確認できました。
Open Live Writerでソースタブで<pre><code></code></pre>を記入して、編集タブでソースコード表記枠が表示されれば、ブログ記事でもコピペ可能な表示になることを確認できました。
WordPressでの記載方法について
WordPressで行う場合、「投稿の編集」で、上の画像の赤枠部分をクリックします。ここからHTMLを挿入することができます。
<pre><code>～</code></pre>を記入します。～の部分には表示したいソースコードを記入します。ここでは「Option VBASupport 1」を記入しています。
上の赤枠はHTMLの挿入で<pre><code></code></pre>を入れていない場合、下の赤枠はHTMLの挿入で<pre><code></code></pre>を入れた場合の記事本文の表示になります。
上の画像がプレビューして表示された結果になります。
当然といえば当然ですが、WordPressの「投稿の編集」でもソースコードのコピペ表示ができました。
まとめ
ブログ記事にソースコードを表示させる方法について紹介させていただきました。
多少の手間はありますが、Open Live Writerでもコピペ可能なソースコード表示を記載することができるためオフラインでのブログ記事の下書きのできる領域が広がったと思います。
この記事を最後までお読みいただきありがとうございました。少しでも参考になれば幸いです。
