テンプレート【ウォーターマーク02】 ＋ 背景画像 【旅行 01-3】

テンプレート【ウォーターマーク 02】と【旅行 01-3】の背景画像を組み合わせてブログのサンプルを公開しています。背景画像を変更するだけでブログの印象が違います。新たに制作するブログにご活用ください。

【旅行】の背景画像は、全部で４５種類が用意されています。


　Googleが提供している無料ブログシステムのBloggerを実際に使っていく場合に、ブログ全体のデザインについてどうしようかと悩むと思いますが、その全体のデザインを向上させるために、Bloggerでは多数のデザインフォーマットを用意していて、そのフォーマットのことをテンプレートといいます。

　現在のところ、全34種類のテンプレートが用意されていますので、ブログ制作者は、その中から自分のブログのイメージに合ったテンプレートを選び、使用することができます。背景のイメージ画像を変更することで、さらにバリエーションを増やせますので、そのデザイン的な効果は、ほぼ無限大と云えます。

　※記事を作成し、写真とともに投稿すると、このサンプル記事のような感じで掲載することが出来ます。写真のサイズや文字の大きさ、種類、色についても、自由に、変えられ、ます。


　背景画像は同じでもテンプレートのバージョンを変更することによって、ブログ全体に対してどのような変化が起きるのかなど、イメージ画像で確認出来ると思います。今後のブログ制作の参考になれば幸いです。


◆使用テンプレート【ウォーターマーク 02】

　基本デザインとして全4種類が用意されているテンプレート「ウォーターマーク」の中から、今回使用したのは「02」です。背景画像は「旅行 01-3」を使用しました。

　ブログを制作していく中で、この「旅行 01-3」のような、いわゆる風景写真などをブログのメイン画像として使いたいという事もあるかと思いますが、このような風景画像の場合、通常は記事と写真を別々に配置しますので、見せたい部分と文字とが重ならないようにすることが出来ますし、レイアウト的にもその方法が楽になります。

　しかし、タイトルバックやメインで扱う画像の場合など、あえて画像と文字を重ねるようなデザイン的な工夫をする場合もあるはずです、そして、そのような場合に、重ねて表示させてもお互いに邪魔にならないようにするための工夫が必要になります。

　例えば、写真のコントラストを落として薄い色味に落として、白い幕が掛かったような状態に加工すると、バックにある画像が薄く透けて見えるような状態になりますので、そこに文字を重ねても文字がちゃんと読めるようになり画像の影響が薄れるのです。

　画像と記事のエリアとが重なる場合にどうしてもその様な工夫が必要であり、文字と画像を Photoshop などの画像処理用のソフトを使て重ねて一つの画像にしてしまうなど、いろんなテクニックを駆使して表現しているのです。

　しかし、今はそのようなテクニック的な話をしたいわけではなくて、あくまでも Blogger のテンプレート デザイナーなどの機能を使用して、ブログのデザイン表現として、どのような事が可能であるかなどを追求していますので、その一つの例として記事にして取り上げているのです。

　単純なことですが、今回のように、多くの建物が写っていることで、見る要素が多い複雑な風景写真の場合などでは、見せたい部分を絞り込むことが難しいことがありますが、あえてそれを強調するために、わざと写真を隠しながらもレイアウト的に空間を作って、見せたい部分を見せるようなレイアウトも可能であり、そのような見せ方も試してみる価値があると思い、提案しているのです。

　今回使用している画像の場合、後で調べて分かったことですが、おそらくイタリアのローマ、ベネチア周辺の写真だという事がわかりました。正面左側にヴェネツィア広場のヴィットーリオ・エマヌエーレ２世記念堂と正面遠くにカピトリーノ美術館だと思う建物が見えますし、勘違いしている可能性もありますが、見覚えもありましたのでそうだと思います。

　ただし、私が気に入っているのは手前右側にあるドーム状の教会（だと思いますが？）です。この画像の場合何がメインだろうかと眺めていて、やはり右側の大きく映し出された教会を手前にしながら、遠近感を生かして映し出した有名な観光地を見せたかったのだと思います。

　しかし、それはそうだと思いながらも、自分としては手前右側にあるドーム状の建物が気に入っていることは間違いありませんので、実際に見せたい画像が何にしろ、メインの画像が街並みでありゴチャゴチャしていますので、使うにはそれと重なるように記事を載せるしかありませんでした。

　記事と画像が重なり合ってしまうのを避けることが、どうしても出来ませんので、色々と考えて、今回のように右側を強調して見せることで、画像の見せたい部分を多少は犠牲にしながらもそれを最小限で押さえつつ、違和感のないように遠くの建物も見せることが出来るレイアウトにすることが出来ました。

　このように右側のエリアを、あたかもメインとしてその右側部分を強調して見せるレイアウトにすることで、たとえ記事の下に消えてしまう部分があったとしても、それが意図的になされているので、実際に違和感なくレイアウトできたと思うのです。

　このレイアウトを実現するために、本来であれば右側にレイアウトしていて、様々な情報を掲載しているようなサイドバーの役割をあえて無くして、写真がしっかり見れるように変更したことが効果的でした。

　サイドバーで配置するはずだったそれぞれのガジェットは、全てフッター部分に集約していますので、記事のエリアとその他のエリアを完全に分けることが出来ましたし、逆に一か所に集約することでスクロールを最小限に抑えて見せることが出来るという便利さを閲覧者に提供することもできます。

　ここで使用した画像は Blogger に最初から収められているサンプル画像を使用しているのですが、例えばオリジナル画像を使用することも可能ですので、その場合でも、今回のような見せ方を取り入れる事で、自分の好きな画像を効果的に演出して見せる一つの方法として、有効ではないかと思います。

◆テンプレート、背景画像の各呼名の意味

• テンプレート名 = ウォーターマーク
• テンプレート番号 = 02
• 背景画像 = 旅行 01-3
• 01 = サムネールの1列目
• 3 = サムネール左から3番目

◆テンプレート デザイナー指定内容まとめ

• テンプレート ＞ 【ウォーターマーク 02】
• 背景 ＞ 背景画像 ＞ 旅行 01-3
• 幅を調整 : ブログ全体990px、右側のサイドバー330px
• レイアウト ： ブログ参照
• 上級者向け ： 指定した内容のみ記載、下記参照。

◆上級者向け指定内容

• ページのテキスト ： フォント Arial 15px、テキストの色 #333333、
• 背景 ： 外側の背景 #c06a54、フッターの背景 #330019、
• リンク ： リンクの色 #cc0034、表示済みの色 #99224d、カーソルを合わせた時の色 #ff004e、
• ブログのタイトル ： フォント Arial、B、80px、タイトルの色 #ffffff、
• ブログの説明 ： 説明の色 #ffffff、
• タブのテキスト ： フォント Arial、B、11px、テキストの色 #444444、選択済みの色 #000000、
• タブの背景 ： 背景色 transparent、区切りの色 #dd384a、
• 日付ヘッダー ： フォント Arial、14px、テキストの色 #ffffff、
• 投稿 ： タイトルのフォント Arial、B、20px、背景色 #ffffff、枠線の色 #cca199、
• 投稿のフッター ： テキストの色 #995555、
• ガジェット ： タイトルのフォント Arial、14px、タイトルの色 #000000、代替色 #777777、
• フッター ： テキストの色 #cca199、ガジェットのタイトルの色 #eec3bb、
• フッターのリンク ： リンクの色 #ff5589、表示済みの色 #995555、カーソルを合わせた時の色 #ff779a、
• CSSを追加 ：

　通常のブラウザの設定では、背景画像は左右に少ししか見えない状態ですので、ブラウザ右上にある最大化をクリックして、是非全体像をご覧ください、印象がだいぶ違います。

　イメージ画像ではよくわからないという方のために、サンプル画像との組み合わせの他、ウォーターマークの各テンプレートと、その他の背景画像とを組み合わせた状況でブログ全体をご覧いただけるようにすることもできます。

　ブログ全体を実際に使用できる状態でご覧になりたいというご希望があれば、ご希望の組み合わせで使用できるようにして対応させていただきますので、下記の「コメント投稿」欄から、ご希望の組み合わせ等をお寄せ下さい。

◆使用画像についての解説は

　→ 背景画像「旅行」について！

◆リクエスト方法については

　→ テンプレート・リクエスト方法