Highlighter」を使うと、記事内にソースコードを綺麗に表示できます。CSSやPHPなど、プログラムのソースコードを記事に載せる機会が増えてきました。ソースコードを記事にそのまま記入することもできますが、あまりカッコよくありません。綺麗にコードを貼られているサイトを見かけると、自分のサイトも同じようにしたいと思いますよね。Highlighter」を導入して、プログラムのソースコードを記事内に綺麗に埋め込む方法を紹介します。Highlighter」を導入する前と後で、記事に埋め込んだプログラムのソースコードの見た目がどのくらい変わるか見てみます。ソースコードにはリンクテキストを編集するCSSを例として使用します。関連:CSSを利用してリンクテキストのデザインを変更する方法(テンプレートあり)まずは、プラグインなしで普通にソースコードを表示させます。X」で、ソースコードにすることができます。Advanced」で編集メニューを編集することで、ボタンでソースコードに設定することも可能です。Advancedの導入)ソースコードにするだけでは、背景の色までは変わらず白いままです。今回は分かりやすいように、背景をグレーにするスタイルを設定しています。MEDIA」のものを使用しています。MEDIA」がVer2.0.0になり使いやすさパワーアップフォントなどが変わり本文との違いはあるので、ソースコードであることは分かります。デザイン的にはそこまで綺麗な印象はありません。Highlighter」を使用して同じコードを埋め込んでみます。1px;}1行ごとに縞模様になっていたり、行数が表示されたり、文字に色が付いたりと、綺麗に埋め込まれました。ソースコードであることが一目瞭然なので、非常に見やすいです。ちなみにデザインは1種類ではありません。1px;}自分のサイトにあったデザインを設定できるのも魅力です。実際に比較してみる、プラグインを導入した方が良いことが実感できますね。ソースコードとして読みやすいようなデザインになる。サイトに合わせてデザインを変更できる。Highlighter」の導入方法を見ていきます。Highlighter」は、通常のプラグインと同様の方法で導入が可能です。Advancedの導入)まずは、検索を行います。WordPress左メニューの「プラグイン」から「新規追加」をクリックします。Highlighter」と検索します。Highlighter」の「今すぐインストール」をクリックします。インストール後は「有効化」をクリックしましょう。Highlighter」の導入が完了です。Highlighter」は、最終更新日が2年前で少し古いです。実際に使用していますが、現在のWordPressでも問題なく使用できています。更新されていないというのはやはり不安なので、今後良いプラグインが出てきた場合は乗り換えるかもしれません。今のところ一番使い勝手が良いので使用しています。Evolved」というソースコード埋め込みができるプラグインもあります。Highlighter」を使うことに決めました。Evolved」では少し都合が悪い点があったためです。記号が文字参照コードになってしまう「<」などの記号が「&lt」になるなど、正しく表示されない記事内に[css]などのショートコードを入れる必要があるプラグインを無効にすると、それが記事にそのまま表示されてしまう今後プラグインを変更しようと思った際に修正が大変PHPでは「<」を多用するため、正しく表示されないのは致命的でした。コピペでそのまま使えないと、サイトの信用を落とすことにもなりかねません。今後プラグインが使えなくなることがあった場合、記事すべてのショートコードを消す作業があると考えると、使うのを躊躇してしまいます。Highlighter」を使用することに決めました。Highlighter」の基本的な使い方を見ていきます。細かい設定はいろいろありますが、記事にプログラムのソースコードを埋め込むだけなら簡単です。基本設定からソースコードの埋め込み方法までを紹介します。最初は設定がすべて英語なため、英語が読めない私のような人には使いにくいです。Highlighter」を日本語化していきます。FTPにアップロードされている言語ファイルを削除することで、日本語化することができます。使用していれば、FTPソフトを使用しなくても、操作を簡単に行うことができます。関連:エックスサーバーWebFTPにPHPファイル等をアップロードする方法まずは、エックスサーバーのインフォパネルから、ファイルマネージャにログインします。Highlighterを日本語化したいドメインを選択します。「public_html」をクリックします。「wp-content」をクリックします。「languages」をクリックします。ここに言語ファイルが入っています。「plugins」をクリックします。プラグインのフォルダですね。プラグインで使用されている言語ファイル一覧が表示されます。Highlighter」のものを削除することで、WordPressの翻訳が適用され、日本語にすることができます。「crayon-syntax-highlighter-ja.po」と「crayon-syntax-highlighter-ja.mo」の2つを選択します。念のためダウンロードしておけば、削除後に元に戻すこともできます。ダウンロードは、ファイル名をクリックすると行われます。2つを選択後、右上にある「ファイルの削除」をクリックします。Highlighterの日本語化が完了です。次は基本設定を行います。そのままでも使用できますが、好みに合わせて変更した方が良い部分もあるので見ていきます。Highlighterの設定は、WordPressの設定から行います。WordPress左のメニューの「設定」から「crayon」をクリックします。ここから、好みに合わせて自由に設定してください。いくつか例を見ていきます。テーマとフォントテーマの初期設定は「Classic」、フォントの初期設定は「Monaco」になっています。テーマを変更すると埋め込みデザインが、フォントを変更すると文字のデザインが変わります。サイトの雰囲気や好みに応じてデザインを変えましょう。ツールバーと行ツールバーの挙動と、行の設定を行うことができます。個人的に、マウスをのせると1行目に覆いかぶさるようにツールバーが出るのが好きではないので、ツールバーは「常に表示」に設定を変更しています。この他にも細かい設定がかなり多いので、自由に設定しましょう。Highlighterを使用します。記事の投稿画面で使用することで、プログラムのソースコードを綺麗に埋め込むことができます。投稿画面の編集メニューから「<>」をクリックします。以下の編集画面が表示されます。あとは情報を入力し、右上の「挿入」をクリックするだけで埋め込まれます。「タイトル」はプログラムのタイトルです。なくても問題ありません。「プログラム言語」は、これから入力するソースコードの言語を選択します。「Default」のままでも大きな問題はありませんが、選択した方が間違いなく単語が色分けされます。「コード」の部分にプログラムのソースコードを入力します。設定部分は、最初の設定をしっかりしておけば、特に変更の必要はありません。これで、プログラムのソースコードが記事に埋め込まれます。Highlighter」の特徴や基本操作を紹介しました。使用すると、プログラムのソースコードを記事内に綺麗に埋め込むことができます。ソースコードの見やすさが全然違うので、記事に埋め込む必要がある場合はぜひ導入したいプラグインですね。デザインも多く、自分のサイトに合わせて設定を変更できるため使いやすいです。コードを埋め込む際の操作も、投稿画面からボタン一つでできるようになっているのが嬉しいです。活用して見やすいサイトを作りましょう。ここまでお読みいただき、ありがとうございました。PMこんにちはブログランキングから来ましたWordPressのプラグイン記事。参考にさせていただきます。英語が多いと、断念しますね。比較してこれよりこれ!ってのが分かりやすいです。お邪魔させてください。初心者なので、まだまだ知らないことがたくさんあります。コメントをキャンセルメールアドレスが公開されることはありません。現在使用しているエックスサーバーです。