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

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

サイトのフォントを変更

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

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

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

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

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

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

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

設定内容は以下。

add tag cloud widget

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

tag cloud widget

 

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

after customize CSS and widget

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

前回までで、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テーマの作成に入りたいと思います。

サイドバーにソーシャルアイコンを表示する

WordPressのデフォルトテーマ Twenty Fifteen では、グローバルナビゲーションメニューをカスタマイズしたのと同様の手順で、ソーシャルメディアプロフィールへのリンクをアイコンで表示することが可能です。

今日はその手順について書いてみたいと思います。

ちなみにアイコンの表示例は以下(ちょっと可愛いアイコンたちです)。

social media icons

 

ソーシャルリンクメニューの設定をする

昨日と同様、まずはダッシュボードにアクセスし、左サイドバーの「外観」→「メニュー」をクリックします。

customize menu

以下のようなメニューの設定画面が表示されますので、「新規メニューを作成」というリンクをクリックします。

add social link menu

新しいメニューの作成画面が表示されますので、適当なメニュー名を入力して「メニューを作成」ボタンをクリックします。

create social link menu

次の画面で、「テーマの位置」を「ソーシャルリンクメニュー」にしておきます(この設定により、各ソーシャルメディアへのリンクがアイコンで表示されるようになります)。

social link menu

 

以下では、Twitterへのリンクを追加してみます。

「URL」にはTwitterのプロフィールページのURLを、「リンクテキスト」には適当な文字列(今回はTwitter)を入力し、「メニューに追加」ボタンをクリックします。

add twitter link to social link menu

これにより、メニュー構造のエリアにTwitterのメニューアイテムが追加されます。

add twitter link to social link menu completed

 

以下同様に、別のソーシャルメディアへのリンクを何個か追加してみます。

save social link menu settings

一番最後に「メニューを保存」ボタンをクリックし、以下のようなメッセージが表示されたらメニューの設定は完了です。

sosial link menu updated

 

サイトを確認すると、設定したソーシャルリンクがアイコンで表示されているのがわかります。

preview social link menu

 

ちなみに Twenty Fifteen がアイコン表示をサポートするソーシャルメディアは以下。

  • CodePen
  • Digg
  • Dribbble
  • Dropbox
  • Eメール (mailto: リンク)
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Path
  • Pinterest
  • Pocket
  • Polldaddy
  • Reddit
  • RSS フィード (URLs with /feed/)
  • Spotify
  • Skype
  • StumbleUpon
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • WordPress
  • YouTube

RSSフィード や Email にも対応しているので、案外使いどころのある機能だと思います。