背景画像で見せたい部分がある場合に、記事が被さらないようにレイアウトを工夫する方法もあるのです。


先日、セルフィーのタイミングに合わせて、ブログのデザインを見直しました。今回の変更点は背景画像を入れ替えて、レイアウト全体を少し変えた点です。特に、最初に目につく更新記事などを画面の真ん中から左に移動しています。それと、フッター部分のレイアウトを全面的に修正しました。

背景画像とレイアウトを更新した最新状況


◆背景画像の有効活用!

 Blogger には、基本的に背景画像が約400種類ほど用意されていて、全部で19テーマに分けられています。

 それを自由に使用してブログにレイアウトすることができますので、自分の表現したいブログのテーマに沿って選択したり、記事内容に添ったイメージに絞って使用したり、あるいは、ブログ全体のイメージ作りとして採用して、末永く使っていくという方法が有ります。

 今回このブログで使用しているような感じで、四季の変化に合わせたイメージ画像として使用することで、場合によっては、ブログ全体のイメージアップにつながるかもしれませんし、使い方次第で、予想以上の効果を発揮する可能性もあると思います。

 また、オリジナルの背景画像を使用することもできるようですので、更にオリジナル感を目指してブログを構築することも可能であり、意外と自由度は高いのです。しかし、このブログではまだ、オリジナル画像を使用したことがありませんので、技術的なことを云うのは、控えて置きましょう。

 どのようなテーマで、どのような種類の背景画像があるのかについては、解説しているブログをいくつか公開していますので参照してください。



◆レイアウトのちょっとした工夫で見せたい部分を見せる方法。

 ところで、今回のレイアウト変更で、記事のエリアを左端に集めて、右側に空間を作るようなレイアウトにしていますが、これは背景画像の内容によって、見せ場のようなものがあると思いますので、それをちゃんと見せたいという目的で、このようにレイアウトしてみました。

 今回使用している背景画像は、紅葉が落ちていく状況をとらえた画像ですので、右側に集中する、メインの紅葉をしっかりと見せたいと思いました。

 また、メインである右側の静止した紅葉の木々の部分をしっかりと見せ続けながらも、記事のバックには半透明な背景画像が残りますので、単純なスクロールの中に若干の動きが加わり、落葉感も演出しています。(ちょっと大げさ!)

 画像の見せたい部分について、あえてしっかり見せるために、このようなレイアウトにしていますが、本来であれば右側の空間は、多くのガジェットで構成されたアーカイブやアドセンスなど、多くの情報を見せるために欠かせない重要な場所であり、それらの情報について、どう管理するのかについても考える必要が有ります。

 ちなみに、ブラウザの右肩にある最大化(PCの場合)をクリックした場合には、こんな感じで見ることが出来ました。更に左側の空間が広がりましたが、下の方に積もった紅葉が見えなくなってしまったのは残念です。でも、全体にすっきりと収まっていますね。


ブラウザを最大化にして、全体を見た時の状況。


◆必要な情報については、全てフッター部分に集約しました。

 多くの情報をこのようにフッター部分に集約する方法も、特に目新しいものではなく、一般的によく使われている方法ですが、ほとんどの場合は、左右どちらかのサイドバーと共に存在しているのが普通だと思いますので、情報量は多くなるはずです。

 つまり、その様なレイアウトにしないと収めきれないほどの情報量が有ればいいのですが、このブログのように、大量の情報量を持ち合わせていない場合には、逆に、空間を生かしたレイアウトも可能であり、このようなレイアウト方法も有効だと思うのです。


 次回は、今回のようなレイアウトを実現するための、テンプレートデザイナーを使った指定方法について、解説してみたいと思います。

コメント

▼ 人気の投稿