テーマ「Soho」でCSSを使ってブログの日本語フォントを指定する

 

CSSを使って、ブログで使用している文字を変更することが可能です。

HTMLだけでもWebページのレイアウトや文字色・背景色を変更することは可能です。

しかし、HTMLで装飾部分を記述すると汎用性がなくなり、デザインの管理が煩雑となります。その結果、メンテナンス性が損なわれてしまいます。

CSSはHTMLで記述した要素に対して装飾を施すため、装飾部分をCSSにまとめることで非常に管理しやすくなります。

そのため、HTMLでWebページの骨組みを作り、CSSで装飾を施すという流れがWebページ制作の一般的な流れです。

CSS を使ってブログに変更を加える手順

Bloggerの管理画面、左側のメニューで「テーマ」をクリックします。
「マイテーマ」で「カスタマイズ」をクリックします。

テーマが「Ｓoho」の場合は下記手順となります。

「詳細設定」をクリックして「本文」右の▼をクリックします。

本文の下に「ヘッダー」、「投稿」、「コメント」と見えますのでさらに下へスクロールさせます。

すると一番下に「CSSを追加」が現れるのでクリックします。

をクリックして、「カスタムCSSを追加」欄にコードを書き込みます。

コードを追加し、右下の保存アイコン  をクリックします。

本文のフォントを游ゴシックにする場合

下記のコードを「カスタムCSSを追加」欄に入力します。

* { font-family: "Yu Gothic", sans-serif; }

右下の保存アイコン  をクリックします。

以上の設定で本文のフォントが変わります。

表題や投稿タイトルのフォントも変えたい場合

「カスタムCSSを追加」欄で、以下のコードを追加します。

表題のフォントをメイリオにする場合

.Header h1 { font-family: Meiryo, sans-serif; }

投稿タイトルのフォントをメイリオにする場合

h3.post-title { font-family: Meiryo, sans-serif; }

右下の保存アイコン  をクリックします。

補足

エラーになる場合は、ダブルクォーテーションマークを打ち直します。

ダブルクォーテーションの代わりに、シングルクォーテーションマークでOKです。

日本語は日本語フォント,半角英数字は英語フォントで表示

Yu GothicやMeiryoなどの日本語フォントを設定しつつ、半角英数字は英語フォントで表示させると、ちょっとおしゃれな感じになります。

設定方法は、font-familyの日本語フォントの前に,(カンマ)を打って英語フォントを指定します。

本文の日本語フォントをメイリオ、英語フォントをOpen Sansにする場合

* { font-family: "Open Sans", Meiryo, sans-serif; }

Open Sansのようにフォント名が2語以上のときは"ダブルクォーテーションマーク"または'シングルクォーテーションマーク'で囲みます。

HTML画面で「CSSを追加」したコードを確認する方法

テーマのHTML編集画面でサーチ窓を開き、</b:skin> の場所を探します。</b:skin> より上の部分に「CSSを追加」したコードがあります。

普通は<b:skin> ... </b:skin>の間に、他に追加されたコードとともにCSSが書かれています。

「CSSの追加」が反映されない時は、コードを切り取って、追加した他のCSSよりも上に貼り付けると、うまく反映される場合があります。