2016年9月10日土曜日

【Awesome Inc.02】 + 背景画像【テクノロジー-01-2】


背景画像【テクノロジー-01-2】

テンプレート【Awesome Inc. 02】と【テクノロジー 01-2】の背景画像を組み合わせてブログを公開しています。背景画像を変更するだけでブログの印象が違います。新たに制作するブログにご活用ください。「テクノロジー」の背景画像は、全部で6種類が用意されています



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

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

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


◆使用テンプレート【Awesome Inc. 02】

 基本デザインとして全4種類が用意されているテンプレート「Awesome Inc.」の中から、今回使用したのは「02」です。背景画像は「テクノロジー 01-2」を使用しました。

◆テンプレート、背景画像の各呼名の意味
  • テンプレート名 = Awesome Inc.
  • テンプレート番号 = 02
  • 背景画像 テクノロジー 01-2
  • テーマ テクノロジー
  • 01 サムネールの1列目
  • 2 サムネール左から2番目

背景画像【テクノロジー】

◆テンプレート デザイナー指定内容まとめ
  • テンプレート > 【Awesome Inc. 02】
  • 背景 > 背景画像 > テクノロジー 01-2
  • 幅を調整 : ブログ全体970px、右側のサイドバー310px
  • レイアウト : ブログ参照
  • 上級者向け : 指定した内容のみ記載、下記参照。


◆上級者向け指定内容
  • ページ : フォント Arial 13px、背景色 #000000、テキストの色 #ffffff、
  • 背景 : 
  • リンク : リンクの色 #3d85c6、表示済みの色 #0b5394、カーソルを合わせた時の色 #6fa8dc、
  • ブログのタイトル : フォント Arial、B、42px、タイトルの色 #ffffff、ヘッダーの背景 transparent、
  • ブログの説明 : フォント Arial、14px、テキストの色 #ffffff、
  • タブのテキスト : フォント Arial、B、12px、テキストの色 #ffffff、選択済みの色 #ffffff、
  • タブの背景 : 背景色 #000000、選択済みの色 #0b5394、枠線の色 #000000、
  • 日付ヘッダー : フォント Arial 14px、テキストの色 #3d85c6、枠線の色 #000000、
  • 投稿タイトル : フォント Arial、B、20px、テキストの #ffffff、
  • 投稿の背景 : 背景色 #000000、枠線の色 #000000、べベル(面取り)の色 #000000、
  • ガジェットのタイトル : フォント Arial、B、14px、タイトルの色 #ffffff、
  • ガジェットのテキスト : フォント Arial、14px、テキストの色 #ffffff、代替色 #0b5394、
  • ガジェットのリンク : リンクの色 #3d85c6、表示済みの色 #0b5394、カーソルを合わせた時の色 #6fa8dc、
  • ガジェットの背景 : 背景色 #000000、枠線の色 #000000、べベル(面取り)の色 #000000、
  • サイドバーの背景 : 背景色 transparent、
  • 画像 : 背景色 #000000、枠線の色 transparent、
  • フィード : テキストの #ffffff、
  • フィードのリンク : リンクの色 #36bcbc、表示済みの色 #0b5394、カーソルを合わせた時の色 #6fa8dc、
  • Pager : 背景色 #000000、
  • フッター : 背景色 #000000、テキストの色 #ffffff、
  • Mobile Button Color : #ffffff、
  • CSSを追加 : 

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

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



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

0 件のコメント:

コメントを投稿

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