こんにちは！福岡でホームページ制作を行なうシンス株式会社の越水です。
ホームページ制作の技術メモに役立つ！日本語対応のWordPressプラグイン
Web制作やアプリ開発を行っていて、ソースコードを自分のブログにメモしたい時ってありますよね。
今回はそんな時にコードをスッキリと綺麗に表示させることができるWordPressプラグイン「Crayon Syntax Highlighter」をご紹介します。
似たようなプラグインはたくさんあるのですが、私は以下のような点が気に入っています。
- 日本語対応が嬉しい
- 行数表示、折り返し、ハイライトなどのオプションが柔軟に設定できる
- 操作方法がシンプルでわかりやすい
- 記事表示時の見た目
最後の項目は完全に好みの問題ですが、使いやすいプラグインなのでオススメです。
まずはインストール
WordPressの管理画面のメニューにある「プラグイン > 新規追加」からCrayon Syntax Highlighterを検索してインストールします。
インストール後にプラグインを有効にすることを忘れずに。
ファイルをアップロードしてインストールする場合はWordPress.orgからプラグインファイルをダウンロードしてください。
豊富なオプション設定
インストールが済んだらプラグインの設定を確認しておきましょう。
といってもデフォルト設定のままでも問題なく使えます。
WordPress管理画面の「設定 > Crayon」からプラグインの設定を確認・変更することができます。
カラーテーマや余白などソースコードの見た目の調整から、ツールバーの表示の仕方など様々な項目が設定できます。
設定変更をしたらページ下の「変更を保存」ボタンで保存しておきましょう。 今回はマウスオーバー時のツールバーのアニメーションが邪魔だったのでツールバーを「常に表示」に、コードの折り返しを有効にするために「Wrap lines by default」にチェックを入れました。
他にも多くの項目が触れますので好みの設定にしてみてください。
簡単操作で記事内にソースコードを挿入
実際に記事にソースコードを埋め込む操作は簡単です。
記事投稿画面のテキスト入力フォーム上に配置されている「crayon」ボタンをクリックするだけで、ソースコードを挿入するためのエディタが現れます。
現れたテキストエリア部分にソースコードをコピーして「挿入」リンクをクリックすればOKです。 実際にはソースコードが以下のサンプルのように表示されます。
1 2 3 4 5 6 7 8 9 10 11 12 | #hoge { height: 100px; padding: 10px; //設定した行がハイライトされます font-size: 14px; //設定した行がハイライトされます } #hoge, #huga { width: 1000px; margin: 0 auto; } #huga { overflow: hidden; } |
以上になります。 ホームページ制作やプログラミングのソースコードを残す際にぜひ活用してみてください！
中小企業のホームページ制作やサイトリニューアルならシンス株式会社まで。
