2016年11月17日木曜日

ブログの内容が溢れ出るイメージでしょうか? テンプレート【エスィリアル 03】 + 背景画像 【趣味・工芸 04-1】


背景画像 【趣味・工芸 04-1】

テンプレート【エスィリアル 03】と【趣味・工芸 04-1】の背景画像を組み合わせたブログのサンプルを公開しています。背景画像を変更するだけでブログの印象が違います、新たに制作するブログにご活用ください。「趣味・工芸」の背景画像は、全部で17種類です。

 【趣味・工芸】から背景画像を使用するのは、今回が初めてです。少しだけ見えるオレンジ色のキャップ部分から、恐らく接着剤のボンドをこぼした時の状況を写していると思うのですが、まるで牛乳か雲のような白く柔らかな輪郭が広がる感じが気に入ってしまいました。

 タイトルエリアとなる、青空のような薄いブルーの部分と、下に広がる記事のエリアとが、白いボンドのふわっとした柔らかな広がりによって、溶け込むように馴染んでいるため、全体として、とてもバランスのいいレイアウトが作れました。

 タイトルエリア以外の部分、新着記事からフッターにかけてのエリアは、全体を白で統一することで、まるで、流れ出たボンドの白い液体によって、ブログ全体を包み込むような、そんなイメージで、シンプルにデザインすることで、まとめることが出来ました

 このように、背景画像のイメージからブログ全体のデザインに導くという事も可能であり、なかなか奥が深いのです。

エスィリアル 03 + 背景画像【趣味・工芸 04-1】


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

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

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

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



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

 基本デザインとして全3種類が用意されているテンプレート「エスィリアル」の中から、今回使用したのは「03」です。背景画像は「趣味・工芸 04-1」を使用しました。


◆テンプレート、背景画像の各呼名の意味
  • テンプレート名 = エスィリアル
  • テンプレート番号 = 03
  • 背景画像 趣味・工芸 04-1
  • テーマ 趣味・工芸
  • 04 サムネールの4列目
  • 1 サムネール左から1番目
背景画像 【趣味・工芸】のサムネール



◆テンプレート デザイナー指定内容まとめ
  • テンプレート 【エスィリアル 03
  • 背景 背景画像 趣味・工芸 04-1
  • 幅を調整 : ブログ全体960px、左右サイドバー160px
  • レイアウト ブログ参照
  • 上級者向け 下記参照指定した内容のみ記載


◆上級者向け指定内容
  • ページのテキスト : フォント Arial 15px、テキストの色 #494949、
  • Background : 外側の背景 transparent、メインの背景 transparent、枠線の色 transparent、
  • リンク : リンクの色 #1ba63b、表示済みの色 #1b86a6、カーソルを合わせた時の色 #ed888a、
  • ブログのタイトル : フォント Arial、75px、タイトルの色 #fc867e、
  • ブログの説明 : 説明の色 #494949、
  • タブのテキスト : フォント Arial、10.7px、選択済みの色 #da4835、テキストの色 #494949、
  • タブの背景 : 選択済みの色 #ffbba5、背景色 #ffede0、べベル(面取り)の色 #fc867e、
  • 投稿タイトル : フォント Arial、B、22px、テキストの色 #524abf、
  • ガジェットのタイトル : タイトルのフォント Arial、B、13px、テキストの色 #494949、べベル(面取り)の色 #e8e8e8、
  • アクセント : 代替色 #dbdbdb、べベル(面取り)の色 #e8e8e8、
  • CSSを追加

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


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

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

0 件のコメント:

コメントを投稿

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