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

前回までで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

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

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

スタイルシートをカスタマイズしてサイトのフォントを変更する

前回までで、WordPress(および Twenty Fifteen)のカスタマイズ機能を使ってサイトの外観を変更してみました。

今回は、カスタマイズ機能では行うことのできない「サイト全体に適用されているフォントの変更」をしてみたいと思います。

 

Custom CSS/JS プラグインをインストール

サイトのフォントを変更するにはCSSファイル(Cascading Style Sheets、カスケーディング・スタイル・シート)というものをいじる必要があります。

現在サイトに適用しているテーマ(Twenty Fifteen)のCSSファイルの所在は以下。

(WordPressがインストールされているディレクトリ)/wp-content/themes/twentyfifteen/style.css

これをいじるとなると、

  • WordPressがインストールされているサーバー上の Twenty Fifteen テーマフォルダ内にある style.css を直接編集
  • ダッシュボードの左メニューからテーマの編集画面を開き、 style.css を編集&保存

のどちらかの方法を行う必要があります。

ただ今回はできるだけ簡単にカスタマイズしたいので、上記の方法ではなく「Custom CSS/JS」というプラグインを使ってサイトの管理画面からスタイルシートの記述を変更してみようと思います。

プラグインのインストールと有効化の方法については、以前の記事を参照のこと。

 

プラグインを使ってスタイルシートの記述を追加する

プラグインのインストールができたら早速、サイトのスタイルシートをいじってみたいと思います。

WordPressのダッシュボードにアクセスし、左サイドバーの「外観」→「Custom CSS/JS」メニューをクリックします。

menu of Custom CSS/JS

 

以下のような画面が表示されますので、スタイルシートの記述を追記してみます。

※ ちなみに赤枠の下のJavaScriptには、Google Analyticsのトレッキングコードを追加しています。

Custom CSS/JS update view

 

今回の場合の記述内容は以下。

Custom CSS

 

HTMLのbodyタグ以下の要素に、

【文字の高さ】
1.7em

【フォント】
「ヒラギノ角ゴシック」「メイリオ」「Osaka」「MS Pゴシック」「sans-sefif」(優先度の高い順)

を適用する記述となっています。

※ なお「.border-image」の記述では、画像に適用する枠線のスタイルを定義しています。

 

上記のように入力したら、画面の一番下の「Save All Changes」ボタンをクリックします。

以下のようなメッセージが表示されたら、スタイルの適用は完了です。

custom css updated

 

 

サイトを確認してみると以下のようになります。

ofter custom css

 

ちなみに適用前のサイトのは以下。

before custom css

 

サイトのフォントが明朝体からゴシック体に変更されているのがわかります。

その気になればもっと大幅にサイトのスタイルを変更することも可能なのですが、今回はこのくらいにとどめておき、次回からはいよいよ自作のWordPressテーマの作成に入りたいと思います。

サイトにソーシャルボタンを表示する

今日も AGITO Labs のカスタマイズのお話です。

本日は「WP Social Bookmarking Light」というプラグインを使ってこのサイトにソーシャルボタンを設置してみます。

 

まずは「WP Social Bookmarking Light」をインストール

詳しく説明するまでもなく、こちらの記事を参考にプラグインをインストールして有効化します。

 

プラグインの設定

プラグインをインストールしたら、設定画面にアクセスして設定を行います。

WordPressのダッシュボードにログインし、左サイドバーの「設定」→「WP Social Bookmarking Lite」をクリックします。

menu of WP Social Bookmarking Light

 

プラグインの設定画面が表示されますので、
まずはソーシャルボタンを表示する位置と表示する記事の種類(投稿もしくは固定ページ)、表示するソーシャルボタンを選びます。

settings of WP Social Bookmarking Light

今回は

  • Twitter
  • Facebook
  • Google Plus One
  • はてな
  • Evernote
  • Pocket

の6種類のソーシャルボタンを表示するようにしてみました。

ソーシャルボタンを選んだら、個別のボタンの設定を行います。

 

まずはTwitterから。

for Twitter

見た目をシンプルにするために、あえて言語は「英語」を選択しています。

 

次にはてな。

for Hatena

 

そしてFacebookの設定(設定のタブは2つに分かれています)。

for FB

for FB like

 

以下はEvernoteのクリップボタンの設定。

for Evernote

 

Google Plus Oneの設定。

for Google Plus One

 

最後にPocketの設定。

for Pocket

 

以上を入力し終わったら、左下の「変更を保存」ボタンをクリックして設定を完了します。

 

ソーシャルボタンの表示を確認

以上の手順が終了したら、サイトの個別ページを開いてソーシャルボタンがちゃんと表示されているかを確認します。

 

当サイトの場合は以下のようになりました。

complete display social buttons!

 

以上でソーシャルボタンの設置は完了です。