Googleが提供している無料ブログシステムのBloggerを実際に使っていく場合に、ブログ全体のデザインについてどうしようかと悩むと思いますが、そのブログ全体のデザインを向上させるために、Bloggerでは多数のデザインフォーマットを用意していて、そのフォーマットのことをテンプレートといいます。
現在のところ、全34種類のテンプレートが用意されていますので、ブログ制作者は、その中から自分のブログのイメージに合ったテンプレートを選び、使用することができます。背景のイメージ画像を変更することで、さらにバリエーションを増やせますので、そのデザイン的な効果は、ほぼ無限大と云えます。
※記事を作成し、写真とともに投稿すると、このサンプル記事のような感じで掲載することが出来ます。写真のサイズや文字の大きさ、種類、色についても、自由に、変えられ、ます。
◆使用テンプレート【画像ウィンドウ 02】
基本デザインとして全3種類が用意されているテンプレート「画像ウィンドウ」の中から、今回使用したのは「02」です。背景画像は「旅行 02-4」を使用しました。
おそらく誰もが、すぐにイギリスのロンドン市街を写した風景写真だと分かる背景画像の一つです。そびえたつ通称ビッグベン（正式名称：エリザベス・タワー）の時計台を背景にして、手前に有名な２階建てバスが走っているという、誰もが一度は目にしたことのある光景ではないでしょうか。
あまりにもオーソドックスな設定ではありますが、手前を走る２階建ての赤いバスが、スローシャッターで流れるように捉えられていることで動きを表現している点が気にいりました。
更に、風景の色味全体をハイトーン（ハイライト？）に明るく飛ばし気味にしていて、白バックを生かしたコントラストの効いた仕上げにすることで効果を上げている点がいいですね。
白が効いたコントラストの画面が、いろんな要素が混じりあう都会の喧騒をシンプルに一枚に凝縮しているようで、画面全体を見やすくまとめている気がします。
◆テンプレート、背景画像の各呼名の意味
- テンプレート名 = 画像ウィンドウ
- テンプレート番号 = 02
- 背景画像 = 旅行 02-4 → 背景画像「旅行」について！
- 02 = サムネールの2列目
- 4 = サムネール左から4番目
◆テンプレート デザイナー指定内容まとめ
- テンプレート ＞ 【画像ウィンドウ 02】
- 背景 ＞ 背景画像 ＞ 旅行 02-4
- 幅を調整 : ブログ全体780px、サイドバー無し
- レイアウト ： ブログ参照
- 上級者向け ： 指定した内容のみ記載、下記参照。
◆上級者向け指定内容
- ページのテキスト ： フォント Arial 15px、テキストの色 #7c7c7c、
- 背景 ： 外側の背景 #797979、ヘッダーの背景 transparent、投稿の背景 #ffffff、
- リンク ： リンクの色 #c65555、表示済みの色 #d78787、カーソルを合わせた時の色 #ff5f6c、
- ブログのタイトル ： フォント Arial 80px、テキストの色 #ff5f6c、
- タブのテキスト ： フォント Arial 11px、テキストの色 #ffffff、選択済みの色 #c65555、
- タブの背景 ： 背景色 transparent、選択済みの色 #ff5f6c、区切りの色 transparent、
- 投稿タイトル ： タイトルのフォント Arial、B、19px、
- 日付ヘッダー ： テキストの色 #7c7c7c、
- 投稿 ： フッターのテキストの色 #a2a2a2、枠線の色 #e8e8e8、
- ガジェット ： タイトルのフォント Arial、B、100％、タイトルの色 #a2a2a2、
- フッター ： テキストの色 #d9d9d9、ガジェットのタイトルの色 #bcbcbc、
- フッターのリンク ： リンクの色 #f2b2b8、表示済みの色 #f19c95、カーソルを合わせた時の色 #ff5f6c、
- CSSを追加 ：
通常のブラウザの設定では、背景画像は左右に少ししか見えない状態ですので、ブラウザ右上にある最大化をクリックして、是非全体像をご覧ください、印象がだいぶ違います。
◆使用画像についての解説は
→ 背景画像「旅行」について！
◆リクエスト方法については
→ 使用テンプレート・リクエスト方法
0 件のコメント:
コメントを投稿
ご覧いただき感謝します。ご意見やご質問がありましたら、下記のコメント欄へお願い致します！