はてなブログの画面テーマとして Brooklynを利用しています。初心者の私が、標準のスタイルだけでは物足りなくなってきたのでカスタマイズを行うことにしました。
今回は、タイトルのカスタマイズについてです。
タイトルカスタマイズとして考えられるのはいくつかありますね。
- タイトルのフォントやサイズの変更
- タイトル文字の位置
- 背景の色・画像変更
ここでは当ブログで利用している、フォント・サイズの変更、文字位置の変更の方法をご紹介します。
このあたりの話題としては、以下のブログを含めいろいろなブログでも紹介されています。
はてなブログテーマ「Brooklyn」をカスタマイズしました！CSSコピペOKです！ – ヒロログ
ただし、なぜかそのまま貼り付けてもうまくいかないことがあります。ここでは調整後のCSSを
ご紹介します。
フォントの種類変更
Blooklynテーマで本文で使われるフォントファミリーにはいかが指定されています。
font-family: 'Open Sans','Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif
これに GoogleのWEBフォントを加えてカスタマイズしてみます。
アルファベット系のフォントは実にたくさんの種類があるのでどれを使ってよいか迷いますが
自身のブログのイメージと合うフォントを選択してください。
また、日本語フォントについては数が少ないのですが、以下のページに詳しい説明がありますのでご参照ください。
以下日本語フォント一覧からのスクショです。
これらの中から気に入ったフォントを選択します。
フォントの種類は時々増えるようですので時たまチェックしても良さそうですね。
フォントの設定方法
フォントの種類を選んだ後の設定の仕方は簡単です。
例えば、Google Fontの中からM PLUS 1Pを
選択したとします。
このフォントを使うことをブログに教えてあげます。その方法はGoogle Fontの各フォント詳細説明の右側にあるHTML
<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p" rel="stylesheet">をコピーして、これを以下の場所にコピペします。
ダッシュボード → デザイン → カスタマイズ → ヘッダー → タイトル下
これでGoogleフォントのM PLUS 1Pを使う準備ができました。
Googleフォントへのリンク設定
上記とは別に直接Googleフォントのサイトからコードをコピペすることも可能です（というかこちらの方が本家でしょう）
例えば以下のサイトに詳しく解説があるので参照にしてフォントへのリンクをコピペしてください。
設定したフォントの利用
次に、このフォントをタイトルフォントとして使うための設定を行います。
以下のCSSをデザインcssにコピペしてください。
なお、デザインcssにコピペの方法が？？という方は以下のページを参照してくださいね。
この中でfont-family: 'M PLUS 1p', sans-serif;に当たるところが今回選択したフォントを利用するための設定です。
ほかのフォントを利用する場合には、上記のなかの'M PLUS 1p'の部分を選択したフォントの名前に入れ替えればOKです。
そのほかのタイトルに対するカスタマイズ
以下にタイトルのフォントに関連するほかのカスタマイズの例を挙げます
- font-size(フォントサイズ変更；24pxの数字を変えればタイトルのサイズが変わります)
- letter-spacing (タイトルの文字の間のスペースを調整できます。ここを広げたり狭めると雰囲気が大きく変わります)
-
text-align (タイトルの配置場所(Brooklynの標準CSSではタイトルは画面の左寄せになっています。これを真ん中にする場合にはここをcenterに設定します)
-
color (タイトル文字の色；ほかの色に変更できます）
- 色の設定には#の後に6桁のコード（数字・アルファベット）で指定します。色とこのコードの対応は例えば以下のGoogleサイトでチェックできますのでご参照ください。
以下のCSSの例では、
- フォントサイズを24px
- 文字幅を6px
- 文字の場所を中心
とする設定の例です。ご参照ください。
/* タイトルの設定 */ #title{ font-family: 'M PLUS 1p', sans-serif; /* フォントの種類 */ font-size: 24px; /* フォントのサイズ */ letter-spacing: 6px; /* 文字間隔 */ text-align: center; /* 文字の位置 */ } #title a { color: #112233; /* タイトル文字の色 */ }
タイトル下の説明文のカスタマイズ
続いてタイトルの下にある小さな文字の説明文をカスタマイズします。
基本的なやり方は一緒です。
以下のCSSの例では
- 文字を真ん中に配置
- 文字色をタイトルと同じ色に変更
- フォントのサイズを少し大きめの16に変更
のカスタマイズを加えています。
/* タイトル下の説明文 */ #blog-description { max-width: initial; /* 説明文の幅をいったん解除 */ text-align:center; /* 文字位置 */ color: #112233; /* 文字の色 */ font-size: 16px; /* フォントサイズ */ }
以上の設定を加えると、当ブログと同じヘッダースタイルになります。
いろいろ変更を加えて皆さん自身のブログにあったカスタマイズを施してください。
May your blog life be with happy!