2015/11/124 Shares

Google Fontsを使ってStingerをかっこよくカスタマイズ!

Google Fonts

テーマにちょっとだけ手を加えました。今回いじったのは、主に左上に表示されているブログタイトルと最下部のStinger3公式サイトへのリンクです。

その他細々としたカスタマイズをまとめてご紹介します。

Google Fontsの設定方法

左上にはブログタイトルが表示されますが、今回「Naifix」に変更しました。画像にしようかとも思ったんですが、ロゴっぽく見えるフォントでごまかしています。

フォントの種類を変更するには、CSSでfont-familyを指定します。当ブログではこんな感じ。

ただし、各OSにあらかじめインストールされているフォントで指定しなければ、PCごとに表示が変わってしまいます。これを解決するのが、WEBフォント。どのPCから見ても同じフォントになります。

いろいろありますが、オーソドックスにGoogle Fontsにしています。

タイトル部分のフォントを変更

まず、Google Fontsで使いたいフォントを探します。種類が豊富なのでじっくり探してみてください。僕は「Merriweather」の「Ultra-Bold 900 Italic」にしました。

フォントの詳細ページ中段に「Add this code to your website」という部分があるので、そのコードをコピーします。

Google Fonts コードコピー

header.phpに貼りつけます。場所は、<head>内の<–CSS切り替え–>と表示されている部分の上。

続いてCSSの指定例があるので、コピー。

Google Fonts CSS

タイトルを装飾している部分に貼りつけます。

Stinger3リンク部分のフォントを変更

Stinger3フッター部分
統一感を持たせるために、フッター内の「WordPress-Theme STINGER3」にも同様のフォントを指定しました。ついでに色も変えてあります。

僕の使用しているバージョンでは、該当する部分がサイドバーブロックにありました。テキストエディタにコピーして検索すればすぐに見つかると思います。

その他カスタマイズした部分

背景色を透明に近いブルーに変更

透明というか、白に近いブルーになっています。モニターの輝度やカラー設定によってはまったく気づかないかもしれません。よーく見るとこの本文背景が白く、まわりはほんのり青くなっているかと。

実はたまに変えて遊んでいました。

ヘッダー画像をばっさり削除

記事上部に貼ったStinger Adventバナーが目立つよう、ヘッダー画像を削除しました。

header.phpの該当部分を全部消します。

のちのちスライダーを挿入しようかなと考えています。

メニュー部分を変更

センスがないのでグレーにしていますが、CSSにヘッダメニュー部分の背景色を追加しました。

文字を2px大きくして上下の余白を3px広く。

文字色をちょっと濃くしました。

パッとしないので、あまり気に入っていません。

今回のカスタマイズまとめ

どこを強調したいのか、どうすれば読みやすくなるのかを考えると、まだまだカスタマイズするべき点がたくさんあります。

年末に向けて本業がかなり慌ただしくなってきたので、少しずつ調整します。スマホ表示用のCSSを調整したり、404ページをオリジナルにしたり、やりたいことは山ほど。

12月5日のネタは何にしましょう・・

それでは、また。