Blogger「Tokyo」ラベルのカスタマイズ

Bloggerテーマ「Tokyo」のトップページにある、記事リストのラベル表示をカスタマイズしてみました。

赤丸で囲んだ部分がラベルです↓

「Tokyo」トップページのラベル（標準）です。

標準のままだと、記事タイトルとの区別がつきにくい気がします。。。
なので、ラベルの文字を小さくして、色も付けてみました。

ラベルの文字を小さくして、背景に色を付けました。

ちょっとラベルっぽくなりましたね。

このカスタマイズはテーマのHTMLにコードを直接書き加える方法です。

簡単なコードをコピペするだけでOKなので、貼り付ける場所さえ間違えなければ初心者の方にも簡単にできると思います。

それでは、方法を説明します。

「Tokyo」ラベルのカスタマイズ方法

Bloggerの管理画面から、「テーマ」をクリック。右端にある赤丸で囲んだ部分をクリックします。

右端にある赤丸で囲んだ部分をクリックします。

画面が開いたら、「HTMLを編集」をクリックします。

すると、こんな画面になります。

HTML編集画面です。

HTML編集に慣れていない初心者の内は、「うわ～何だこれ・・・」とちょっとびっくりしてしまいますよね。

でも、大丈夫です。

左端の数字が２４０番台になるように、画面をスクロールしてください。
下の赤枠の部分にコードを付け加えます↓(※実際の画面に赤枠はありません）

赤枠の部分が付け加えたコードです。

※今までに別のカスタマイズをしている場合は、左端の数字が多少前後するかもしれません。数字だけでなく、前後の青字の内容も必ず確認してください。

付け加えたコードはこちらです↓（コピペできます。）

font-size: 60%;
background:#ffe5f2;

カラーコード#ffe5f2の部分はお好きな色に変えてください。
カラーコードはこちらで調べられます。


文字の大きさもお好みで％の数字を変えてください。（50～80％の間くらいがいいと思います）

コードを追加したら、保存する前に必ず「テーマのプレビュー」で確認してください。

プレビューはこちらの目玉マークから見ます↓

プレビューを確認しながら、色や文字の大きさを調整してください。

調整し終わったら、最後に右端の「保存」のマークをクリックして保存してください。

これで「Tokyo」記事リストにあるラベルのカスタマイズは終了です。
おつかれさまでした＊

▼こちらもおすすめ♪


→ホームへ戻る