no-repeat;cursor:pointer}.broken_link,a.broken_link{text-decoration:line-through}こんぷれHOMEプロフィールお問い合わせホームブログ関連ブログでプログラムを書いたときにコードの背景を灰色にしたいブログ関連TwitterFacebookはてブPocket2017.10.21こんにちは、ゆんつです。僕はブログ初心者なのでネットで調べたり本を見たりしながら自分のサイトを実験台にしてブログのデザインを変更しています。その変更が上手く行った時に自分への備忘も兼ねてその手順を記事にすることが多いんですがその際にプログラムのコードを載せたい時があります。普通の文章に続けてコードを書くだけでもいいんですが、文章とコードの見分けがつきにくくなります。ブログのカスタマイズについて書かれたブログをみているとプログラムのコードを記入している部分の背景を灰色にしているのをよく見かけます。確かにこうすると普通の文章とプログラムのコードの部分が見分けやすくなり、僕も見ていて「解りやすいなあ」と思います。やり方を調べたんですが、ここから僕の悪戦苦闘が始まったのです。ちなみにblogはWordPressで作成しており、テーマはSimplicityを使っています。ハイライト表示したいコードを<pre></pre>のタグで囲むまとめ名称がわからないグーグルの検索ボックスにカーソルを合わせて僕は考え込んでしまいました。プログラムのコードの背景の灰色の部分を何と呼ぶのかがわかりません。グーグルの検索ボックスに何を入れていいのかわからないのです。仕方なく思いつく言葉を次々に投入します。僕の知りたい情報が出てきません。これ以外に思いつく限りのキーワードを入れて色々と調べましたが、ブログ全体の背景色を変える方法などが出てきて、僕の欲しいプログラムコードの背景のみを灰色にする情報は出てきませんでした。僕は疲れ果てSimplicityの作者であるわいひらさんのブログの記事に何かヒントが無いか記事を読み漁りました。するとSimplicityでソースコードをハイライト表示する方法こんなページを発見しました。このページに僕のやりたかったことの答えが載っていました!!プログラムのコードの背景を灰色にするやり方テキスト画面で背景を灰色にしたいプログラムコードを<pre></pre>のタグで囲む。これだけで僕がやりたかったプログラムのコードの背景を灰色にすることが出来ました。具体的にやってみます。背景を灰色にしたいプログラムのコードを<pre></pre>で挟みますするとブログではこう表示されます。これがやりたかったんです!!ばんざーい!!ハイライト表示したい場合プログラムのコードに色を付けてわかりやすくするのをハイライト表示と言うようです。そのやり方も書いておきます。ハイライト表示したいコードを<pre></pre>のタグで囲むするとさっきと全く同じプログラムのコードがこんな風に色付けされます。この色の付き方はカスタマイズ→ソースコードの中にあるハイライトスタイルで色々と変更できるようです。class=”nohighlight”></pre>で囲ってやるとハイライト表示されず背景だけが灰色になります。僕はハイライト表示は現在の所不要なので、「ソースコードをハイライト表示」にはチェックを入れずに<pre></pre>のタグで囲むことにします。まとめ解ってしまえばあっけないものですが、そこにたどり着くまでが難しいですね。Simplicityで解らないことがあったら、googleで検索するよりもまずSimplicity作者のわいひらさんのページで探すべきでした。これでプログラムコードの背景が灰色になったので、これからはじゃんじゃんコードを書きたいですがまだ能力が伴わないのでとりあえず知識として持っておきます。それでは、またですー。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。プロフィールこっそりゆんつ山口県在住です。Reserved.メニューHOMEプロフィールお問い合わせホーム検索トップサイドバープロフィールこっそりゆんつ山口県在住です。(17)エックスサーバーで。