ソースコードをキレイに表示する

前回まででIllustratorによる大まかなデザインの作り込みができましたので、いよいよHTMLでデザインを実装していく段階に入ります。

今後はHTMLやCSS、JavaScriptやPHPのコードを紹介する機会も増えると思うので、これらのソースコードを記事上で綺麗に表示するためのWordPressプラグインをインストールしておこうと思います。

Crayon Syntax Highlighter をインストール

今回利用するのは「Crayon Syntax Highlighter」というプラグインです。 こちらの記事を参考にこのプラグインをインストール&有効化します。

Crayon Syntax Highlighter の設定

プラグインをインストールできたら、WordPressのダッシュボードにアクセスし、プラグインの設定を行います。

左サイドバーの「設定」→「Crayon」メニューをクリックします。

menu of Crayon

以下のような設定画面が表示されますので、必要に応じて設定を変更します(初期状態のままでも問題なく利用できます)。

default settings of Crayon

今回は以下のように変更してみました。

  • プラグインのテーマを「Classic」から「Sublime Text」に
  • フォントを「Monaco」から「Liberation Mono」に
  • サイズを 高さ400px、幅100%に(レスポンシブ対応)

設定を変更した後、画面下の「変更を保存」ボタンをクリックしたら完了です。

save settings of Crayon

プラグインを使って記事にソースコードを埋め込む

早速 Crayon を使って記事にソースコードを埋め込んでみます。

投稿の編集画面を表示し、本文のHTMLエディタの表示を「ビジュアル」から「テキスト」に変更します。

ソースコードを挿入したい箇所にカーソルを移動し、HTMLエディタの上部メニューの「crayon」ボタンをクリックします。

insert source code to post

以下のようなポップアップが表示されますので、必要な箇所を入力していきます(先ほど設定画面で設定した内容が初期値として入力された状態となっています)。

insert source code

 

最後に「挿入」をクリックすると、投稿の本文にソースコードが挿入されます(以下)。

inserted source code

 

これをプレビューでみてみるとこんな感じに。

preview source code

なかなかカッコよくソースコードが表示されます。

今後テーマ作成の過程でソースコードを書く必要がある場合は、このプラグインを使って内容を紹介していこうと思います。

サイトのフォントとウィジェットの微調整

本日はサイトに適用しているフォントとサイドバーに表示するウィジェットを微調整してみました。

サイトのフォントを変更

以前の記事で紹介したのと同じ方法で、サイトのフォントを変更してみました。

今回適用したのは以下のようなCSS。

※ ちなみに「/*」と「*/」で囲まれている部分はコメントとして扱われ、CSSとしては適用されません。

以前と同じゴシック体ですが、ニュアンスがかなり違うと思います。

サイドバーにタグクラウドを表示

もう1点の変更は、サイドバーにタグクラウドを表示するようにしたこと。

表示の手順は以前の記事「サイドバーにウィジェットを表示する」に書いたとおりです。

設定内容は以下。

add tag cloud widget

サイトのサイドバーには、以下のようにタグクラウドが表示されます。

tag cloud widget

 

以上の変更により、現在のサイト(AGITO Labs)の外観は以下のようになっています。

after customize CSS and widget

IllustratorでWordPressテーマをデザイン Ver.4

本日はスマートフォン向けのデザインをIllustratorで作り込んでみました。

全体像は以下のようになっています。

design by Illustrator vol.4

 

メニューアイコンをクリックしたときに表示されるメニューのデザインや、その他の細かい部分のデザインは、今後HTMLでモックアップを作り込んでいくタイミングで調整していこうと思います。