要素の名前の特定は、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入力欄を簡単に辿る
2010年5月16日日曜日
zoomeのマイページを簡単に解析する方法 - CSSカスタマイズ
zoomeのマイページをCSSカスタマイズをする時は、マイページの解析が必要になります。
o CSSカスタマイズしたい要素の名前を特定する
o 今、利用しているスタイルの意味を調べる
そこで、私が使用しているCSS解析方法を纏めてみました。CSSカスタマイズにかける時間を短縮したい方は、ご参考にどうぞ。
要素の名前の特定は、Firefoxブラウザーの Firebugアドオンが便利です。
HTMLや CSSをざっと眺めたい時は、「ソースの表示」です。
CSS用語の意味を調べる時は、「css」付きのWeb検索が便利です。
CSSカスタマイズ画面での単語探しは、ブラウザーの検索機能が便利です。
＝＝
関連ページ：
▼CSSを調べる
▼zoome
▼CSSカスタマイズ
▼制作メモ
＞ WebページからCSSの要素名を簡単に見つける - Firebug
＞ 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」付きの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入力欄を簡単に辿る
ブラウザーの右上の入力欄にキーワードを入れて、検索します。
**** 手順
----------------
.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
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 操作が終わったら、小さな縦長画面の右下にある「プロフィールに反映」ボタンをクリックします。
+ 操作途中の場合は、一旦保存する事も出来ます。
+ 上にあるｘ印をクリックします。質問してきますので、「保存する（後で公開）」を選びます。
** 壁紙を変更したい時
o 小さな縦長画面から、左側にある「テーマを選択」という文字をクリックします。
o そして、好きなデザインを選びます。
o 自作の壁紙を使用したい時は、「自分でテーマを作成」という文字をクリックします。
** ページの上に画像などを追加したい時
o 小さな縦長画面から、左側にある「レイアウト変更」という文字をクリックします。
o レイアウトが変わります。小さな画面をそのままにして、カーソルを、追加された部品の上に乗せます。
o アイコンなどが浮かびます。
+ 歯車のような「設定」アイコンをクリック。
+ 内容を編集します。HTMLで記述します。
** 部品を追加したい時
o 小さな縦長画面から「パーツ」という文字をクリックします。
o 使用出来るパーツの一覧が表示されますので、「追加」もしくは「さらに追加」をクリック。
+ YouTube動画を貼り付けたい時は、「HTMLボックス」を選びます。
o 小さな縦長画面をそのままにして、追加された部品を探して、カーソルをその部品の上に乗せます。
o アイコンなどが浮かびます。
+ 編集が必要な時は、歯車のような「設定」アイコンをクリックします。
+ 出てくる画面で編集します。
+ 移動したい時は、部品の上にある横バーをドラッグします。
+ ドラッグ = クリックしたまま移動します。
+ 横バーでなくても、掴む事が出来たら移動出来ます。
** 部品を削除したい時
o 小さな縦長画面をそのままにして、カーソルを、削除したい部品の上に乗せます。
o アイコンなどが浮かびますので、歯車アイコンの右隣にある、ｘ印をクリックします。
o 「パーツを削除してもよろしいですか」のような質問が出てきますので、「はい」を選択します。
＝＝
関連ページ：
▼CSSカスタマイズ画面の開き方
▼CSSカスタマイズ
▼ホームページを作る
▼制作メモ
（2011年1月16日変更。MySpaceの仕様変更対応。タイトルからCSSの字を削除）