【Ｍanablog Copy】ソースコードをカッコよく表示する方法【無料ツールで高速化】
Manablog Copyを使うブロガー「ソースコードをそのまま表示したいなぁ。」
このような悩みに答えます。
ブログ記事内で、ソースコードを表示する場合は、ソースコードを変換する必要があります。
具体的には、ソースコードをそのまま表示したい場合、HTMLのタグ内で使われている文字(<、>、&、“ 等)を［ < ］［ > ］［ & ］［ " ］といった文字実体参照記号へ変換します。
- ［ < ］→［ < ］
- ［ > ］→［ > ］
- ［ & ］→［ & ］
- ［ " ］→ ［ " ］
ただ上記の変換は手動でやろうとすると、正直すごく大変です。
そこで、この記事では”無料変換ツール”を使い、高速で記事内にソースコードを表示する方法を伝えたいと思います。
それではよろしくお願いします。
この記事を読んでわかること
- ソースコードをそのまま記事で表示する方法
記事の内容
記事内でソースコードをそのまま表示する方法
Manablog Copyを使っているブロガーの人が、記事内でそのままソースコードを表示するには、次の流れで作業をします。
- ①ソースコードをコピー
- ②無料変換ツール内にペースト
- ③変換後のソースコードを記事内にコピペ
- ④AddQuicktagで「Programming」タグをつける。
1分もあればいけるので、忘れないうちにやっておきましょう。
今回は以下の「参考記事」のボックスを出すソースコードを紹介します。(今は僕のプロフィールページに飛ぶようにリンクを貼っています。)
参考記事ツッキーのプロフィール
ソースコードは以下
<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #00CC00;border-radius: 2px;padding: 8px 8px 7px;">参考記事</span><a href="記事のリンク" rel="noopener" target="_blank">記事名</a></p>
これを無料ツールの以下の箇所にペースト→変換をクリックします。
»無料ツール「HTMLタグ文字実体参照(文字参照)変換ツール」はこちらより
そうすると、変換後のソースコードが出力されます。
<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #00CC00;border-radius: 2px;padding: 8px 8px 7px;">参考記事</span><a href="記事のリンク" rel="noopener" target="_blank">記事名</a></p>あとは、このソースコードを記事にコピペすればオッケーです。
Manablog Copyの場合、AddQuicktagというプラグインを使っていれば、ソースコードをカッコよく表示する「Programming」タグがあり、使用すると以下のようになります。
<p style="margin-bottom: 10px;"><span style="font-size: 14px;color: #fff;margin-right: 10px;background-color: #00CC00;border-radius: 2px;padding: 8px 8px 7px;">参考記事</span><a href="記事のリンク" rel="noopener" target="_blank">記事名</a></p>これでソースコードをそのまま表示させることができますし、面倒な変換作業からも解放されます。
ということで今回の内容は以上です。
今回の記事がManablog Copyを使う仲間の参考になれば嬉しいです。
※まだManablog Copyを使っていない人は以下の記事を参考にどうぞ。
初心者でもManablog Copyにテーマ切替を決意できた理由【購入手順付き】
僕はこれまで使っていた無料テーマCocoonからマナブログコピー(Manablog Copy)へのテーマの移行を決意しました。その記事ではこれまで有料テーマの購入を躊躇していたツッキーがマナブログコピーの購入を決意できた理由を記します。有料テーマにしようか迷っている・検討している方の参考になれば最高だなぁ
コメント、質問がある場合はツイッターでメッセージを頂くか、問い合わせからコメントを頂ければ、返信させていただきます。よろしくお願いします。