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

背景画像は同じでもテンプレートのバージョンを変更することによって、ブログ全体に対してどのような変化が起きるのか、あるいは、その逆の場合はどうなのかなどを検証しながら、ブログ制作の参考になれるような、サンプル画像を掲載しています。


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

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

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


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

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

　実はこの「透明 01-3」は、以前取り上げたテーマ「パターン」の中にも組み込まれていましたので一度取り上げて使用した経緯があります。その時はウォーターマーク 01を使用しましたので今回とは全く印象が違うと思いますので、サンプル画像を実際にご覧ください。

　→ 【ウォーターマーク01】 ＋ 背景画像 【パターン-03-3】

　また、他のテンプレートでも使用していて、結構使い勝手のいい素材で重宝しています。その時使用したテンプレートはエスィリアルでしたが、今回と違い、扱いとしては記事を取り囲む帯のような感じで使用していますので、この画像の良さをあまり生かせなくて、効果的な使い方ではなかった気がして反省しています。

　→ テンプレート【エスィリアル03】 ＋ 背景画像【パターン-03-3】

　透明の場合は「01-3」、パターンの場合が「03-3」という番号になっていますが、基本的に同じ素材ですので、「パターン」と「透明」の、どちらの引き出しから取り出して使うかという違いしかありませんので、どちらでも好きな方からご使用ください。

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

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

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

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

◆上級者向け指定内容

• ページのテキスト ： フォント Arial 13px、テキストの色 #ffffff、
• 背景 ： 外側の背景 #4572ba、フッターの背景 #000000、
• リンク ： リンクの色 #00e3ff、表示済みの色 #ffbf5e、カーソルを合わせた時の色 #9aff5e、
• ブログのタイトル ： フォント Arial、B、74px、タイトルの色 #ffffff、
• ブログの説明 ： 説明の色 #e0e6ff、
• タブのテキスト ： フォント Arial、B、12px、テキストの色 #b4ccec、選択済みの色 #ffbf5e、
• タブの背景 ： 背景色 transparent、区切りの色 #ffbf5e、
• 日付ヘッダー ： フォント Arial、13px、テキストの色 #e0e6ff、
• 投稿 ： タイトルのフォント Arial、B、19px、背景色 transparent、枠線の色 #91a8c8、
• 投稿のフッター ： テキストの色 #183e7c、
• ガジェット ： タイトルのフォント Arial、14px、タイトルの色 #e0e6ff、代替色 #91a8c8、
• フッター ： テキストの色 #91a8c8、ガジェットのタイトルの色 #b4ccec、
• フッターのリンク ： リンクの色 #00cee7、表示済みの色 #45ba8d、カーソルを合わせた時の色 #9aff5e、
• CSSを追加 ： 

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

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

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

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

　→ 背景画像「透明」について！

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

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