サイト管理者のGigo(ジーゴ)です(*^^*)
Googleが提供している無料ブログサービス「Blogger」について、「使い方とカスタマイズ方法」をまとめています。
他にも詳しく無料ブログのBloggerをまとめている方がいらっしゃるので、その方たちのサイトと合わせてご利用いただければと思います(^^)
今回は、Vaster2をBloggerブログのテーマに設定した後のレイアウトについて説明していきます。
レイアウトを整理する
BloggerにVaster2を設定してサイトを表示すると、期待していたきれいなレイアウトの状態とはまったく異なり、めちゃくちゃな状態になっています。
始めて作業されている方はとてもおどろく光景です。
下の画像は実際にVaster2を設定直後にサイトを表示したものです。
なぜか「関連サイト」がヘッダーと記事リストの間にへんなふうに表示されています。
![Bloggerで始める無料ブログ:レイアウトを整理する【無料ブログBloggerの使い方とカスタマイズ方法】](https://3.bp.blogspot.com/-8t1Cxav5Iwc/Wwew0HA5sfI/AAAAAAAAF_Q/ygWdFMp2dVYravknwOt9ayqTA59_UzeagCK4BGAYYCw/s640/1.jpg)
これでは、せっかくのVaster2のテーマも台無しです。
まずは、このめちゃくちゃになっているレイアウトをきれいに整理していきましょう。
①「ブログ管理画面のレイアウト」をクリック
レイアウトの整理は「ブログ管理画面メニューのレイアウト」から設定します。
左下にある「レイアウト」をクリックしましょう。
![Bloggerで始める無料ブログ:レイアウトを整理する【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-cE_gLnKCYe0/Wwew4U4HSEI/AAAAAAAAF_Y/LsPcZsLZDVAPZVEoWKIeTYAyiyrx4wBpACK4BGAYYCw/s400/3.jpg)
②ガジェットの移動
レイアウトを表示すると4つのセクションに区切られていることが分かります。
- header
- main
- sidebar-section
- footer
![Bloggerで始める無料ブログ:レイアウトを整理する【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-KErht9LjvnI/WyNaXys35GI/AAAAAAAAGVE/PQIpRyMaJG0IQHxfS8w3Fj_InAFw9nEgACK4BGAYYCw/s400/1%25E3%2583%25AC%25E3%2582%25A4%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588.jpg)
![Bloggerで始める無料ブログ:レイアウトを整理する【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-hexFPHdQx28/WyNadUc1vOI/AAAAAAAAGVM/jcxcZgzh9ykSdjepSMCWyfSDjJ-uI-2mACK4BGAYYCw/s400/2%25E3%2583%25AC%25E3%2582%25A4%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588.jpg)
![Bloggerで始める無料ブログ:レイアウトを整理する【無料ブログBloggerの使い方とカスタマイズ方法】](https://1.bp.blogspot.com/-QSyfEdjqZk4/WyNahLPPNFI/AAAAAAAAGVU/VG2BjJPnd-00_D1Ou52GutezepRUaVzPwCK4BGAYYCw/s400/3%25E3%2583%25AC%25E3%2582%25A4%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588.jpg)
![Bloggerで始める無料ブログ:レイアウトを整理する【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-HY-KimkOe88/WyNajrdqWQI/AAAAAAAAGVc/adaKzJYx6oUFkx1M-UvsmkQ2ZruF0hyVQCK4BGAYYCw/s400/4%25E3%2583%25AC%25E3%2582%25A4%25E3%2582%25A2%25E3%2582%25A6%25E3%2583%2588.jpg)
この4つのセクションは、サイト上でのそれぞれの配置を表しています。
![Bloggerで始める無料ブログ:レイアウトを整理する【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-xd-8VUpIXX8/WwerR-jv6cI/AAAAAAAAF-U/NIo_jrwQQEgiLzjRpZ-9sxjDrNhET8tVQCK4BGAYYCw/s400/4.jpg)
それぞれのセクションの枠内に「ガジェット」を配置することによってブログのレイアウトを変更することができます。
ガジェットの移動は、移動したいガジェットをドラッグ&ドロップすることで移動させることができます。
ちなみに、筆者はタイトルと投稿記事の間にあった「関連サイト」が見栄えが悪く邪魔だったので、「header」と「main」に自動設定してあったいらないガジェットを移動しました。
- header・・・「ページヘッダーガジェット」「ページガジェット」のみ設定
- main・・・「ブログの投稿ガジェット」のみ設定
![Bloggerで始める無料ブログ:レイアウトを整理する【無料ブログBloggerの使い方とカスタマイズ方法】](https://4.bp.blogspot.com/-xWmiAg37dP4/Wwew7hvcR6I/AAAAAAAAF_g/Tzb96fYa1PEkLYpYjJ69qlJCTaptUGxawCK4BGAYYCw/s640/2.jpg)
無事にガジェット移動が終了し、ブログを表示するとすっきりしたことがわかります。
![Bloggerで始める無料ブログ:レイアウトを整理する【無料ブログBloggerの使い方とカスタマイズ方法】](https://2.bp.blogspot.com/-DGEimbL2ExQ/WwewNvjuoLI/AAAAAAAAF_E/608x6xWmfnU0061B7jqZ_hOSCBZ5C17CACK4BGAYYCw/s640/5.jpg)
まとめ:今回のおさらい
今回は、BloggerブログのテーマにVaster2を設定した直後のレイアウトの状態について説明しました。
レイアウトの設定はそんなに難しいものではないのですが、新しいテーマを設定していきなりめちゃくちゃな状態だと結構驚いてしまいます。
より良いサイト作りを行うために、レイアウトの整理をさっさと済ませてしまいましょう。