« 第28回:リンクの装飾を設定してみよう | トップページ | カスタマイズ・サンプル<No.2:Fly Away…> »

2006/05/13

基本4:自分のブログのCSSファイルを確認する

デザイン(テンプレート)のどの部分にどんなCSSが使われているのかがあらかじめ判っていると、「カスタムCSS」を設定する場合にも便利です。
自分が使っているテンプレート(カスタムテンプレート)のCSS(全文)を確認する方法です。

手順

  1. 自分のブログをブラウザで表示する。
  2. ブラウザの「表示」→「ソースの表示」を選択する。
  3. 自動的に『blog[*]』([*]は数字)という名前の「メモ帳」が起動するので、この中から
    <link rel="stylesheet" href="http://~" type="text/css" />
    という一文を探す。
    ※テキストの上の方、ブログタイトル(<title>~</title>)のすぐ下です。
  4. この中の「href」のあとのurlをコピーして、ブラウザのアドレスバーに貼り付けて「Enter」キーを押す。

    Css_file


    ※上記画像の赤枠内、下線を引いた部分です。
    (画像は当ブログのものです。ブログによってurlは変わります)
    ※もし、上の説明では「どの部分か判らない」という場合は、ブラウザに直接
    「自分のブログurl/styles.css」
    というアドレスを入力してもOKです。

  5. 自動的に『styles[*]』という「メモ帳」が起動するので、必要に応じてファイルを「ファイル」→「名前を付けて保存」 で自分が分かり易い名前を付けて保存する。
    ※このファイルが現在利用中のテンプレートのCSSファイルになります。「カスタムCSS」を記述するときの参考にして下さい。

上記のままでも内容としては問題ありませんが、CSSタグが改行されておらず全文繋がって表示されてしまい非常に見難い状態です。
ちょっと手間ですが、下記の手順で処理すると改行されて見易いファイルになります。

  1. 上記で表示されたCSSファイルの内容を全文コピー(編集」→「全て選択」で全文が反転表示されたら、 ファイル上で右クリック→「コピー」)する。
  2. 「ワードパッド」(または「MS Word(ワード)」)を起動する。
    ※どちらでも大丈夫ですが起動が早いので「ワードパッド」がオススメです。
    ※通常は「全てのプログラム」→「アクセサリ」の中に入ってます。
  3. 起動した「ワードパッド」(または「ワード」)に1.でコピーした全文を貼り付ける。
    ※プロパティごとに自動的に改行された状態で表示されます。
  4. 新しく「メモ帳」を起動する。
  5. 3.で表示された改行されたCSSファイルを全文コピー(編集」→「全て選択」で全文が反転表示されたら、 ファイル上で右クリック→「コピー」)する。
  6. 4.で起動しておいた新しい「メモ帳」にコピーした内容を全文貼り付ける。
  7. 「メモ帳」に名前を付けて保存する。

以上です。
上記の処理をすると下図(左が処理前、右が処理後)のように表示が変わり、内容が確認しやすくなると思います。

Css4_1


 

 

 

ここがポイント

  • このCSSは保存したその時点でのCSSですので、その後テンプレートを変更したり、 カスタムCSSを編集したりすると変わります。
    保存する際にはいつ作成したものか判るような名前を付けて管理するといいかも知れません。
  • このファイルはCSSを確認するためのもので、これを変更してもテンプレートの変更(カスタムCSSの適用)は出来ません。
    CSSの変更はいつもの手順で実施して下さい。
  • この方法で自分のブログでなく他の人のブログでも同様にファイルを取り出すことが出来ます。
    ブログを閲覧していて「どうやってるのかな?」と興味を持ったデザインがあったら、 CSSファイルを見て参考にさせて頂くのも上達のコツです。

*この記事にコメントを書く*


|

« 第28回:リンクの装飾を設定してみよう | トップページ | カスタマイズ・サンプル<No.2:Fly Away…> »

基本」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/1787210

この記事へのトラックバック一覧です: 基本4:自分のブログのCSSファイルを確認する:

« 第28回:リンクの装飾を設定してみよう | トップページ | カスタマイズ・サンプル<No.2:Fly Away…> »