記事本文や記事タイトルなどのフォントや色を設定する

広告

Blogger ではブログの記事本文のフォントサイズや種類、記事タイトルのフォント、ブログに表示される日付のテキスト色や背景色など多くの項目に対して細かな設定を行うことができます。ここでは記事本文や記事タイトルなどのフォントや色を設定する方法について解説します。

フォントや色に関する設定画面を表示する

フォントや色に関する設定画面を表示するには Blogger の管理画面左側に表示されている「テーマ」をクリックしてください。

フォントや色に関する設定画面を表示する(1)

「テーマ」画面が表示されます。

フォントや色に関する設定画面を表示する(2)

「ブログで使用中」の下に表示されている「カスタマイズ」をクリックしてください。

フォントや色に関する設定画面を表示する(3)

テーマの編集画面が表示されます。

フォントや色に関する設定画面を表示する(4)

画面左上に表示されている「上級者向け」をクリックしてください。

フォントや色に関する設定画面を表示する(5)

サブメニューが表示されます。設定を行う対象を選択し、その後で右側の設定エリアで設定を行います。

フォントや色に関する設定画面を表示する(6)

設定可能な項目は次の通りです。

ページのテキスト : フォント、テキストの色
背景 : 外側の背景、メインの背景、ヘッダーの背景
リンク : リンクの色、表示済みの色、カーソルをあわせたときの色
ブログのタイトル : フォント、タイトルの色
ブログの説明 : 説明の色
タブのテキスト ; フォント、テキストの色、選択済みの色
タブの背景 : 背景色、選択済みの色
投稿タイトル : フォント
日付ヘッダー : テキストの色、背景色、テキストフォント
投稿のフッター : テキストの色、背景色、影の色
ガジェット : タイトルのフォント、タイトルの色、代替色
画像 : 背景色、枠線の色、キャプションのテキストの色
アクセント : 区切り線の色、タブの枠線の色
モバイル版のボタンの色 ; モバイル版のボタンの色
CSSを追加:カスタムCSS

それではいくつかの項目について実際に使い方を確認します。(「CSSを追加」については「ブログにカスタムCSSを追加する」で解説します)。

ページのテキストのフォントと色を設定する

「ページのテキスト」は記事の本文で使用されるテキストのことです。フォントの種類やサイズ、テキストの色などを設定することができます。

ページのテキストのフォントと色を設定する(1)

例としてフォントサイズをデフォルトの 12px から 16px に変更してみます。

ページのテキストのフォントと色を設定する(2)

設定が終わりましたら画面右上の「ブログに適用」をクリックしてください。

ページのテキストのフォントと色を設定する(3)

テーマに対する変更が保存されました。それではブログにアクセスしてどのように変わったのかを確認してみます。

ページのテキストのフォントと色を設定する(4)

記事本文のフォントサイズが変更されていることが確認できます。

背景(外側、メイン、ヘッダー)の色を設定する

「背景」はブログの外側、メイン、ヘッダーの 3 個所についてそれぞれ個別の色を設定することができます。特定の色を指定するだけでなく透明に設定することもできます。

背景(外側、メイン、ヘッダー)の色を設定する(1)

外側の背景というのはブログの背景部分のことです。表示されている色をクリックすると画面下部に表示されているプレビューにすぐに反映されて確認できます。

背景(外側、メイン、ヘッダー)の色を設定する(2)

背景(外側、メイン、ヘッダー)の色を設定する(3)

メインの背景というのはブログの記事やサイドバーなどが表示される部分のことです。表示されている色をクリックすると画面下部に表示されているプレビューにすぐに反映されて確認できます。

背景(外側、メイン、ヘッダー)の色を設定する(4)

背景(外側、メイン、ヘッダー)の色を設定する(5)

また色を選択するためのドロップダウンメニューをクリックするとより自由に色を選択することができます。

背景(外側、メイン、ヘッダー)の色を設定する(6)

背景(外側、メイン、ヘッダー)の色を設定する(7)

ここで「透明」をクリックするとメインの背景を透明にすることができます。メイン部分が透明になるとブログの背景部分が透けて見える形になります。

背景(外側、メイン、ヘッダー)の色を設定する(8)

背景(外側、メイン、ヘッダー)の色を設定する(9)

ヘッダーの背景というのはブログタイトルなどが表示される部分のことです。表示されている色をクリックすると画面下部に表示されているプレビューにすぐに反映されて確認できます。

背景(外側、メイン、ヘッダー)の色を設定する(10)

背景(外側、メイン、ヘッダー)の色を設定する(11)

ヘッダーの背景も(外側の背景もですが)メインの背景と同じように透明に設定することができます。

背景(外側、メイン、ヘッダー)の色を設定する(12)

設定が終わりましたら画面右上の「ブログに適用」をクリックしてテーマに対する変更を保存してください。それではブログにアクセスしてどのように変わったのかを確認してみます。

背景(外側、メイン、ヘッダー)の色を設定する(13)

ブログの背景の色が変更になり、メイン部分とヘッダー部分は背景部分が透明になっていることが確認できます。

なおブログのカラーテーマを設定することでブログで使用されている色を変更したり、背景に画像を設定する方法については「ブログの背景画像やカラーテーマを設定する」を参照されてください。

ブログのタイトルのフォントと色を設定する

ブログにタイトルにテキストで表示している場合にフォントの種類やサイズ、テキストの色などを設定することができます。

ブログのタイトルのフォントと色を設定する(1)

例としてフォントの種類をデフォルトの Arial から Georgia に変更してみます。

ブログのタイトルのフォントと色を設定する(2)

なおフォントはウェブフォントを使用することもできます。

ブログのタイトルのフォントと色を設定する(3)

設定が終わりましたら画面右上の「ブログに適用」をクリックしてテーマに対する変更を保存してください。それではブログにアクセスしてどのように変わったのかを確認してみます。

ブログのタイトルのフォントと色を設定する(4)

ブログのタイトルのフォントが変わっていることが確認できます。

設定可能な項目の中で 3 つほど実際に試してみました。他の項目についてもそれぞれ設定できる種類は異なりますが、フォントや色の設定方法は同じです。

-- --

記事本文や記事タイトルなどのフォントや色を設定する方法について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。