moca＊Blogger「Tokyo」: Blogger「Tokyo」文字の色と大きさを変える方法

Bloggerの日本語テンプレート「Tokyo」で文字の色と大きさを変えるカスタマイズ記事です。

HTML編集画面でコードを一部書き換えるだけなので、とっても簡単にできます。

HTML編集が苦手な方でも、CSSを追加するだけでできるBloggerのテーマデザイナーを使った方法も合わせてご紹介します。

＊ご注意＊

※Bloggerのテーマデザイナーは旧インターフェースです。この記事を参考にされる場合は、Bloggerの管理画面左下の「以前のBloggerに戻す」をクリックしてください。

それでは、ぜひやってみてください♪

Bloggerのテーマデザイナーで文字の大きさを変える方法

HTML編集が苦手な方は、まずはこちらからどうぞ♪

Blogger日本語テンプレート「Tokyo」で文字サイズを変更する簡単な方法です。

Bloggerでは、直接HTMLを書き換えて編集することもできますが、こちらの章では、簡単なコードをコピペするだけでできる方法をご紹介します。

HTMLの編集画面です。

このようなHTML表示が苦手な方にも簡単にできますので、ぜひやってみてくださいね。

それでは、Bloggerのテーマデザイナーを使ってCSSの追加で文字サイズを変更します。

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

カスタマイズをクリックします。

テーマデザイナーが開きます。

①「上級者向け」→②「CSSを追加」をクリック。

③次のコードをコピーして貼り付けます。

/*↓文字を大きく↓*/
.entry-content {
font-size:105%;
}

font-size:105%の数字を変えると文字の大きさが変わります。

ちなみに、標準の文字サイズはこちらです。

標準の文字サイズです。

105％に変えるとこうなります。

105％の文字サイズです。

コードを追加した後は、必ず右上にある「ブログに適用」ボタンをクリックしてくださいね。

これで、Bloggerのテーマデザイナーを使った文字サイズの変更は完了です♪
おつかれさまでした＊

HTML編集を使って文字サイズを変更する方法も、後半部分に載せています。そんなに難しくはないので、合わせてご覧くださいね。

リンクやブログタイトル等の文字色を変える方法

次に、文字の色を変えるカスタマイズ方法をお伝えします。

リンクの文字色とは、下の赤丸で囲んだ部分の色のことです。初期設定では青色になっています。

「Tokyo」初期設定のリンクの文字色です。

これをブログの雰囲気に合わせた色に変更したいと思います。

まず、Bloggerの管理画面で「テーマ」をクリック後、右端のマークをクリックしてHTML編集画面を開きます。

「テーマ」をクリックしてHTML編集画面を開きます。

「HTMLを編集」をクリックするとこのような画面になります。

HTML編集画面が開きました。

25行目くらいに「リンクの色」と書かれた所があります。

初期設定では、"リンクの色" type="color" default="#4589B5" value="#4589B5"と書かれています。後ろ側にあるカラーコードを変更したい色に書き換えてください。

↓カラーコードはこちらで調べられます。

↓コードをライトピンク（#ffb6c1）に書き換えるとこうなりました。

リンクの色がライトピンクに変わりました。

カラーコードを書き換えたら、プレビュー画面で確認してください。

右下の目玉マークをクリックすると、プレビュー画面とHTML編集画面の切り替えができます。

確認が終わったら、最後に「保存」のマークをクリックして終了します。

最後に保存します。

同じ要領で、ブログタイトルの文字色等も変えることができます。

初期設定では黒のタイトル文字ですが、先程と同じようにカラーコードを書き換えることで、タイトルの文字色も自由に変えられます。

＊背景やブランドカラー・本文の文字色は、Bloggeのテーマデザイナーを使うともっと簡単に変えることができます。
詳しくはこちらをどうぞ↓

HTML編集で文字の大きさを変える方法

記事の冒頭で、Bloggerのテーマデザイナーを使った文字サイズの変更方法をお伝えしましたが、ここではHTML編集を使って文字の大きさを変える方法をお伝えします。

ブログ全体の文字サイズを変える

まず始めに、全体の文字サイズを大きくする方法です。

Blogger「Tokyo」は、標準の文字サイズがパソコン表示で16px、スマホ（モバイル）では14pxに設定されています。

わたしはこのままだと少し小さく感じたので、もう少し大きくしてみます。

Bloggeの管理画面で「テーマ」をクリックして、HTML編集画面を開きます。

文字サイズを変更します。

78行目くらいにある、　font-size:16px; font-size:1.6rem; の数字を18と1.8に変更します。

数字を書き換えたら、プレビューで確認します。（右下の目玉マークをクリック）

変更前の文字サイズはこれくらいです。

これを、18pxに変更するとこうなりました。

変更後の文字サイズです。

ちょっと分かりにくいですが、タイトルも含めて全体的に文字が大きくなりました。

モバイル（スマホ）の文字を大きくする

「Tokyo」はレスポンシブデザイン（PCでもモバイルでも最適な画面サイズで表示可能）になっているので、事前にテーマのモバイル設定を「デスクトップ」にしておく必要があります。(「QooQ」の場合も同じです。）

＊まだ設定していない場合は、Bloggeのメニュー画面で「テーマ」をクリック後、画面右端のボタンから、モバイルの設定をしてくださいね。