2017年5月31日水曜日

【ウォーターマーク】を基本に、背景画像を変更することで、どのような変化が起きるのかを検証しています。


【ウォーターマーク 02】+ 背景画像【自然 07-2】の公開画面


 Blogger のウォーターマークを使用してブログを制作する場合に参考になることを願い、このブログで公開した当時のプリントスクリーン画像を掲載しています。

 その時に指定した内容も下記にまとめていますので、イメージに合った背景画像と組み合せて制作する、新たなブログのイメージ・サンプルの一つとして、少しでもお役に立てれば幸いです。



◆Blogger テーマ(テンプレート)デザイナー指定内容

  • テンプレート > 【ウォーターマーク 02】
  • 背景 > 背景画像 > 自然 07-2
  • 幅を調整 : ブログ全体1140px、左サイドバー 170px、右サイドバー 340px
  • レイアウト : ブログ参照

◆上級者向け指定内容
  • ページのテキスト : フォント Arial 14px、テキストの色 #000000、
  • 背景 : 外側の背景 #4f9abe、フッターの背景 #000000、
  • リンク : リンクの色 #2525d4、表示済みの色 #0b5394、カーソルを合わせた時の色 #f6b26b、
  • ブログのタイトル : フォント Arial、B、67px、タイトルの色 #ffffff、
  • ブログの説明 : 説明の色 #ffffff、
  • タブのテキスト : フォント Arial、B、11px、テキストの色 #50ffde、選択済みの色 #104965、
  • タブの背景 : 背景色 transparent、区切りの色 #c53820、
  • 日付ヘッダー : フォント Arial、B、13px、テキストの色 #b9fff5、
  • 投稿 : タイトルのフォント Arial、B、20px、背景色 transparent、枠線の色 #96bcca、
  • 投稿のフッター : テキストの色 #518c93、
  • ガジェット : タイトルのフォント Arial、13px、タイトルの色 #000000、代替色 #727272、
  • フッター : テキストの色 #96bcca、ガジェットのタイトルの色 #b8deed、
  • フッターのリンク : リンクの色 #6aceff、表示済みの色 #0088ca、カーソルを合わせた時の色 #ca9075、
  • CSSを追加 :


◆背景画像についての解説をまとめています。

◆背景画像に関するブログへの入り口!

 最後までご覧頂き感謝いたします。

0 件のコメント:

コメントを投稿

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