標準テンプレート「Beach」⑪ 「ブログの投稿」の設定

各投稿の下に表示される項目を設定します。

①　「デザイン」タブの「ページの要素」を開く。

②　「ブログの投稿」ガジェットの「編集」ボタンをクリックして、「ブログの投稿の設定」画面を開く。

③　日付、コメント、ラベル、クイック編集にチェックを入れ、その他の項目のチェックを外す。「アイテムの並べ替え」で各項目をドラッグして並べ替える。

④　「保存」ボタンをクリックして「ブログの表示」で確認する。

標準テンプレート「Beach」⑩ 「アドバンス」のその他の設定

「アドバンス」の他のサブメニューはこのテンプレートの場合はデフォルト（すでに設定されているもの）のままで変更の必要はありません。

確認のためにデフォルトの内容を記載しておきます。

●　ページのテキスト
「フォント」　　Arial、太字とイタリックなし、１２ｐｘ
「テキストの色」　　#222222

●　背景
「外側の背景」　　#66bbdd
「メインの背景」　　#ffffff
「ヘッダーの背景」　　transparent

●　ブログの説明
「説明の色」　　#777777

●　日付ヘッダー
「テキストの色」　　#222222
「背景色」　　transparent

●　投稿のフッター
「テキストの色」　　#666666　
「背景色」　　#f9f9f9　
「影の色」　　#eeeeee

●　ガジェット
「タイトルのフォント」　　Arial、太字、イタリックなし、１１ｐｘ
「タイトルの色」　#000000
「代替色」　　#999999

●　画像
「背景色」　　#ffffff
「枠線の色」　　#eeeeee
「キャプションのテキストの色」　　#222222

●　アクセント
「区切り線の色」　　#eeeeee
「タブの枠線の色」　　#eeeeee

●　CSSを追加
空白。　　※　この項はスタイルシートと呼ばれるプログラムを書き込むスペースで、このテンプレートでは使うことはありません。

 ※　これらの項目は自由に変更ができます。どのように変化するか試してみてください。
「～の詳細な変更をクリア」 でもとに戻すことが出来ます。

標準テンプレート「Beach」⑨ リンクの色と投稿タイトル

各投稿のタイトルはリンクになっていますのでリンクの色を変えることによって、投稿タイトルの文字の色も変わります。

①　テンプレートデザイナーの「アドバンス」のサブメニュー「リンク」を開く。

②　「リンクの色」をカラーコード　#335d6e　、「表示済みの色」を#335d6e、「ホバーの色」を#33aaff　に指定する。（ホバーの色とはマウスのポインターを乗せたときに変わる色。プレビューでは確認できませんので「ブログの表示」で確認して下さい）

③　「ブログに適用」ボタンをクリック。

④　サブメニューの「投稿タイトル」をクリック

⑤　「フォント」の「B」（太字）をクリック。

⑥　「ブログに適用」ボタンを押して、「Bloggerに戻る」、「ブログの表示」で確認する。

標準テンプレート「Beach」⑧ タブバーの色を変える

①　「テンプレートデザイナー」のメニューから「アドバンス」をクリック。
②　サブメニューの「タブの背景」をクリック。
③　「背景色」で「このテンプレートの色」の上段左から４番目の青いマス目をクリック。（カラーコード　#66bbdd）
④　「選択済みの色」で同じく「このテンプレートの色」の上段左から４番目の青いマス目をクリック。（カラーコード　#66bbdd）

⑤　下のプレビュー画面で確認して、「ブログに適用」ボタンをクリック。

⑥　サブメニューの「タブのテキスト」をクリック。

⑦　「フォント」で「Arial」、「B」（太字）、「１４ｐｘ」を選択する。

⑧　「テキストの色」で「このテンプレートの色」の上段左から３番目のグレーのマス目をクリック。（カラーコード　#999999）

⑨　「選択済みの色」で同じく「このテンプレートの色」の上段左から１番目の白のマス目をクリック。（カラーコード　#ffffff）

⑩　「ブログに適用」で「ブログを表示」に戻る。

標準テンプレート「Beach」⑦ 背景画像を入れる

①　下の画像をパソコンにダウンロードする。

↓↓↓

②　「テンプレートデザイナー」のメニューから「背景」をクリック。
③　「背景画像」下の右にある小さな三角をクリック。

 

④　「背景画像を選択」の画面で「画像をアップロード」をクリック。

 

⑤　「参照」ボタンを押し先ほどダウンロードした画像ファイルを指定。アップロードが終わったら「完了」ボタンをクリック。

 ⑥　「背景画像」右側の３つの項目の内、上２つをプルダウンメニューからそれぞれ「上側中央」のマークと「並べて表示」を選択。一番下の「ページと共にスクロール」にチェックを入れる。

⑦　右上の「ブログに適用」ボタンを押してブログの表示に戻る。

 

標準テンプレート「Beach」⑥ タイトルの装飾

ヘッダーの画像に合わせて、タイトルのフォントや文字の大きさ、色を変えていきます。

① 　「テンプレートデザイナー」のアドバンスをクリック。

②　サブメニューの中の「ブログのタイトル」をクリック。

③　「フォント」として「Arial」、大きさ「３６ｐｘ」を選び、「タイトルの色」として白のマス目をクリックする。

 

④　右上の「ブログに適用」をクリックして、ブログの表示に戻る。

（上の写真をクリックして、拡大した写真をもう一度クリックすると実物大で見られます）

標準テンプレート「Beach」⑤ ヘッダーに画像を入れる

①　下の画像をクリックして拡大する。拡大した画像の上でマウスを右クリックして「名前を付けて画像を保存」を選びパソコンにダウンロードする。（名前はそのままで、保存する場所はマイピクチャーなどわかり易い場所に）

 

②　編集画面の「デザイン」タブの「ページの要素」 を開き、（Header)ガジェットの「編集」ボタンをクリック。

 

③ 　「ヘッダーの設定」の設定画面の「プレースメント」で「タイトルと説明の背後」を選び、「ページに合わせてサイズを調整」にチェックを入れる。

④　「イメージ」→「コンピュータから」にある参照ボタンを押して、先ほど保存した画像を指定する。　　

⑤　右下の「保存ボタンを押し、編集画面に戻って「ブログの表示」をクリック。

標準テンプレート「Beach」③ レイアウトとブログの幅

①　テンプレートデザイナーの画面を開き、メニューの「レイアウト」をクリックする。

②　「本文のレイアウト」で左下のサイドバーが左右にひとつずつある形を選び、「フッターのレイアウト」でフッターがふたつに別れた形を選ぶ。

 

③　下のプレビュー画面で確認して右上の「ブログに適用」ボタンをクリック。

④　メニューの「幅を調整」をクリック。

⑤　「ブログ全体」のスライドバーをマウスで動かし、１０００ピクセルにする。同じように「左側のサイドバー」と「右側のサイドバー」を２５０ピクセルにする。

 

⑥　下のプレビュー画面で確認して右上の「ブログに適用」ボタンをクリック。

⑦　右上メニューの「Bloggerに戻る」をクリックし、編集画面に戻り、「ブログの表示」で確認する。

 

⑧

標準テンプレート「Beach」② ベースになるテンプレートを決める

①　「デザイン」タブの「テンプレートデザイナー」のページを開く。

（プレビュー画面のサイドバーは実際とは少し違います）

②　左側にあるメニューノの中から「テンプレート」を選ぶ。

③　右側の一覧の中から「シンプル」の１番目をクリックして選ぶ。（下のプレビュー画面が選択したベースになるテンプレートのデザインが見られます）

④　 プレビュー画面で確認したら右上の「ブログに適用」ボタンをクリックする。

⑤　右上メニューの「Bloggerに戻る」をクリックし、編集画面に戻り、「ブログの表示」で確認する。

 

⑥

※　ベースになるテンプレートは「シンプル」の他にもいくつか用意されていますが、今回はこの「シンプル」の１番目のレイアウトにしておいてください。ベースになるレイアウトは背景画像や各部の色によって大き変わって見えますが、この背景画像や色は後で変えることが出来ます。ベースになるレイアウトでポイントになるのはそれぞれのヘッダー部分やサイドバー投稿部分の形とデザインです。

標準テンプレート「Beach」① 準備

「テンプレートデザイナー」を使って「Beacｈ」を実際に作っていきますが、その前にデザインの具合を見やすくするために投稿欄とサイドバーを整理しておきます。

●　投稿欄
これまでにテストで投稿したもののうち、実際の投稿のかたちに近い「画像テスト６」を残して他の投稿は削除してください。
（残しておきたい投稿がある場合は、「編集」→「下書きとして保存」にして投稿を見えなくしてください。

 

●　サイドバー

サイドバーにあるガジェットのうち「アーカイブ」と「ラベル」だけを残してあとは削除してください。

（ブログのデザインが確定した後にまた追加していってください）