背景画像【旅行】から、ニューヨークの有名な駅についての画像を使用して、レイアウトを工夫したサンプルを公開します。

テンプレート【ウォーターマーク 02】と、背景画像のテーマ・カテゴリーの中から【旅行】を取り上げて、その中から選んだ背景画像を組み合わせることで、ブログにどのような変化が起きるのかを検証しています。

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


◆ブログのメイン風景として、何を使うのか悩むのも楽しいものです。

　今回使用する背景画像は、【旅行 04-1】のニューヨーク、マンハッタンにあるグランド・セントラル駅を写した風景写真です。ニューヨークに旅行してこの場所を訪れたら、きっと喧騒とした同じような光景を目の当たりにして、思わずシャッターを切っているのではないでしょうか。

　今回は、画像を効果的に見せるために、記事の部分を真ん中にレイアウトしながらも背景画像のメイン部分を妨げないように、文字の配置や大きさなど、細かい修正をかけて工夫しました。

　全体的にシンメトリーで構成された印象のあるグランド・セントラル駅の画像に対して、タイトル文字を、あえて左側に寄せて重要なセンター部分を開けるように配置していますが、大きく扱い、画像とのバランスを取っています。

　大きな建造物の中を移動する人々の姿を流れるように捉えていて、まるで映画のワンシーンを切り取ったようでもあり、また、セピア調に演出することで歴史のある駅の雰囲気を醸し出していて、気に入っています。



◆この記事に関連する他の記事はこちら。

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

　→ テンプレート【ウォーターマーク02】を基本として、背景画像を変更するだけで、どのようなことが出来るのか検証してみます。

　→ 背景画像【旅行 - Travel】について

◆ブログの制作工程を簡素化する Blogger のテンプレート。

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

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

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


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


◆この記事掲載時のテンプレート デザイナーの指定内容まとめ

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

◆上級者向け指定内容

• ページのテキスト ： フォント Arial 15px、テキストの色 #1f1605、
• 背景 ： 外側の背景 #ac863f、フッターの背景 #000000、
• リンク ： リンクの色 #c53820、表示済みの色 #660000、カーソルを合わせた時の色 #ff573c、
• ブログのタイトル ： フォント Arial、B、120px、タイトルの色 #ac863f、
• ブログの説明 ： 説明の色 #c53820、
• タブのテキスト ： フォント Arial、B、11px、テキストの色 #621c10、選択済みの色 #000000、
• タブの背景 ： 背景色 #ac863f、区切りの色 #c53820、
• 日付ヘッダー ： フォント Arial、B、13px、テキストの色 #ead3ae、
• 投稿 ： タイトルのフォント Arial、B、20px、背景色 #ffffff、枠線の色 #c4ad8a、
• 投稿のフッター ： テキストの色 #72553f、
• ガジェット ： タイトルのフォント Arial、13px、タイトルの色 #000000、代替色 #585858、
• フッター ： テキストの色 #c4ad8a、ガジェットのタイトルの色 #ead3ae、
• フッターのリンク ： リンクの色 #ff573c、表示済みの色 #c53820、カーソルを合わせた時の色 #ff8063、
• CSSを追加 ：

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

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

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

◆画像についての解説

　→ 背景画像について！

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

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