2016年11月4日金曜日

テンプレート【エスィリアル01】 + 背景画像【旅行 06-5】


背景画像【旅行 06-5】

テンプレート【エスィリアル 01】と【旅行 06-5】の背景画像を組み合わせてブログのサンプルを公開しています。背景画像を変更するだけでブログの印象が違います、新たに制作するブログにご活用ください。

「旅行」の背景画像は、全部で45種類です。

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

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

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




◆使用テンプレート【エスィリアル 01

 基本デザインとして全3種類が用意されているテンプレート「エスィリアル」の中から、今回使用したのは「01」です。背景画像は、初めて使用するテーマ「旅行」から「06-5」を採用しました。

 エスィリアルのテンプレートは、記事を掲載しているエリアが白地であるため、その記事エリアと背景画像が完全に分離された状態で使用されるのが普通であり、それが基本的なデザイン・フォーマットです。

 しかし、そのままでは、どれも代り映えしないために面白さが無くて物足りないので、前回に引き続き今回も、記事エリアの白地部分と背景画像の枠組みを無くして、記事と背景画像の両方が一つとして成り立つようにレイアウトします。あえて基本的なデザイン・フォーマットを崩しながら、レイアウト的にも工夫して表現したいと思います。

 今回使用している背景画像は、「旅行」というテーマの中に組み込まれていますが、どうも旅行のイメージがが湧きません。このイラストの何が「旅行」なのか、なぜ「旅行」のテーマに組み込まれているのか?

 素朴な疑問が起きました。

 イラスト全体を眺めてみると、まず、そのタッチに個性を感じますが、イラスト作画専用のソフトを使うといろんなタッチを瞬時に実現できるのが現状ですので、おそらくこのイラストもその辺のテクニックを使って描いた可能性はかなり高いように思います。

 描かれた内容としては、様々な要素からなる、コラージュのような感じを受けました。また、都会を思わせるビルが、どこか廃墟を思わせる雰囲気を感じます。

 そう感じたのは、きっと、手前にある金網と有刺鉄線、そして「DO NOT ENTER」の看板によるイメージが、そう喚起しているのかも知れません。

 その金網と有刺鉄線に絡むように花のシルエットが見えますので、もしかしたら、立ち入り禁止のイメージが強い軍事施設などをイメージしたイラストなのかも知れませんが、真相は分かりません、あくまでも個人的な感想です。

 そんなことを想像しながら眺めていると、イラストの中に描かれている鳥の姿が、平和の象徴である鳩のようにも見えてきます。

 空を舞う鳥の姿は、鷲や鷹のようにも見えますが、右端の街灯の上にいる鳥だけは、平和を象徴する鳩にしか見えなくなってくるのは不思議な感じです。実際はどっちなのでしょうか?

 きっと、このイラストに盛り込まれたメッセージ的な要素や、戦争や危険地帯を連想する鉄条網などが描かれている事などで平和のシンボルである鳩に見えて来るという心境が生まれたのかも知れませんが、もちろん、そんな気がするというだけで、あくまでも感想にすぎません。

 たった一枚の画像からでも、想像力が刺激され、空想が広がります。


【エスィリアル01】 + 背景画像【旅行 06-5】のサンプル画像



 今回使用しているイラストに興味を持ったという理由から、どうしても使いたくなって使用していますが、実際はイラストに掛かる文字などの処理がなかなかうまくいかず、多少読みにくい部分があることをお詫びします。このイラストの場合、他のテンプレートで使用する方が処理の面で効果を発揮するような、そんな感想を持ちました。

 最後に、記事のエリアを左側に寄せて、右側に余白を多くとっているのですが、実際には、右側にサイドバーのスペースが有り、本来ならばそのサイドバーに配置するはずの各種情報に関しては、全てフッター部分に集約することで、余白と空間を大きく取ったレイアウトが実現出来ました。

 色々と工夫次第で面白いことが出来そうです。


◆テンプレート、背景画像の各呼名の意味
  • テンプレート名 = エスィリアル
  • テンプレート番号 = 01
  • 背景画像 旅行 06-5
  • 06 サムネールの6列目
  • 5 サムネール左から5番目
背景画像【旅行】のサムネール

◆テンプレート デザイナー指定内容まとめ
  • テンプレート > 【エスィリアル 01】
  • 背景 > 背景画像 > 旅行 06-5
  • 幅を調整 : ブログ全体840px、右サイドバー200px
  • レイアウト : ブログ参照
  • 上級者向け : 指定した内容のみ記載、下記参照。


◆上級者向け指定内容
  • Body Text  フォント Arial、B、14px、テキストの色 #7f5d52
  • Background  外側の背景 #fc867e、メインの背景 transparent、枠線の色 transparent
  • リンク  リンクの色 #d83c5e、表示済みの色 #fc867e、カーソルを合わせた時の色 #fc4a3f
  • ブログのタイトル  フォント Arial、B、140px、テキストの色 #fc4a3f
  • ブログの説明  説明の色 #fc4a3f
  • タブのテキスト  フォント Arial12px、選択済みの色 #ffffff、テキストの色 #8b8b8b
  • タブの背景  選択済みの色 #ffbba5、背景色 #ffede0、べベル(面取り)の色 #fc867e
  • 投稿タイトル  フォント ArialB20px、テキストの色 #d83c5e
  • ガジェットのタイトル  タイトルのフォント ArialB13px、テキストの色 #d83c5e、べベル(面取り)の色 #e8e8e8
  • アクセント  代替色 #dbdbdb、べベル(面取り)の色 #e8e8e8
  • CSSを追加 



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


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

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

0 件のコメント:

コメントを投稿

ご覧いただき感謝します。ご意見やご質問がありましたら、下記のコメント欄へお願い致します!