2010年5月16日日曜日

Firebug = WebページからCSSの要素名を簡単に見つける方法 - CSSカスタマイズ

CSSを調べる
要素の名前の特定は、Firefoxブラウザーの Firebugアドオンが便利です。
o Firefoxブラウザー ▽http://mozilla.jp/firefox/
o Firebug アドオン ▽https://addons.mozilla.org/ja/firefox/addon/1843


**** Webページのデータ構造の調べ方 = Firebug バージョン1.5.3の場合
(1) 最初に、Firefoxブラウザーで、調べたいマイページを表示します。
(2) ブラウザー右下にある「虫のアイコン」をクリックします。

(3) 下からメニューなどが出てきますので、左から2番目。矢印の付いたアイコンをクリックします。
   + このアイコンにマウスカーソルを合わせると、「ページ内の調べたい要素をクリックしてください」と表示されます。
(4) 調べたいマイページの調べたい所に、マウスカーソルを合わせます。
(5) 確定したい時は、クリック、もしくは右クリックします。
   + 左下の画面は「対応するHTML」、右下の画面に「対応するCSS」が表示されています。
(6) 入れ子が細かい時は、左下のタグを辿って微調整します。
   + 選択範囲の切り替えは、「<の少し右側をクリック」が簡単です。
(7) 右下の画面に、現在有効な CSSが表示されています。
   + レイアウトタブで、隙間の確認。DOMタブで、HTMLの細かい設定値の確認が出来ます。
(8) 要素の名前をコピーしたい時は、例えば
<div id="aaa" class="bbb">
なら aaa や bbb をクリックします。すると、右クリックからコピーできるようになります。
   + CSSでの書き方は、 div#aaa もしくは div.bbb
   + div以外のタグで使用していない名前の場合、 div は省略可能です。

(9) Firebug画面を閉じたい時は、一番右のボタンを押します。
   + 赤いボタンが3つ並んでいますが、一番右端のボタンです。
   + マウスカーソルを合わせると説明が現れます。
(10) 間違えて操作してしまった場合でも、大丈夫です。
   + Firebugを使ってCSSを修正しても、ブラウザー上の表示が変わるだけです。
   + もう一度表示すると、画面は元に戻っています。


**** メモ
o 取り出した名前を実際に使う時は、適用対象となるページにも注目します。
   + 例えば、zoomeの場合、マイページ全体で1つのCSSを使います。
   + コメントリストは、トップページと日記ページで登場します。それらを区別したい時は名前の指定を工夫します。
   + 他のサイトも概ね同じですが、Bloggerのように、投稿記事内にCSSを書く小技が使える所もあります。
o 名前の特殊な指定方法については「zoomeマイページの右と左を区別する」。


==
関連ページ:
    ▼CSSを調べる
    ▼CSSカスタマイズ
    ▼制作メモ
    > CSS用語の意味を簡単に調べる
    zoomeのマイページを簡単に解析する
    「ソースの表示」から CSSを見つける
    設定画面中にある CSS入力欄を簡単に辿る

zoomeのマイページを簡単に解析する方法 - CSSカスタマイズ

CSSを調べる
zoome
zoomeのマイページをCSSカスタマイズをする時は、マイページの解析が必要になります。
o CSSカスタマイズしたい要素の名前を特定する
o 今、利用しているスタイルの意味を調べる

そこで、私が使用しているCSS解析方法を纏めてみました。CSSカスタマイズにかける時間を短縮したい方は、ご参考にどうぞ。

要素の名前の特定は、Firefoxブラウザーの Firebugアドオンが便利です
HTMLや CSSをざっと眺めたい時は、「ソースの表示」です
CSS用語の意味を調べる時は、「css」付きのWeb検索が便利です
CSSカスタマイズ画面での単語探しは、ブラウザーの検索機能が便利です


==
関連ページ:
    ▼CSSを調べる
    ▼zoome
    ▼CSSカスタマイズ
    ▼制作メモ
    > WebページからCSSの要素名を簡単に見つける - Firebug
    > zoomeマイページの右と左を区別する
    マイページで、zoomeのスキンからCSSカスタマイズする

CSS用語の意味を簡単に調べる方法 - CSSカスタマイズ

CSSを調べる
CSS用語の意味を調べる時は、「css」付きのWeb検索が便利です。
ブラウザーの右上の入力欄にキーワードを入れて、検索します。


**** 手順
----------------
.body {
font-size : 12px;
background-color : skyblue;
}
----------------
o この場合の検索キーワードは
   + 「css font-size」
   + 「css background-color」
o コロンの左側にある単語で検索します。


**** メモ
o Web検索すると、CSS辞典に載っていない情報も、見つける事が出来ます。
   + 例えば、ブラウザーの対応状況や不具合など。
   + 気に入ったホームページを見つけたらブックマークしましょう。


==
関連ページ:
    ▼CSSを調べる
    ▼CSSカスタマイズ
    ▼制作メモ
    > 「ソースの表示」から CSSを見つける
    WebページからCSSの要素名を簡単に見つける - Firebug
    設定画面中にある CSS入力欄を簡単に辿る

CSSカスタマイズする方法

ホームページを作る(新着順)
「世界で最も自分色」。ページデザインを改造して、世界に向けて自慢してみませんか。

o 基本操作
▼CSSを調べる
CSSカスタマイズ画面の開き方  ( Blogger / @wiki )

o CSSを書く
▼要素の背景を半透明にする
▼要素を移動させる(表示の並びを入れ替える)
背景画像固定のポイント
リンクやボタンにカーソルを乗せた時に、押し易くする
zoomeのマイクリップ一覧で、出てくる説明文をCSSカスタマイズする

o CSSを仕上げる
多くのブラウザーで見栄えを合わせる
zoome マイページ。プレビューでの失敗例と対策

o 便利リンク
CSS。他の方の便利メモ


**** 便利な道具
o メモ帳 (=テキストエディタなら、何でもOKです)
   + CSSをバックアップする時は、メモ帳にCSSを貼り付けて、名前を付けて保存。
   + (例外もあります。Bloggerの場合、「テンプレートをすべてダウンロード」を使います。)
   + 本格的にCSSカスタマイズしたい方には、メモ帳よりも CSSの用語を色付き表示してくれるものをおすすめしたいです。でも、私はメモ帳で済ませていますので、紹介できませんでした。

o Firefox ブラウザーのアドイン「Firebug」
   + 私がマイページを解析する時は、ほとんどこれに頼っています。

o ブラウザーの検索機能
   + 修正の度に、上から調べるのは大変です。
   + Firebugで見つけた場所(=要素)の名前を検索して、ちょこっと修正。


**** 新着
o 2010年6月20日日曜日 Bloggerのスキン(デザイン)を変更する方法

==
関連ページ:
    ▼ホームページを作る
    ▼制作メモ
    ▼目次
    > ▼Windows
    ▼Bloggerブログ
    ▼@wiki
    ▼zoome

MySpace。プロフィール画面をカスタマイズする方法

CSSカスタマイズ画面の開き方
2010年のアップデートで、MySpaceの特徴だった CSSカスタマイズ機能は使えなくなりました。
(<style>タグが禁止になりました。)
その代わり、表示要素を部品として再配置する機能が加わりました。

o 確認したのはアーティストプロフィールです。多分、他のプロフィールも同じだと思います。


**** プロフィール画面のカスタマイズ手順
o MySpaceにログインします。
o プロフィール画面を開きます。
    + 上のメニューから「プロフィール」
o プロフィール欄の名前の右にある「カスタマイズ」ボタンを押します。
o 小さな縦長画面が出てきますので、下のように操作します。
o 操作が終わったら、小さな縦長画面の右下にある「プロフィールに反映」ボタンをクリックします。
    + 操作途中の場合は、一旦保存する事も出来ます。
    + 上にあるx印をクリックします。質問してきますので、「保存する(後で公開)」を選びます。

** 壁紙を変更したい時
o 小さな縦長画面から、左側にある「テーマを選択」という文字をクリックします。
o そして、好きなデザインを選びます。
o 自作の壁紙を使用したい時は、「自分でテーマを作成」という文字をクリックします。

** ページの上に画像などを追加したい時
o 小さな縦長画面から、左側にある「レイアウト変更」という文字をクリックします。
o レイアウトが変わります。小さな画面をそのままにして、カーソルを、追加された部品の上に乗せます。
o アイコンなどが浮かびます。
    + 歯車のような「設定」アイコンをクリック。
    + 内容を編集します。HTMLで記述します。

** 部品を追加したい時
o 小さな縦長画面から「パーツ」という文字をクリックします。
o 使用出来るパーツの一覧が表示されますので、「追加」もしくは「さらに追加」をクリック。
    + YouTube動画を貼り付けたい時は、「HTMLボックス」を選びます。
o 小さな縦長画面をそのままにして、追加された部品を探して、カーソルをその部品の上に乗せます。
o アイコンなどが浮かびます。
    + 編集が必要な時は、歯車のような「設定」アイコンをクリックします。
        + 出てくる画面で編集します。
    + 移動したい時は、部品の上にある横バーをドラッグします。
        + ドラッグ = クリックしたまま移動します。
        + 横バーでなくても、掴む事が出来たら移動出来ます。

** 部品を削除したい時
o 小さな縦長画面をそのままにして、カーソルを、削除したい部品の上に乗せます。
o アイコンなどが浮かびますので、歯車アイコンの右隣にある、x印をクリックします。
o 「パーツを削除してもよろしいですか」のような質問が出てきますので、「はい」を選択します。


==
関連ページ:
    ▼CSSカスタマイズ画面の開き方
    ▼CSSカスタマイズ
    ▼ホームページを作る
    ▼制作メモ
(2011年1月16日変更。MySpaceの仕様変更対応。タイトルからCSSの字を削除)