2011年2月2日水曜日

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

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


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

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

⑦ 「フォント」で「Arial」、「B」(太字)、「14px」を選択する。

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

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



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

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


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

↓↓↓



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


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


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


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



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



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

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

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


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

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


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

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

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

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



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




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

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



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

標準テンプレート「Beach」④  ガジェットを移動する

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


② 左のサイドバーのガジェット「ラベル」をマウスでドラッグ(右クリックしたまま移動)して右のサイドバーに移動させる。

③ 同じようにして右のガジェット「ブログアーカイブ」を左のサイドバーの位置に移動させる 。



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





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

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

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


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

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


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

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




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

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

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




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

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



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


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






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