HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン
Bloggerで簡単に目次をつける方法
Bloggerでお問い合わせフォームのページを作る方法
新ブログはこちらから

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

2019/11/18

「Tokyo」 カスタマイズ



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

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

ぜひやってみてください♪

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

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


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

「Tokyo」初期設定のリンクの文字色です。
これをブログの雰囲気に合わせた色に変更したいと思います。

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

「テーマ」をクリックしてHTML編集画面を開きます。
「HTMLを編集」をクリックするとこのような画面になります。

HTML編集画面が開きました。
25行目くらいに「リンクの色」と書かれた所があります。


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

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

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

リンクの色がライトピンクに変わりました。
カラーコードを書き換えたら、プレビュー画面で確認してください。

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

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

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

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

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


文字の大きさを変える


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


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

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

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

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

文字サイズを変更します。
78行目くらいにある、 font-size:16px; font-size:1.6rem;  の数字を181.8に変更します。

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

変更前の文字サイズはこれくらいです。
これを、18pxに変更するとこうなりました。
変更後の文字サイズです。
ちょっと分かりにくいですが、タイトルも含めて全体的に文字が大きくなりました。

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


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

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

「モバイルの設定」をクリックします。

「デスクトップ」にチェックを入れて「保存」をクリックします。

それでは、日本語テンプレート「Tokyo」のモバイル(スマホ)表示の文字サイズも変更してみます。

まずは、HTML編集画面を開いて、


126行目くらいにある、font-size:14px; font-size:1.4rem;の数字を161.6に変更します。

数字を書き換えたら、 「保存」のマークをクリックしてください。

設定が終わったら、スマホの画面で文字の大きさを確認してみてくださいね。

ブログタイトルの文字サイズを変更する


わたしのサンプルブログをスマホの画面で見ると、このようになっていました。


ブログタイトル(赤枠で囲んでいる所)がかなり大きくてちょっとびっくりしたので、このブログタイトルの文字を小さくしてみます。

Bloggeの管理画面で「テーマ」をクリックしてHTML編集画面を開きます。
ブログタイトルの文字を小さくします。
150行目くらいに #header h3{ というコードがあります。その下の font-size: 300%; の数字を小さくします。

165%まで小さくしてみるとこうなりました。


ブログタイトルが1行にまとまって、見た目がすっきりしました。

次に、タイトルの下にある説明文の文字も小さくしてみます。

ブログの説明文の文字を小さくする

赤枠の所のコードを書き加えます。
157行目くらいにある、 #header .descriptionwrapper{ の所の下に次のコードを書き加えます。

font-size: 85%;
※パーセントの数字はお好みで加減してください。

ヘッダーの余白を小さくする


ついでに、タイトルの上と説明文の下の余白も小さくしてみます。
ヘッダーの余白を小さくします。
143行目くらいにある #header-inner{ の下の padding-top: 3em;  padding-bottom: 3em;
の数字を小さくします。

わたしは半分の1.5に変えてみました。

すると、こんな感じになりました。

モバイル表示はこんな感じです。
パソコンの画面で見るとこんな感じです。
バランスがよくなったのではないでしょうか。

その他の文字サイズを変更する

*その他の場所の文字サイズを変更する方法を、別ページで紹介しています。
詳しくはこちらをどうぞ♪





→ホームへ戻る