管理メニューの「レイアウト」とテンプレート デザイナーの「レイアウト」とBloggerには二つの「レイアウト」がありますので、お間違えの無いように。

　前回はテンプレート デザイナーの中にある「レイアウト」についての解説を始めたのに、更に詳しく解説する途中で終わってしまって申し訳ありませんでした。それでは「レイアウト」について解説を続けたいと思いますが、おさらいの意味も込めて、もう一度、テンプレートデザイナーのメニュー画面を開いて最初から見てみたいと思います、開いてみましょう！

テンプレート デザイナーを最初に開くと、
画面全体が上下に分かれていることに気づきます。

　大きく二つに分かれた画面は、上の濃いグレーの部分がメニュー画面であり、その下がプレビュー画面です。それぞれの役割については、こちらでは省略しますので、下記のリンク先を参照してください。

　→ ブログのデザイン全体を管理する、テンプレート デザイナーについて検証する！

• テンプレート
• 背景
• 幅を調整
• レイアウト
• 上級者向け

　濃いグレーの左側に並んだ、5つのメニューの中から「レイアウト」をクリックすると、その時のレイアウト状況を反映した、下に示すようなレイアウト画面が開きます。上の濃いグレーのメニュー画面と下のプレビュー画面という構成は同じですが、内容的には、それぞれのメニューに合わせて変化した内容が表示される事になります。

◆メニュー画面は大きく2つに分かれている。

　役割として、更に大きく二つに分けることが出来るメニュー画面は、左側にメニュー項目が有り、右側が指定領域となっていて、メニュー項目は5つの項目が並んでいるだけです。

• テンプレート
• 背景
• 幅を調整
• レイアウト
• 上級者向け

　メニュー項目の右側、サムネールが並んでいるエリアが指定領域ですが、更に二つに分けられて構成されています。

　左が「本文のレイアウト」に関するサムネールの領域
　右が「フッターのレイアウト」に関するサムネールの領域です。

　その指定領域で指定した状況、つまりサムネールを選択した状況が、その下に有るプレビュー画面に反映されるように構成されています。

　実際にレイアウトを開くと、現在のブログの状況がオレンジの枠で囲まれていて、分かりやすく表示されています。その下のプレビュー画面で具体的に確認できるようになっています。

　ここで見せている各画面は、先日までのこのブログの状況ですが、このような状況で指定しながらプレビュー画面で確認して操作を進めるのです。

　プレビュー画面はスクロールすることで全体を見ることが出来ますので使いやすく機能的です。ちなみにプレビュー画面の上にある「▲」の付いた黒い帯をクリックすると、濃いグレー内のメニュー項目や指定領域を見えないようにして、プレビュー画面のみを表示して見ることも可能です。画面全体で確認するのに便利な機能です。

　今まで示してきたメニュー画面とプレビュー画面は、このブログの現在（2016年10月）のレイアウト状況ですが、まず、メニュー画面の左側にあるサムネールの「本文のレイアウト」部分でブログ全体のレイアウトが設定できます。

　下の画像では、ご覧のように左端のサイドバーの無いサムネールがオレンジで囲まれていて、選択されているということが分かり、大まかなレイアウト状況が把握できます。

　指定領域の右側にあるサムネールはフッター部分（ブログの下の方）のレイアウト状況を示していて、この段階でのこのブログの場合だと、フッターの最下部が二つに分かれたレイアウトを選択しています。

　そして、サムネールで選択した状況を下のプレビュー画面で確認すると、確かに下の方が二つに分けられたレイアウトとなっているのが確認できました。

　メニュー画面で選択するサムネールを変更してみると、その状況はすぐに下のプレビュー画面に反映されますので、レイアウトの変化が瞬時に確認できて、直感的に理解できます。


更に細かい変更は、下のプレビュー画面で実際に動かしたいガジェットをセレクトして、配置可能な場所に移動させることでレイアウト変更を行うことが可能です。

　試しに、メニュー画面のサムネールを変えてみたときにどのように変化するのかを確認してみましょう。下に示すサンプル画像をご覧ください。

　例えば、「本文のレイアウト」の下にあるサムネールを下に示すように、上の左から3つ目に変更したいと思い選択すると、下に示すようにオレンジに囲まれますので、サムネールを選択したことが分かります。

　その結果はすぐに、下のプレビュー画面に反映されました。サムネールで示すように右側のサイドバーがさらに二つの項目で分けられている状況が確認できます。

　フッターのサムネールは最後の部分が2つに分けられたレイアウトのままですので、前に示した画像を参照してください。

サムネールが決まると、実際にガジェットを移動するだけですので、実に直感的で分かりやすく、簡単に行えます。

　サムネールで大まかなレイアウトを決めて、そのサムネールの状況をレイアウトのプレビュー画面でどうなっているのかを確認しながら、細かい修正を繰り返すことで、ブログのレイアウトを完成させていくのです。

　しかし、今までの流れの中では、実際に公開される場合のプレビューを見ることはできませんでした。最終確認として、ブログが実際に公開される場合に、どのように表示されるのか確認する必要があります。

　メニュー画面のレイアウトの下に「上級者向け」という項目が有りますので、そこをクリックすると、さっきまでレイアウト用のプレビュー画面だった下の部分が変わって、実際に公開する場合と同じ状況のプレビュー画面を見れるようになり、最終確認が出来るようになります。

　このプレビュー画面で確認して修正したい箇所があれば、再びレイアウトに戻って修正を加えて完成させることが出来ますし、問題なければ画面の右上にあるオレンジの「ブログに適用」ボタンを押せばすぐにブログに反映されて公開することが出来るのです。

　テンプレート デザイナーのメニュー項目から「レイアウト」について解説してきました。

　最後まで読んでいただき、感謝致します。