サイト管理者の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-description p]を検索
検索窓に「 .header-description p 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-IWbPy5leegM/WznbBtriZuI/AAAAAAAAG9I/bSjjMIoppasXReV0L48m9MGB7xndh0tGwCK4BGAYYCw/s640/1%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E8%25AA%25AC%25E6%2598%258E.jpg)
ソースコードの説明は以下の通りです。
- font-size:13px; 文字サイズ
- margin-top:5px; ブログ説明文の上外側の余白
- color:$(header.description.color); 文字色
- text-align:center; 文字の配置
※文字配置のコードは初期設定ではありません。あとで追加したものです。
③「文字サイズ」のコードを変更
『font-saize:13px; 文字サイズ』の部分が「文字サイズ」のコードになります。
数値を大きくすると文字は大きくなり、小さくすると文字は小さくなります。
自分の好みの文字サイズに変更しましょう。
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-N2Mf5l87Qa4/Wznkbi86ZFI/AAAAAAAAG-M/6uw59_ij4RsJAP69tNCnyaW969H52rc7wCK4BGAYYCw/s640/2%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E8%25AA%25AC%25E6%2598%258E.jpg)
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-btUb2QO6qVY/WznkeW5BYFI/AAAAAAAAG-U/B_FFJ7_p9eUCL5l5RIB438k2bCwRwyAIQCK4BGAYYCw/s640/3%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E8%25AA%25AC%25E6%2598%258E.jpg)
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-XXFFX3LSUqU/Wznj6pNweOI/AAAAAAAAG9s/9MNaEbLlovwUb6SfaMY_gDllcyqu-vGHgCK4BGAYYCw/s640/4%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E8%25AA%25AC%25E6%2598%258E.jpg)
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-40lpdGLcNaQ/Wznj8tpMe_I/AAAAAAAAG90/OQLSfZY4lyoHNOCzYfpbOsvxsrXaLTzCwCK4BGAYYCw/s640/5%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E8%25AA%25AC%25E6%2598%258E.jpg)
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「配置」を変更する
ブログ説明文の「配置」を変更していきます。
①検索窓を表示する
まずは、ソースコードを検索できる状態にします。
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/--7g_8gmLFsY/XElPnqaCwbI/AAAAAAAALO8/2tOj0xOnlMcWU_Xc3gx0MkVnwC1Quyl7QCK4BGAYYCw/s640/5%25E5%25B9%2585.jpg)
②[.header-description p]を検索
検索窓に「 .header-description p 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-IWbPy5leegM/WznbBtriZuI/AAAAAAAAG9I/bSjjMIoppasXReV0L48m9MGB7xndh0tGwCK4BGAYYCw/s640/1%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E8%25AA%25AC%25E6%2598%258E.jpg)
ソースコードの説明は以下の通りです。
- font-size:13px; 文字サイズ
- margin-top:5px; ブログ説明文の上外側の余白
- color:$(header.description.color); 文字色
- text-align:center; 文字の配置
※文字配置のコードは初期設定ではありません。あとで追加したものです。
「③-1」で”中央揃え”を、「③-2」で”右揃え”を、「③-3」で”左揃え”を説明します。
③-1 「文字配置」を”中央揃え”にする
『text-align:center; 文字の配置』の部分が「文字の配置」のコードになります。
最初はこのコードはない状態だと思うので、「 text-align:center; 」のコードを追加してください。
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-jJsL2iAuSzE/WzrHdD1LkEI/AAAAAAAAG-w/Aj38sRGU5moGLPcBWxH8pZyvH6zkye__QCK4BGAYYCw/s640/11%25E9%2585%258D%25E7%25BD%25AE.jpg)
③-2「文字配置」を”右揃え”にする
『text-align:center; 文字の配置』の部分が「文字の配置」のコードになります。
最初はこのコードはない状態だと思うので、「 text-align:right; 」のコードを追加してください。
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-KsXko8uQXm0/WzrHiMhYQGI/AAAAAAAAG-4/1_0e3cDxqmc6mhnO27fICZCmvxADF41nQCK4BGAYYCw/s640/12%25E9%2585%258D%25E7%25BD%25AE.jpg)
③-3「文字配置」を”左揃え”にする
『text-align:center; 文字の配置』の部分が「文字の配置」のコードになります。
最初はこのコードはない状態だと思うので、「 text-align:left; 」のコードを追加してください。
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-dlP3gKacAgs/WzrHmxutgHI/AAAAAAAAG_A/5Ey63UtoJQkrg4FH9zTwwk5lRIAKaSD4ACK4BGAYYCw/s640/13%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-description p]を検索
検索窓に「 .header-description p 」を入力して検索し、ソースコードを表示します。
![Bloggerで始める無料ブログ:「ブログ説明文」をカスタマイズする【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-IWbPy5leegM/WznbBtriZuI/AAAAAAAAG9I/bSjjMIoppasXReV0L48m9MGB7xndh0tGwCK4BGAYYCw/s640/1%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E8%25AA%25AC%25E6%2598%258E.jpg)
ソースコードの説明は以下の通りです。
- font-size:13px; 文字サイズ
- margin-top:5px; ブログ説明文の上外側の余白
- color:$(header.description.color); 文字色
- text-align:center; 文字の配置
※文字配置のコードは初期設定ではありません。あとで追加したものです。
③ ブログ説明文の「文字の色」の設定をする
『color:$(header.description.color);』 文字色の部分が「文字の配置」のコードになります。
このコードを下の形式に書き換えます。
「 color:#〇〇〇〇〇〇; 」
設定したい文字色のカラーコードを赤文字の部分に入れ込むことで文字色が変化します。
色のコードは下のサイトで詳しく説明されていますのでご参照ください。
””カラーコード一覧””
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
「color:$(header.description.color);」について
このソースコードは別の場所で「文字色」が設定されていることを表しています。
ソースコードの検索において、「 header.description.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″ 設定変更した色
すべてのソースコードの変更・追加が終了したら、「テーマの保存」をクリックして作業終了になります。
まとめ:今回のおさらい
今回は、「ブログの説明文」について、3つの項目を説明しました。
- 「文字サイズ」の変更
- 「配置」の変更
- 「文字の色」の変更
それぞれの説明を分かりやすいように別々に記載しましたが、設定を行うソースコードは同じ場所なので、まとめて設定をすることが可能です。
いろいろ試してみてください(*^^*)