サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、「ブログタイトル」の部分をカスタマイズする方法について説明していきます。
「ブログタイトル」と「ブログの説明文」
ブログのタイトル部分は、「ブログタイトル」と「ブログの説明文」の2つに分かれています。
今回は、「ブログのタイトル部分」(下の画像:赤枠)のカスタマイズ方法について説明していきます。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-6HNs2ZCo0uk/WzmJOO_5S6I/AAAAAAAAG4E/RJGLmWeCKZYz_kIYmzOfaFH1FmSXIxm-ACK4BGAYYCw/s400/2%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB.jpg)
ちなみに、青枠の部分は「ブログの説明文」で、この部分のカスタマイズ方法は別記事で紹介します。
設定するHTMLとCSSのソースコードの検索方法
設定は、HTML・CSSのソースコードを変更することで行っていきます。
そのため、目的とするソースコードを検索して探す必要があります。
それぞれの設定で、ソースコードの検索画面の状態からの説明を行っています。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
不明な部分は下の記事をご参照ください。
「文字サイズ」を変更する
ブログタイトルの「文字サイズ」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[.header-title a{]を検索
検索窓に「 .header-title a{ 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-F5u9FMQ8HIE/WzmLxb7jCdI/AAAAAAAAG4Q/eOYRoOeC7uUGk98TSbrSoRPkmmlwucgpwCK4BGAYYCw/s640/3%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB.jpg)
ソースコードの説明は以下の通りです。
- font-size:30px !important; 文字サイズ
- font-weight:700; 文字の太さ
- text-decoration:none; 文字の装飾
- color:$(header.title.color); リンクの文字色
③「文字サイズ」のソースコードを変更
『font-saize:30px !important; 文字サイズ』の部分が「文字サイズ」のコードになります。
数値を大きくすると文字は大きくなり、小さくすると文字は小さくなります。
お好みの文字サイズに変更しましょう。
文字サイズを変更した場合には以下のような変化が出ます。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-1W-Dn8Dz30A/WzmRgeoHsXI/AAAAAAAAG4c/2gdEIOkjStAjFAR_t5tcesaciTkuWQESQCK4BGAYYCw/s640/4%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-Uyu0xhBUI8U/WzmRivJbgiI/AAAAAAAAG4k/UpypEwIj-N0tvoNGWErcFhYt8zfhEgwoQCK4BGAYYCw/s640/5%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-bMZeVVpdRLg/WzmRn-rtNGI/AAAAAAAAG4s/fM2RqqlGVGcN-B-QaIZWjPwhUs4p6GHqwCK4BGAYYCw/s640/6%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-_pibcm5XYfk/WzmRrsfXQkI/AAAAAAAAG40/OhBjyhKhwr0VEhA1Lp389BN-py6LBcYvwCK4BGAYYCw/s640/7%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB.jpg)
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「文字の太さ」を変更する
ブログタイトルの「文字の太さ」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[.header-title a{]を検索
検索窓に「 .header-title a{ 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-F5u9FMQ8HIE/WzmLxb7jCdI/AAAAAAAAG4Q/eOYRoOeC7uUGk98TSbrSoRPkmmlwucgpwCK4BGAYYCw/s640/3%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB.jpg)
ソースコードの説明は以下の通りです。
- font-size:30px !important; 文字サイズ
- font-weight:700; 文字の太さ
- text-decoration:none; 文字の装飾
- color:$(header.title.color); リンクの文字色
③「文字の太さ」のソースコードを変更
『font-weight:700; 文字の太さ』の部分が「文字の太さ」のコードになります。
数値を大きくすると文字は太くなり、小さくすると文字は細くなります。
太さは「100、200、300、400、500、600、700、800、900」の9種類があります。
お好みの文字の太さに変更しましょう。
個人的感想ですが、「100、200、300」と「400、500、600」と「700、800、900」はそれぞれ太さに違いがないように思います。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-QTUszbiOIgw/WznBh-TMnvI/AAAAAAAAG5Y/Ei0cGU4j9lwXI-WJgeo2oKlis0ION6qtgCK4BGAYYCw/s640/11%25E5%25A4%25AA%25E3%2581%2595.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-bnQoUnQ7dPU/WznBtZ4YGYI/AAAAAAAAG5g/JMWKjpWQIIAE3RujpBs5aLmo9O3v4Q_AQCK4BGAYYCw/s640/12%25E5%25A4%25AA%25E3%2581%2595.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-ZSC5y48N3f0/WznBwvnwTKI/AAAAAAAAG5o/3HCtUpqKvDU8XBRwifQT0WO2AcbALeJQACK4BGAYYCw/s640/13%25E5%25A4%25AA%25E3%2581%2595.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-pqDFSbqUHEs/WznB145KZvI/AAAAAAAAG5w/7rjrcZa0S_YaevNrt1XWk4xSXzyedF0VgCK4BGAYYCw/s640/14%25E5%25A4%25AA%25E3%2581%2595.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-NX3ohgruuiY/WznB4vKEH-I/AAAAAAAAG54/m_7jgM0kQyUso22VQd7Mph07ezNDMD71QCK4BGAYYCw/s640/15%25E5%25A4%25AA%25E3%2581%2595.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-Vel16we79jE/WznB7jFaWtI/AAAAAAAAG6A/pRklVZIZUXk29Yl-8Yf5FDGSR6LX6w0uwCK4BGAYYCw/s640/16%25E5%25A4%25AA%25E3%2581%2595.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-7aT0NKIb2_M/WznB-65FJzI/AAAAAAAAG6M/YXZcKbiDUBs6VtsaWg7eXVjRYPd0a4d1gCK4BGAYYCw/s640/17%25E5%25A4%25AA%25E3%2581%2595.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-wFDtRzIW5ao/WznCBnvBVyI/AAAAAAAAG6Y/OP3jqBkaZUsx-j1UC2sIxhjJs7ITC7W1ACK4BGAYYCw/s640/18%25E5%25A4%25AA%25E3%2581%2595.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-JopFag6EOsU/WznCDyDYhMI/AAAAAAAAG6g/FQOZoEN34mYzLn7Qyd5JrRwiVEeRz-TiwCK4BGAYYCw/s640/19%25E5%25A4%25AA%25E3%2581%2595.jpg)
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「文字の装飾」を変更する
ブログタイトルの「文字の装飾」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[.header-title a{]を検索
検索窓に「 .header-title a{ 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-F5u9FMQ8HIE/WzmLxb7jCdI/AAAAAAAAG4Q/eOYRoOeC7uUGk98TSbrSoRPkmmlwucgpwCK4BGAYYCw/s640/3%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB.jpg)
ソースコードの説明は以下の通りです。
- font-size:30px !important; 文字サイズ
- font-weight:700; 文字の太さ
- text-decoration:none; 文字の装飾
- color:$(header.title.color); リンクの文字色
③「文字の装飾」のソースコードを変更
『text-decoration:none; 文字の装飾』の部分が「文字の装飾」のコードになります。
「文字の装飾」は「none」の部分を変更することでできます。
- 「 none 」 装飾なし
- 「 underline 」 下線
- 「 overline 」 上線
- 「 underline dotted red 」 赤いドットの下線
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-cj9HUhyiXxs/WznJXrtX7JI/AAAAAAAAG7E/wrzg-E1nEDgpQVBDRuNMk6XlAodu3kHXQCK4BGAYYCw/s640/21%25E8%25A3%2585%25E9%25A3%25BE.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-B4nh4ldKF1w/WznJZ2MFtxI/AAAAAAAAG7M/bkyLLZvL8CAVj4ni7tDnMcioJ2An3crwACK4BGAYYCw/s640/22%25E8%25A3%2585%25E9%25A3%25BE.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-MQLm2u1CANo/WznJcklx0XI/AAAAAAAAG7U/eTJaBD8UnVQ711x46AyGIol67CA7y3I_gCK4BGAYYCw/s640/23%25E8%25A3%2585%25E9%25A3%25BE.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-1-QokgYwfdE/WznJe0OLjLI/AAAAAAAAG7c/Got3c2CbaPQBIyziUn8Xw68G1DW3jSHmQCK4BGAYYCw/s640/24%25E8%25A3%2585%25E9%25A3%25BE.jpg)
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「配置」を変更する
ブログタイトルの「文字の配置」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[.header h1]を検索
検索窓に「 .header h1 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-iqggGzpEb1o/WznRcz4ptlI/AAAAAAAAG8A/S0H7BiwPrf4kmNmt4y913Qlwu7jVOw74gCK4BGAYYCw/s640/31%25E9%2585%258D%25E7%25BD%25AE.jpg)
文字配置は通常「左揃え」になっています。
「③-1」で”中央揃え”を、「③-2」で”右揃え”を説明します。
③-1「文字配置」を”中央揃え”にする
必要なソースコードを追加します。
追加する位置に注意をしてください。
「.header h1{ }」の中に追加
「 text-align:center; 」を書き加えます。
「.header h1{ }」の下に追加
「 .header-title{ } 」を書き加えます(このとき、すでに書き加えている場合は必要ありません)。
「.header-title{ }」の中に追加
「 text-align:center; 」を書き加えます。
上記の手順で表示させたものが下の画像になります。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-sjRkPJjY97Q/WznT7beEvEI/AAAAAAAAG8M/X0TbOKjacvQAjUUi-xK_6tXyp01nrYJUwCK4BGAYYCw/s640/32%25E9%2585%258D%25E7%25BD%25AE.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-kYcdMbwdbI4/WznWTGlM_sI/AAAAAAAAG8k/hV6S50q1iBQt9ThOfdOae--tYL78XwZYgCK4BGAYYCw/s640/34%25E9%2585%258D%25E7%25BD%25AE.jpg)
③-2「文字配置」を”右揃え”にする
必要なソースコードを追加します。
追加する位置に注意をしてください。
「.header h1{ }」の中に追加
「 text-align:right; 」を書き加えます。
「.header h1{ }」の下に追加
「 .header-title{ } 」を書き加えます(このとき、すでに書き加えている場合は必要ありません)。
「.header-title{ }」の中に追加
「 text-align:right; 」を書き加えます。
上記の手順で表示させたものが下の画像になります。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-j569lRuwa_Q/WznVV8kSkJI/AAAAAAAAG8Y/blnUcBmpIYMcp2eAztxmSdSOWLrvOi4GgCK4BGAYYCw/s640/33%25E9%2585%258D%25E7%25BD%25AE.jpg)
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-7_Qwq1aXSsU/WznWZx8AusI/AAAAAAAAG8s/Vv9MLrOHI0sKmi_Z-PtXTx42HQ8sfDETgCK4BGAYYCw/s640/35%25E9%2585%258D%25E7%25BD%25AE.jpg)
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「文字の色」を変更する
ブログタイトルの「文字の色」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[.header-title a{]を検索
検索窓に「 .header-title a{ 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-F5u9FMQ8HIE/WzmLxb7jCdI/AAAAAAAAG4Q/eOYRoOeC7uUGk98TSbrSoRPkmmlwucgpwCK4BGAYYCw/s640/3%25E3%2582%25BF%25E3%2582%25A4%25E3%2583%2588%25E3%2583%25AB.jpg)
ソースコードは3つの部類に分かれています。
- 「.header-title a{}」 通常時のタイトルの表示設定
- 「.header-title a:hover{}」 タイトルにカーソルが重なったときの表示設定
- 「.header-title a:visited{}」 タイトルをクリック後の表示設定
③ それぞれの表示状態について「文字の色」の設定をする
”通常時” ”カーソルが重なった時” ”クリック後”のそれぞれに「文字の色」のソースコードを設定することによって、文字色を変えることができます。
文字色のソースコードは下のコードになります。
「 color:#〇〇〇〇〇〇; 」 リンクの文字色
設定したい文字色のカラーコードを赤文字の部分に入れ込むことで文字色が変化します。
色のコードは下のサイトで詳しく説明されていますのでご参照ください。
””カラーコード一覧””
「.header-title a{}」の部分にソースコードを加えると”通常時のタイトル表示の文字色”が変更される。
「.header-title a:hover{}」の部分にソースコードを加えると”タイトルにカーソルが重なった時の表示の文字色”が変更される。
「.header-title a:visited{}」の部分にソースコードを加えると”タイトルをクリック後の文字色”が変更される。
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「color:$(header.title.color);」について
このソースコードは別の場所で「文字色」が設定されていることを表しています。
ソースコードの検索において、「 header.title.color 」を検索することで設定している場所を探すことができます。
![Bloggerで始める無料ブログ:「ブログタイトル」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-ClrHxz5GM-U/Wz2C3st2xkI/AAAAAAAAHAE/MdB93nASboY2tpxl1eAP4nt_nFdTB0T5QCK4BGAYYCw/s640/11%25E6%2596%2587%25E5%25AD%2597%25E8%2589%25B2.jpg)
ソースコードは以下に記載したようになっており、
type=”color” default=”#000000″ value=”#000000″/
「value」の後ろのカラーコードを設定することにより、文字色が反映するようになっています。
- default=”#000000″ 初期設定の色
- value=”#000000″ 設定変更した色
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
まとめ:今回のおさらい
今回は、「ブログのタイトル部分」について、5つの項目を説明しました。
- 「文字サイズ」の変更
- 「文字の太さ」の変更
- 「文字の装飾」の変更
- 「配置」の変更
- 「文字の色」の変更
それぞれの説明を分かりやすいように別々に記載しましたが、設定を行うソースコードは同じ場所なので、まとめて設定をすることが可能です。
いろいろ試してみてください(*^^*)