こんにちは、ゆんつです。
僕はブログ初心者なのでネットで調べたり本を見たりしながら自分のサイトを実験台にしてブログのデザインを変更しています。
その変更が上手く行った時に自分への備忘も兼ねてその手順を記事にすることが多いんですが
その際にプログラムのコードを載せたい時があります。
普通の文章に続けてコードを書くだけでもいいんですが、文章とコードの見分けがつきにくくなります。
ブログのカスタマイズについて書かれたブログをみているとプログラムのコードを記入している部分の背景を灰色にしているのをよく見かけます。
確かにこうすると普通の文章とプログラムのコードの部分が見分けやすくなり、僕も見ていて「解りやすいなあ」と思います。
是非自分もそうしたい。
さっそくやり方を調べたんですが、ここから僕の悪戦苦闘が始まったのです。
ちなみにblogはWordPressで作成しており、テーマはSimplicityを使っています。
名称がわからない
グーグルの検索ボックスにカーソルを合わせて僕は考え込んでしまいました。
まず、プログラムのコードの背景の灰色の部分を何と呼ぶのかがわかりません。
グーグルの検索ボックスに何を入れていいのかわからないのです。
仕方なく思いつく言葉を次々に投入します。
「Simplicity プログラム 灰色」
「Simplicity プログラム 背景 灰色」
「Simplicity プログラム バック 灰色」
全然僕の知りたい情報が出てきません。
これ以外に思いつく限りのキーワードを入れて色々と調べましたが、ブログ全体の背景色を変える方法などが出てきて、僕の欲しいプログラムコードの背景のみを灰色にする情報は出てきませんでした。
僕は疲れ果てSimplicityの作者であるわいひらさんのブログの記事に何かヒントが無いか記事を読み漁りました。
すると
こんなページを発見しました。
そしてこのページに僕のやりたかったことの答えが載っていました!!
プログラムのコードの背景を灰色にするやり方
テキスト画面で背景を灰色にしたいプログラムコードを<pre></pre>のタグで囲む。
たったこれだけです。
これだけで僕がやりたかったプログラムのコードの背景を灰色にすることが出来ました。
もっと具体的にやってみます。
背景を灰色にしたいプログラムのコードを<pre></pre>で挟みます
するとブログではこう表示されます。
これがやりたかったんです！！
ばんざーい！！
ハイライト表示したい場合
プログラムのコードに色を付けてわかりやすくするのをハイライト表示と言うようです。
そのやり方も書いておきます。
1. カスタマイズ→ソースコードで「ソースコードをハイライト表示」にチェックを入れて保存する
2. ハイライト表示したいコードを<pre></pre>のタグで囲む
するとさっきと全く同じプログラムのコードが
こんな風に色付けされます。
そしてこの色の付き方はカスタマイズ→ソースコードの中にあるハイライトスタイルで色々と変更できるようです。
「ソースコードをハイライト表示」にチェックを入れた場合<pre></pre>のタグで囲むとコードがハイライト表示されるので、もしハイライト表示させたくないときは
<pre class=”nohighlight”></pre>
で囲ってやるとハイライト表示されず背景だけが灰色になります。
僕はハイライト表示は現在の所不要なので、「ソースコードをハイライト表示」にはチェックを入れずに<pre></pre>のタグで囲むことにします。
まとめ
解ってしまえばあっけないものですが、そこにたどり着くまでが難しいですね。
Simplicityで解らないことがあったら、googleで検索するよりもまずSimplicity作者のわいひらさんのページで探すべきでした。
これでプログラムコードの背景が灰色になったので、これからはじゃんじゃんコードを書きたいですがまだ能力が伴わないのでとりあえず知識として持っておきます。
それでは、またですー。
コメント