こんにちは けいこぶ です。
ブログの記事の中にソースコードを貼りたいときってないですか？
よく見かける黒塗りの中に書いてあるアレです。
↓ こんなやつ
/* トップページの記事一覧の大きさ調整 */
@media only screen and (min-width: 1166px) {
#main{
width: 932px;
margin: -35px;
padding: 35px;
}
}これって便利ですよね！
特にコピペできるってのがすばらしいです。ワードプレス初心者の私はかなりの頻度でお世話になっています。
ここでは、そんなこの黒塗りのソースコードを埋め込む方法をご紹介します。
■目次■
ソースコードを表示するプラグイン「Simple Code Highlighter」
黒塗りのソースコードを埋め込むためにはワードプレスのプラグインを使用します。一応、専用のプラグインを使わなくてもソースコードは埋め込むことはできるのですが…
ちょっと物足りないですよね。やはり表示するのは黒塗りのカラフルなアレがベストだと思うのです。
「Simple Code Highlighter」をインストール
まずはプラグインをインストールしましょう。
※インストール方法は知っているよ～って方はこちらを押すと飛ばせます
ワードプレスのメイン画面から「プラグイン」⇒「新規追加」と選びます。
プラグインの追加画面の右上のキーワード入力箇所に「Simple Code Highlighter」と入れましょう。
すると先頭に「Simple Code Highlighter」が表示されると思いますので「今すぐインストール」を押しましょう。
インストールが完了したら「有効化」を押しましょう。これで使用する準備は完了です。
普通に使用するとなぜか埋め込めない（バグ？）
「Simple Code Highlighter」をインストールするとソースコードを埋め込む準備ができたはずなのですが、なぜか普通に使うだけではソースコードが埋め込めません。
「Simple Code Highlighter」を適切にインストールできていれば、記事の投稿画面に「<>」のマークが表示されています。
↑ こんなやつです
「<>」を押すとInsert Code（コード埋め込み）の画面が出てきますので、ここにソースコードを書き込んで右下のInsert Codeを押します。
おそらく普通はこれでいけるはずなのです。
…………（ ＾ω＾）
画面には何も表示されません！
私だけかもしれませんが、何回やっても何も表示されないのです。
なんかしてしまった？( ＾ω＾；)
これで埋め込みましょう
謎のエラー？により私は埋め込みができなかったため、次の方法で適切に埋め込むことができました。
まずは記事投稿の表示を「ビジュアル」から「テキスト」に切り替えます。
すると「/Code Highlighter」といったマークが追加されていると思いますので、そのボタンを押します。
ボタンを押すと何やらよくわからないコードが追記されたと思います。
何やらよくわからないコードが追記されましたら「テキスト」から「ビジュアル」に切り替えます。
すると黒塗りの何かが表示されていると思いますので、その中にソースコードを書いていきましょう。
書き込んだソースコードは白色で表示されていますが、プレビューで確認してみてください。
/* トップページの記事一覧の大きさ調整 */
@media only screen and (min-width: 1166px) {
#main{
width: 932px;
margin: -35px;
padding: 35px;
}
}プレビューならしっかりとカラフルに色塗りされていると思います。
これで完成です！(＾ω＾≡＾ω＾)
まとめ
ソースコードを埋め込むプラグインはいろいろありますが、私は「Simple Code Highlighter」をオススメしたいです。
理由はプラグインの名前にもありますがシンプルだからです。
他のプラグインですとコードの行番号などを表示してくれるのですが、私にはそんな行番号を指定して解説するほどの高度な知識もなければコードも書けません。
初心者の私には「Simple Code Highlighter」で十分です！
ワードプレスのプラグインって、プログラミング初心者の私でもそれっぽいコードを表示できるすばらしいアイテムですね！