ボタン1つでブログ記事内にソースコードのハイライトを表示する方法

ワードプレスカスタマイズ方法まとめ

このページは以下の人のために役立つかと思います。主にソースコードをブログ記事内にハイライトできない、わからない人向けです。

1.プラグインなしでソースコードをワードプレスのブログ記事内に表示したいけど、HTMLの記述の仕方などがよくわからないので、困ってる。

2.プログラミングの知識がないので、ソースコードを記事内に表示する方法がわからないので困っている。

3.テキストエディタの使い方がわからない、またはまったく使用したことがないので「プラグインなし ソースコード表示」で検索してもわからない。

4.1クリックでソースコードを記事内に表示して他の人に情報をシェアする超簡単な方法を知りたい。

5.「コピペ1発」のような記事を書きたいが、ソースコードを記事内に表示するノウハウを知りたい。

という人に役立ちます。

スポンサーリンク
スポンサーリンク

プログラミングの知識不要。ブログ記事内にソースコードを簡単に表示する方法はこれ。

たぶん、みなさんこんなことをしたいんではないかと思います↓

.site-name-text-link {
   font-size: 26px;
}

んで、「コピペ1発でできる!」的な記事書きたいんですよね。

やり方は非常に簡単です。

ズバリ、

「ワードプレステンプレートテーマを変更する」

です。

ソースコードを簡単にハイライトできるブログテンプレートはこれ

私が今まで使ってきて知っている中ではDiverコクーンです。

コクーンとダイバーのソースコードハイライト表示方法

無料テンプレであるコクーンは有料並みの高機能なのに無料です。cocoonのソースコードを記事内にハイライトさせるカスタマイズ方法は以下の通りです。

コクーンのやり方

ソースコードをハイライト表示させる方法

diverのソースコードハイライトを記事内に挿入するやり方

1.まずワードプレスの記事投稿画面に「入力補助」というボタンがあるのでここをクリックします。

2.ボタンを押すと以下のように記事内をカスタマイズできるボタン一覧が表示されるので、「コード」をクリック。

3.ソースコードを記述する画面が出るので、ここにソースコードを記述して「挿入する」ボタンを押して終了。

これだけです。

ワードプレスはもうカスタマイズする時代ではなくなってきている。

カスタマイズする楽しさもあるのですが、ブログの執筆に集中したい人にとってワードプレスは書くことになかなか集中できないというケースもあります。なぜならワードプレスは自分で管理する必要があるからです。

 特にデザイン部分に関しては好みがあるので皆カスタマイズに励むのですが、最近はブロガー・アフィリエイターに必要な機能のほとんどがワードプレステーマに標準装備されているということも珍しくなくなってきたので、ダイバーやコクーンのようなWPテンプレが世界標準になっていくのではないかと思います。

他にもカスタマイズ不要でいろんなことができるので上記のダイバーは個人的にもイチオシです。

コメント