2010年5月9日日曜日

BloggerをCSSカスタマイズする方法

Bloggerブログの見栄えを変更する
Bloggerでは、ページのレイアウトを自由にカスタマイズする事が可能です。
2つの方法があります。
o テンプレートデザイナー上で、CSSを追加する方法
o 徹底的にカスタマイズする方法(= HTMLもカスタマイズ出来ます。)

選択したデザイン(スキン)がある場合、そのデザインからのカスタマイズとなります。


**** 手順
** 1. テンプレートデザイナー上で、CSSを追加する方法
o これからカスタマイズしたい方は、こちらの方が便利です。
o Bloggerにログインします。
o テンプレート画面を開きます。
   + ブログの右上のリンク「デザイン」を押します。
   + ダッシュボードの時は、変更したいブログの「▼」をクリックして、「テンプレート」を選択します。
o 「カスタマイズ」ボタンを押します。下の方から画面を選ぶ事も出来ます。
o 左側に、縦に並んでいるメニューから「アドバンス」
o その右横に現れる縦のバーを一番下まで移動させて、「CSSを追加」
o CSSを書きます。下のプレビューに反映されない時は、改行したり、改行を減らします。
o 満足出来たら、画面右上にある「ブログに適用」ボタンを押します。

** 2. 徹底的にカスタマイズする方法(= HTMLもカスタマイズ出来ます。)
o Bloggerにログインします。
o テンプレート画面を開きます。
   + ブログの右上のリンク「デザイン」を押します。
   + ダッシュボードの時は、変更したいブログの「▼」をクリックして、「テンプレート」を選択します。
o 「HTMLの編集」ボタンを押します。
o 警告画面が出てきますので、内容を読んだ後に「続行」ボタンを押します。
    最初にテンプレートをバックアップする事をおすすめします。失敗した時に、元に戻す事が出来るからです。

o CSSの場所は、「body {」あたりのキーワードでページ内を検索すると、見つかります。
o CSSカスタマイズの小技については、「▼CSSカスタマイズする方法
o HTMLやブログの拡張表現も混じっていますので、慎重に書きます。
o 上手に書けたと思ったら、下の「プレビュー」ボタンで確認します。
o 変更内容を確定する時は、右下のボタン「テンプレートを保存」。


**** メモ
o Bloggerのテンプレート素材サイトを眺めると、どこまでカスタマイズ出来るのか分かります。
   + 有名なのは、▽http://btemplates.com/
o BloggerのCSSの中にある、$から始まる名前は、変数です。
   + $抜きの名前で検索すると、変数を設定している所が見つかります。
o 書いている途中に警告が出る事がありますが、気にせずにきちんと書き上げます。
   + 警告を消す事は、おすすめしません。
   + 正しい文法になって、しばらくしたら、警告は自然に消えます。


==
関連ページ:
    ▼Bloggerブログの見栄えを変更する
    ▼CSSカスタマイズ
    ▼Blogger
    ▼制作メモ
    > Bloggerで、カスタマイズしたCSS(= テンプレート)をバックアップする
    全ての記事の最初や最後に、決まり文句や固定リンクを追加する
    BloggerのHTMLカスタマイズに関する公式情報の在り処
    Blogger in Draft = Bloggerの最新機能を試用する
(2012年5月7日追加。新デザイン対応)
(2010年6月21日変更。テンプレートデザイナーの新機能対応)
(2010年6月11日変更。Bloggerの仕様変更対応)