Evolved」やっとこブログ6年前WordPressでブログを書いていると、HTMLやCSSなどのコードを記載して説明などすることがあります。そのままブログ感覚でコードを書くと、コードに反応して正しく記載されなかったりしますよね。Evolved」をご紹介します。Evolved」を実際に使用したイメージです。ブログでよく見ると思います。背景が黒でコードが記載されているやつです。Evolved」は細かい設定も可能ですし、シンプルで使いやすいです。カラーも8種類あるので、コードの表示デザインを、ブログに合わせてカスタマイズすることが可能です。Evolved」をインストールして設定してみましょう。新規追加」をクリックします。Evolved」が表示されるので、「今すぐインストール」をクリックします。これでインストール完了です。次は設定をしていきましょう。Evolved」では、「コードボックスのカラー」や「行番号の表示」「折り返しの有無」などを設定することが可能です。設定していきましょう。インストール済みプラグイン」をクリックします。Evolved」を探して、「設定」をクリックします。Evolved」の設定画面が開きます。ここで設定していきます。他」の説明をしていきます。2-1.SyntaxHighlighterのバージョン「SyntaxHighlighterのバージョン」では「バージョン3」か「バージョン2」を選択します。どちらもちゃんとコードを表示してくれるのですが、コードが長くなった場合に表示方法やツールバーの表示に少し違いがあります。バージョン3「バージョン3」はコードが長くなった場合、下図のように端で折り返さずに横スクロールバーが表示されます。その他には、コード内でダブルクリックするとコード全体が選択されるので、コピペするときには便利です。コピーしたい部分だけを選択することも簡単にできます。バージョン2「バージョン2」の場合は、コードが長くなった場合、下図のように端で折り返されて表示されます。横スクロールバーが表示されないので、スクロールしなくても全体を見ることができます。設定で折り返しなしにもできます。「バージョン2」の場合はダブルクリックしてもコード全体は選択されません。そのかわりマウスポインタをコードの上に重ねると、下図のようなツールボックスが表示されます。この左の<>のようなマークをクリックすると、ポップアップ画面でコードが表示されます。あとは好みの問題なので、どちらでもお好きな方を選んでください。個人的には「バージョン3」の方が良いかな思います。最近はスマートフォン使用率が増加してきているので、レスポンシブ対応のサイトが増えてきているというか、レスポンシブ対応で当たり前くらいになっているからです。スマートフォンでコードを見た場合、端で折り返されていると画面がコードだらけで訳が分からなくなると思います。横スクロールバーなら、スライドすれば見れますから、無駄に縦に長いコード表示になりません。パソコンでもスマートフォンでも見やすいブログになるはずです。2-2.テーマ「テーマ」はコードを表示する部分の、背景色やカラーを変更することができます。テーマは下記の8種類から選びます。GreyMidnightRdarkなしそれぞれどんなカラーなのか比べてみましょう結構微妙な違いな部分もありますが、カラーをこれだけ選べるのはうれしいです。自分のブログによって合うカラー合わないカラーがありますからね。コアラ自分のブログに合わせて選んでくれよな2-3.すべてのブラシを読み込む「preタグ」を直接使用したい時にチェックを入れるようです。「preタグ」はコードやテキスト等をそのまま表示するタグです。スペースや改行もそのまま表示されます。Evolved」で、「html」「css」「php」のコードをそのままキレイに表示できるので、「pre」を使用することは基本ないはずですので、チェックを入れる必要はないと思います。「規定の設定/一般」では、「行番号の表示」や「コードボックスを最初の開閉」などをチェックボックスにチェックをつけることで設定可能な部分です。行番号を表示するコードボックスの左に行番号を表示するか表示しないかを選択します。下図のようなイメージになります。ツールバーを表示するチェックを入れると、「バージョン2」の場合、右上にツールボックスが表示されるようになります。「バージョン3」の場合コードボックスの右上に「Syについて」というリンクが表示されるようになります。クリックすると「SyntaxHighlighterのバージョン」や「サイトへのリンク」がポップアップで表示されます。「バージョン2」は好みでチェック入れてください。「バージョン3」の場合は、正直チェック入れないくて良いと思います。自動リンクを有効にするチェックを入れると、コードに入力してあるURLに自動でリンクが付きます。コード内のURLをクリックするとリンク先に飛びます。チェックを外すと、リンクはされませんので、URLをクリックしてもリンク先には飛ばなくなります。コードボックスの表示を閉じておく初期状態では最初からコードボックスが開いていますが、チェックを入れるとコードボックスが閉じて、クリックすると表示されるようになります。下図のようなイメージです。コードを見るために「クリックをする」という、ユーザーがおこなうアクションがひとつ増えます。そのかわりに見る必要のないコードが視界に入ることもなく、ブログ自体もスッキリとした表示になります。軽い表示モードを使うチェックを入れると、行番号とツールバーが削除されて表示されます。見た目的にはそれだけの変化しかないです。Evolved」のコードボックスでも使えるってことなんでしょうか?変更していろいろ試してみましたけど、何も変化がなかったので良く分かりません。チェック入れなくて良いと思います。長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)こちらは「バージョン2」のみに有効な項目です。チェックを入れるとコードが長くなったときに端で折り返し表示をします。チェックをはずすと、端で折り返しされずに、横スクロールバーが表示されます。「規定の設定/一般」以外の設定部分です。細かい部分の設定になりますので、普通に使う分にはこの部分の設定は変更しなくても大丈夫です。追加のCSSのclass名(複数可能)ボックスのdivタグにclassを指定できます。試しに「test」というcssを追加してみると下記のようなイメージです。一応一番上の階層に追加されています。何か微調整するときなどにcssを追加するんでしょうか。ブログではcss追加はせずに使っています。行番号の開始コードボックスの左側の行番号の開始番号を設定します。...」といった感じですが、下記のように設定した番号からはじまります。実際に「3」に設定した場合は下図のようなイメージになります。行番号の桁数を指定できます。コードボックスの左側の番号が下記のように変化します。実際に「4」に設定した場合は、下図のようなイメージになります。タブのサイズコードを入力するとき、余白をつくって段階表示にするのが普通なのですが、その白の長さを指定できます。初期設定で「4」に設定されていると思いますが、見やすいです。こだわりがなければ変更しなくても大丈夫です。タイトルタイトルを自由に入力できます。タイトルはコードボックスの左上部に表示されます。例としてタイトルに「コード」と入れると下図のようなイメージになります。cssの場合は、強調表示したいコードを[css][/css]で囲んで記載するだけです。全て半角英数字で入力してください。上記のは表示させるためにカッコだけ全角で入力しています。使用できるコードの種類は下記3種類です。htmlcssphpこれをブログを記載する画面で、下図のように入力します。入力した画面を実際にブログで見てみると下図ように表示されるわけです。「html」や「php」の場合は、上図のブログ記載画面で「css」の部分を「html」や「php」に変更すればよいだけです。これでコードの説明をする時に見やすいコード表示にすることができるはずです。実際にこのブログの文章中に打ち込むと、下記のように表示されます。Evolved」」です。ブログでコードを表示して説明することって結構あると思いますので、せっかくコードを表示するなら、通常の文章とは違うデザインで表示したほうが、コードはもちろんブログ全体としても見やすくなります。Evolved」をインストールして設定してみてください。【その他】WordPressでトップに戻るボタンをカスタマイズする方法(テーマ:Xeory)WordPressでリストの表示位置を変更する方法WordPressでリストの背景に色を付ける方法WordPressで引用デザインをカスタマイズする方法(テーマ:Xeory)WordPressで行間と改行幅をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンの色をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンサイズをカスタマイズする方法(テーマ:Xeory)WordPressで表をカスタマイズする方法(テーマ:Xeory)上記の記事を参考にしてください。WordPress、Xeory、プラグインコメントするやっとこブログトップへ戻るモバイルバージョンを。