ブログサービスのデザイン
ブログサービスでブログやりはじめると、
他の人とデザインがまったく同じだったりなんかして、
なにかと自分のブログデザインを
オリジナルにしたくなるものですね。
アメブロやはてなブログなどの
ブログサービスのブログでは
HTMLやCSSの編集機能が限られることがほとんど。
wordpressなど使って本格的なブログなら
各phpの中身からCSSまでガシガシいじれるわけですが、
はてなブログでも、まぁCSSはいじれるのか
ってことがわかりました。
デザインテーマを選ぶ
デフォルトのテーマからCSSをいじってもいいのですが
テーマの中から、自分の理想に近いテーマを選んで
そのCSSをいじくる方が、達成感がありますね。
なのでまずテーマを選びます。
ダッシュボードから“デザイン”を選びます。
デザインページから左サイドを一番下まで
スクロールすると“テーマストアでテーマを探す”が
出てくるのでクリックしてテーマストアを開きます。
テーマストア。
私の場合、シンプルなデザインをベースにしたほうが
CSSをいじりやすいので、
公式テーマから一番人気の“Epic”を選びます。
テーマをインストールすると先ほどの“デザイン”ページの
左サイド、“インズトールしたテーマ”に登場します。
適応したいテーマを選択すると右側のプレビューも変わります。
テーマを反映するには、左サイドメニュー上の
“変更を保存する”をクリック。
ぶじ、テーマが反映されましたね。
CSSを編集する。
テーマが反映できたところで、
CSSを編集します。
デザインページの“カスタマイズ”を選択します。
デザインテーマ“Epic”の場合、
CSSは外部ファイルをインポートしています。
“デザインCSS”をクリックすると下記が表示されます。
/* <system section=”theme” selected=”alpha2″> */
@import “/css/theme/alpha2/alpha2.css”;
/* </system> */
私はてっきり、ここにCSSが直書きしてあると思っていたので
importされてるのを見たときに、ガクゼンとしました。
「これじゃCSSいじれんぢゃん。。。」
とあせることはありません。
imortされているCSSのURLをコピーして
（上の場合、 /css/theme/alpha2/alpha2.css をコピー）
ブログのURL http://blog.hatena.ne.jp の後ろに追加。
つまり
http://blog.hatena.ne.jp/css/theme/alpha2/alpha2.css
のページをひらくとCSSが丸裸になります。
表示されてテキストを全コピーして
Dreamweaverなどで編集しましょう。
編集できたCSSを、
さきほどの“デザインCSS”欄に上書き
しちゃいます。
カスタマイズ完了です。