タイトルタイトル

たったの 10 秒で

あなたが変更したい HTML タグの場所が分かり、

元の HTML や CSS を変更せずに

色んなデザインが試せる無料ツール、

HTML や CSS の知識がない人にも

オススメです。

このレポート上に書かれている URL はクリックできます。出来ない場合は、最新の AdobeReader をダウンロードし てください。（無料） http://www.adobe.co.jp/products/acrobat/readstep2.html 【著作権について】 本レポートは、著作権法で保護されている著作物です。本レポートの使用に関しましては、以下の点にご注意くださ い。 ■ 本レポートの著作権は 著者にあります。 ■ 著者の書面による事前許可無く、本レポートの一部または全部をあらゆるデータ蓄積手段（印刷物、電子フ ァイルなど）により、複製、流用および転売（オークション含む）することを禁じます。 【使用許諾契約書】 本契約は、本レポートを購読した個人・法人（以下、甲と称す）と著者（以下、乙と称す）との間で合意した契 約です。本レポートを甲が受け取り、購読することにより、甲はこの契約に同意したことになります。  本契約の目的 乙が著作権を有する本レポートに含まれる情報を、本契約に基づき甲が非独占的に使用する権利を承諾するも のです。 第２条 禁止事項 本レポートに含まれる情報は、著作権法によって保護されています。甲は本レポートから得た情報を、乙の書面によ る事前許可を得ずして出版・講演活動および電子メディアによる配信等により一般公開することを禁じます。特に 本レポートを第三者に渡すことは厳しく禁じます。甲は、自らの事業、所属する会社および関連組織においてのみ 本レポートに含まれる情報を使用できるものとします。 第３条 損害賠償 甲が本契約の第２条に違反した場合、本契約の解除に関わらず、甲は乙に対し、その違約金として、違約件数と 損害金額を乗じたものの５０倍の金額を支払うものとします。 第４条 責任の範囲 本レポートの情報の使用の一切の責任は甲にあり、この情報を使って損害が生じたとしても一切の責任を負いませ ん。 なお、こちらの無料レポートをダウンロードしていただいた方は、私、YUNA によって、 メールマガジン 「ネット収入で自由人！ゼロから始めて着実に月１０万アップを目指す本質的ネットビジネス通 信 」 に代理登録されますので、予めご了承ください。 登録されたメールマガジンは、以下のページから解除することができます。 ⇒ http://locatimefree.com/c/kaijo

ごあいさつ ... 4 無料プレゼントのお知らせ ... 5 第１章 このレポートの内容 ... 6 第２章 Firebug とは何か ... 9 第３章 前準備 ... 11 3.1 Firefox をインストールする ... 11 3.2 Firebug を Firefox 上で使えるようにする ... 11 第４章 Firebug を使ってみる！ ... 13 4.1 Firebug の基本的な使い方 ... 13 4.2 メニューバーの文字の色を変更してみる ... 14 4.3 メニューバーの文字の大きさを変更する ... 18 Wordpress をお使いのあなたへアドバイス！ ... 22 終わりに ... 26

ごあいさつ

こんにちは！ 住みたいところに住み、やりたいことをやるために ネットビジネスオンリーで生計を立てることを目指す YUNA です。 この度は、私の無料レポート 「まだ使っていなかったらもったいない！ ブログのカスタマイズを３倍速にする Firebug の使い方」 をダウンロードいただき、誠にありがとうございます。 このレポートを書いている現在、私は海外へ旅経つべく準備をしている最中です。 どこにいっても稼げる仕事がしたい！という思いから、ネットビジネスを始めました。 最初は何もできなかった私も、とあるアフィリエイト塾で学んでからは、 ブログ開設、無料レポート、メルマガ配信まで日々「稼ぐ仕組みづくり」に励むことができ ています。 その過程で得た知識・気づき・ノウハウを、 初心者の方にもわかりやすい「ゼロスタート」の目線で皆様に発信していくのが、 私のコンセプトです。 皆様に少しでも有益な情報となるよう努力していきますので、 どうぞよろしくお願いいたします！ 詳細なプロフィールはこちら⇒http://locatimefree.com/profile

無料プレゼントのお知らせ

レポートの本編に入る前に、 わたしのレポートをダウンロードいただいた方への 無料プレゼントがあります。 下のリンクをクリックしてお受け取りください。 ↓ ↓ ↓ http://locatimefree.com/present ※開いたページでお名前とメールアドレスを入力し「プレゼントを受け取る！」ボタンをクリックすれば、 貴方のメールアドレスにプレゼントが届きます。 この無料プレゼントでは、 インターネットビジネスの初心者がゼロから始めて本格的に稼ぐために 絶対知っておかなくてはならないことがとても分かりやすく解説されています。 私もこのマニュアルを読んでから、 インターネットビジネス対する見方ががらっと変わりました。 もし、それまでの自己流でやっていたら、ネットで稼げないままあきらめていたと思います。 私が先輩アフィリエイターから特別に配布を許可された、 この 600 ページ超のインターネットビジネス解説書を貴方もぜひ役立ててくださいね！

第１章 このレポートの内容

貴方はブログやサイトをお持ちでしょうか？ 「テンプレートを使えばプログラミングの知識がなくても大丈夫」 ということをよく聞きますよね？ 確かにそうです。 詳しいプログラミングの知識はいりません。 でも、 いざテンプレートの一部を変更したくなったとき、 「あれ、一体どこをどう変えたらいいんだろう・・・」 と途方に暮れたことはありませんか？ ワードプレスなら、 ダッシュボードから「テーマの編集」のページに行くと 何やらわからないコンピュータ言語が書かれたファイルが たくさん出てきます。 親切なテンプレートなら、 テンプレートファイルのどこに、どのパーツが記述されているか 分かるようになっていますが、 それでも、HTML や CSS の知識があまりない人にとっては、 何かを変更するにも一回一回時間がかかることでしょう。 このレポートでご紹介する FireBug を使えば、 その時間が劇的に短縮されることになります。

例えば、仮に ブログのメニューバーの色と文字の大きさを変えたい とします。 貴方は、もう少し目立つ色で大きめのフォントにしたいと思っています。 どこをどんなふうに変更したらよいでしょうか？ 貴方だったら、どうやって変更箇所を見つけますか？ --- メニューが書かれている HTML や PHP ファイルを見つけて、 そこに適用されているスタイルのクラス名を見つけ、 そのクラスのスタイル設定が書かれている場所を CSS ファイルから見つけて変更する。 変更ができたら保存して、ブログを再読み込みして、確認して ダメだったらまた修正して、ブログを再読み込みして… --- とやっていると 時間はどんどん過ぎていきます。 Firebug を使わなかったら 修正すべき場所を見つけ、 自分の気に入るように修正できるまでに最低 15 分はかかるでしょう。 HTML や CSS の知識があまり無ければ、 30 分、あるいは１時間かかってもおかしくありません。

でも Firebug を使えば たったの１分もかからずに修正すべき場所が分かっちゃいます！ そして、修正結果がすぐにプレビューできるので、 作業は Firebug を使わないときと比べて何倍速にもなります。 私がプログラマー兼デザイナーとして 一般の会社で働いていた時に使うようになり、 今も愛用している FireBug ですが、 実はプログラミングの知識がほとんどない方にとっても 使い勝手がよく、非常に役に立ってくれるツールです。 必要最低限のみ、できる限り分かりやすく説明しますので、 「面倒くさそう」と思わずにぜひ最後までお付き合いくださいね。 一度使えるようになれば手放せなくなるはずです。 ちなみに HTML や CSS の基礎を知りたい方は このウェブサイトが分かりやすくてオススメです。 ⇒http://endoutakae.com/2012/02/08/webdesign/

第２章 Firebug とは何か

＠ＩＴには以下のような解説があります。 http://www.atmarkit.co.jp/ait/articles/0912/03/news093.html 簡単に言うと、 プログラマーが Web アプリを開発するときに、 プログラミング上のミスを発見するため、 また発見したミスを修正するために使うツールです。 HTML や CSS などの変更・修正にも 非常に便利な機能があります。 具体的にどんな感じなのか、この画像をご覧ください。

Firebug は、Firefox のアドオンとして利用する Web アプリケーションのデ バッギングツールです。HTML/CSS、JavaScript のデバッグやプロファイ リングができます。Firebug は非常に良くできたツールで、Web アプリケ ーションのデバッグを飛躍的に楽にします。

表示されているページの HTML と CSS が 同時に見れるようになっています。 実際はもう少し多様な機能がありますが、基本的に見るのはこれだけです。 「なんか、難しそう…」と思いましたか？ 私も最初は、とっつきにくそうだな(-_-;)と思いました。 「便利だから使ってみろ」と 先輩プログラマーに言われて渋々つかったら 虜になりましたが^^ とりあえず、まずはどんなものか、 Firebug をインストールしてみましょう。 この部分が FireBug

第３章 前準備

3.1 Firefox をインストールする

Firebug は Firefox というブラウザ上でのみ機能します。 そういうわけで、まず貴方のＰＣに Firefox がインストールされていないなら ぜひ今すぐインストールしてください。 ⇒http://www.mozilla.jp/firefox/ ちなみに、Chrome をお使いの方は、 デベロッパーツールに似たような機能があります。 それでもＯＫですが、使用感は断然 Firebug のほうが良いので、 普段 Chrome ユーザーの方も、 これだけのために Firefox もインストールすることをオススメします。

3.2 Firebug を Firefox 上で使えるようにする

以下のサイトにアクセスします。 https://addons.mozilla.org/ja/firefox/addon/firebug/

「Firefox に追加」という緑のボタンをクリックします。

このようなウィンドウが表示されたら「今すぐインストール」を クリックします。

第４章 Firebug を使ってみる！

4.1 Firebug の基本的な使い方

まず、Firefox ブラウザの右上にあるバグ（虫）のマークがグレーになってい る場合はクリックして有効化します。 有効化すると色がつく⇒ 以下のようにブラウザの画面の下側に Firebug のウィンドウが現れます。 基本的な使い方は、 Firebug ウィンドウの左上にあるボタンをクリックしたあとに、 自分が修正したい要素を選択する だけです。 Firebug のウィンドウ

といっても？？？という感じだと思うので以降で、例で説明しますね。

4.2 メニューバーの文字の色を変更してみる

今回は、メニューバーの文字の色や大きさを変更したいので、図のように メニューバーの一つを選択してみます。 そうすると Firebug ウィンドウの左側では 選択した要素（メニューバーの「オススメ教材」）の HTML タグが分かります。 このように、青い枠で選択される場所を、 修正したい要素のところに持っていく

Firebug ウィンドウの右側では 選択した要素に適用されているスタイルの内容と、 そのスタイルがどこで設定されているかが分かります。 #topNavi ul li a, .menu ul li a { ….. }という部分は、 topNavi という id が付けられたタグの中の、 ul タグの中の li タグの中にある a タグ、 また、menu というクラス(class)が付けられたタグの中の ul タグの中のli タグの中にある a タグ に対して適用されるスタイルですよ、という意味です。 上の HTML の図と見比べてみると、分かりやすいかなと思います。 style.css の 283 行目からの設定で 文字の色が設定されていることが分かる。 div タグ（クラス名が menu） ul タグ li タグ a タグ

スタイルで緑色になっている文字（color:#000000;などの color の部分）は、 スタイルの「プロパティ」と言われています。 例えば、color は文字の色、その上のbackgroundは背景を表します。 プロパティとコロン（：）の後ろに来ているのが、そのプロパティの値です。 プロパティについてはこのサイトも参考にしてみてください。 http://www.htmq.com/style/indexa.shtml 暗号のように見えるかもしれませんが、 使っているうちに慣れてきます。 color の値の #000000 というのは、１６進数で書かれた色の定義で黒を表します。 ここの値を変えることによって、色を変更できます。 自分の使いたい色を決めて、１６進数の表記を知るには、 ゆなカラーピッカーというフリーソフトが便利です。 （ちなみにこの「ゆな」さんは私ではありません^^;） ダウンロードして解凍するだけですぐ使えるようになります。 ⇒http://www.vector.co.jp/soft/win95/net/se081901.html YunaColor.exe をダブルクリックして起動する。

今回はこの色にしようと思います↓↓ 16 進数の値をコピーします。 Firebug ウィンドウに戻って、 color の値のところをクリックすると、編集モードになりますので 変更します。 ここをコピーする ゆなカラーピッカーから コピーしてきた色を貼りつけ ただし#を付け忘れないこと！ 変更したい場所をクリックする。 そうすると編集モードになる。

すると、その場ですぐに新しい色が適用された結果を見ることができます。 一回でうまく決まらない場合は 何度もこのブラウザ上で色々な色を試すことができます^^ この時点ではプレビューしているだけで、 ブログそのものが変更されるわけではありません。 もし気に入らなかったり、変になってしまった時は ページの再読み込み（F5 キー）で元の状態に戻ります。

4.3 メニューバーの文字の大きさを変更する

では、文字の大きさを変更してみましょう。 メニューバーに適用されるスタイルのクラス menu には 文字の大きさ（フォントサイズ）は設定されていません。 この中には フォントサイズの設定がない！

全ての a タグに適用されるスタイルで、 フォントサイズが 100％に設定されていることがわかります。 ただ、a タグに対するフォントサイズを変更すると メニューバー以外にも影響が出てしまいます。 （どんな影響がでるか気になる方は試しにやってみてください。） それで、今回は一番上に表示されている #topNavi ul li a, .menu ul li a{ }の中に フォントサイズの設定を追加してみます。 #topNavi ul li a, .menu ul li a{ }の中で 一番下のプロパティの値をクリックし、Enter キーを押します。 ここを変更しちゃうと メニューバー以外の a タグ全体に 適用されちゃうからＮＧ ここに新たに font-size の設定を追加する

すると、新たにプロパティを追加できるようになりますので font-size と入力します。 入力できたら Enter キーを押すと、 font-size の値が設定できるようになりますので仮に 15px などと入れてみます。 すると、このようにメニューの文字が大きくなりました！ この設定をブログに適用したい場合は、 Firebug ウィンドウの設定をコピーして、 該当するスタイルシートの場所を変更すればＯＫです。 例えば、今回の場合は style.css というファイルの 283 行目からの 設定で color の値を変更し、 この状態で Enter キーを押す

ここに示されている ファイル名と行番号で すぐに 修正箇所を特定できる！ color の値の変更と font-size の追加を style.css に反映する

Wordpress をお使いのあなたへアドバイス！

Wordpress を使ってブログを作っている方は、 テンプレートファイルの拡張子が.html ではなく.php になっていることに お気づきだと思います。 （え、そうなの？？と思った方は、ワードプレスのダッシュボードで、 「外観」＞「テーマ編集」から確認してみてください） ワードプレスは PHP というプログラミング言語で作られています。 テーマの php ファイルをもとに、 サーバーで html ファイルが生成されて、 皆さんがいつも見ているブログやサイトのページが表示されるしくみです。 このあたりのことをもう少し詳しく知りたいという方は こちらのサイトを参考にしてみてください。 WordPress で Web 製作をしたいけど、PHP はまだちょっと … という人の PHP ガイド 例えば、次の図のように、大抵は複数の php ファイルが組み合わされて ブログのトップページの html が生成されます。

注意したいのは、 Firebug で見れるのは html が生成された後の状態だということです。 なので、 Firebug の html の表示と全く同じものが、 テーマファイル（php ファイル）にあるわけではありません。 ただ、テーマの php ファイルの中身を見てみると、 html タグも書いてありますよね。 php ファイルの中で、 プログラムにより書き出す必要がない部分（静的な部分）は、 最初から html タグが書いてあります。 index.php header.php sidebar.php footer.php Html 生成 Firebug で見れるのは この状態！！ PHP プログラムにより Html を生成する index.php では一般にパーツごとに分かれた 幾つかの php ファイルを読み込む

少しややこしくなってしまいましたね^^; もし Firebug の表示を参考にしながらワードプレスのテーマを 修正・変更したいときは、 html（Firebug で見るもの）と php（ワードプレスのテーマ）に 違いがあるということをあらかじめ頭に入れておいていただくと やりやすいかと思います。 それでも、Firebug を使ったほうが修正したい部分は 格段に見つけやすいと思いますよ。 試してみてくださいね。

いかがでしたか？ 初めてだと難しいと感じてしまったかもしれませんが 最初から「使いこなす」という意識ではなく、 「色々試してみる」という感覚で使っていると そのうち慣れてきて便利になってくると思います。 今回は Firebug のほんのさわりをご紹介しただけですが、 例えば、ブログのテンプレートをカスタマイズしていて 思うような表示や動作にならない時はこのツールを使ってみてください。 良いヒントが得られるはずです。 使いこなせば非常に役に立つツールですので、 ぜひ活用してみてくださいね。 何か困ったことがあれば随時質問も受け付けています！

終わりに

さいごまでお読みいただきありがとうございました！ 何かご不明な点や相談したいことなどございましたら、 お気軽にお問い合わせください。 私の無料レポートに関する感想もお待ちしています。 お問い合わせ・ご連絡はこちらから⇒ http://locatimefree.com/c/question では、また次の無料レポートでお会いできるのを楽しみにしています♪ 以下は私の過去の無料レポートです。 興味があるものがありましたら、ぜひダウンロードしてご覧ください。 ブログアフィリエイトを始めた人が作業配分で陥りやすい意外な落とし穴５つとその対策 ブログアフィリエイトで着実に稼ぐための５つの基本 初心者が始めやすく継続的成果を出しやすい稼ぐ仕組みの全体像 稼ぐアフィリエイターはみんな持っている！運営型ブログ ゼロからの作成マニュアル 第１巻 稼ぐアフィリエイターはみんな持っている！運営型ブログ ゼロからの作成マニュアル 第２巻 稼ぐアフィリエイターはみんな持っている！運営型ブログ ゼロからの作成マニュアル 第３巻

ブログ：http://locatimefree.com ネット収入で自由人！ あなたにもできる～ゼロから始めて 月１０万アップさせるコツ～ メルマガ：http://locatimefree.com/mailmag 【ネット収入で自由人！】 ゼロから始めて着実に月１０万アップを目指す本質的ネットビジネス通信