BloggerをCSSカスタマイズする方法
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の仕様変更対応)