Google Firefoxのスタート画面をDark系のテーマに変更

DarkGoogle28 前ページの内容
 ● Firefoxのアドオン 『NASA Night Launch』 をインストール
 ● Firefoxのアドオン 『
Stylish』 をインストール

詳細はこちら >> 参照する
 スタイルシート『NNL-google-firefox.css』 を取得
 ■ Dark Google for Firefox : http://mcdavis.dreamhosters.com
 『Stylish』 を使って『NNL-google-firefox.css』 を編集
 ■ Stylish : https://addons.mozilla.org/ja/firefox/addon/2108/
 
 Home Back 
Google検索
カスタム検索

〜INDEX〜



〜Download Site〜

     『Firefox』のダウンロードサイト
     Download
     http://mozilla.jp/


サーバー・レンタルサーバー Fc2



















  • スタイルシートDark Google for Firefoxを取得してGoogle FirefoxのスタートページをDark系のテーマに変更

  • ブラウザ FirefoxIcon
  • ■Firefox 今回使用したFirefoxのバージョン 3.6.3

  • 今回使用したアドオン、スタイルシート
  • ■ NASA Night Launch   0.6.2010415
  • ■ Stylish   1.0.9
  • ■ Dark Google for Firefox (November 5, 2009 version)
    DarkGoogle32
    


  • Dark Google for Firefoxスタイルシートの取得

  • Firefoxアドオンの 『Stylish』 を使用して 『Google Firefox』 のスタートページに 『Dark Google for Firefox』 のテーマを適用させていきます。
    まずは 『Dark Google for Firefox』 のスタイルシート(CSS) ソースコードを公開しているサイトへ行きCSSコードをコピーします。
  • コピーしたCSSコードを『Stylish』の編集機能を使い編集していきます。
    サイトで公開されているCSSコードでは、『http://www.google.com/firefox』 『http: //www.google.co.uk/firefox』 『http://www.google.ca/firefox』の3サイトでの適用ですので日本語サイトの 『http://www.google.co.jp/firefox』 を追加するコードを記入していく簡単な編集です。

    ▼『Dark Google for Firefox』 公開のサイト▼
  • http://mcdavis.dreamhosters.com


  • 『Dark Google for Firefox』 の公開サイトへ行きCSSコードをコピーする。
    表示されているリストの中から『 NNL-google-firefox.css 』をクリック → 次のページの画面上のメニューバーより「編集」→「すべて選択」の順にクリック

   DarkGoogle22

    DarkGoogle12
            ↓
  • ターゲットのCSSコードが選択状態(反転表示)されたらメニューバーより「編集」→「コピー」の順にクリック
    DarkGoogle13


    DarkGoogle14
          ↓
  • CSSコードの貼り付け
    ソースコード記入欄にカーソルを持って行き 「右クリック」
    表示されたポップアップメニューより「貼り付け」をクリック 又は ( Ctrl +V )
    DarkGoogle15
          ↓
    DarkGoogle17
          ↓
  • 追加するコードの挿入位置検索
  • 検索キー入力エリアに 『 @-moz-document 』 と入力し最初の『 @-moz-document 』を記述している場所を探します。
    入力された検索Keyと一致した語句があれば最初の一致箇所へ自動的に移動してくれます。

    スタイルシートの適用サイトを指定する記述が書かれている構文は『 @-moz-document 』から始まります。

  • DarkGoogle18
              ↓

  • 最初の@-moz-document 欄に url-prefix(http://www.google.co.jp/firefox), を挿入
    『 url-prefix(http://www.google.com/firefox), 』 と 『 url-prefix(http://www.google.co.uk/firefox) ,』 の間に 『 url-prefix(http://www.google.co.jp/firefox), 』 を割り込ませます。
    適用サイトの各アドレス指定の順序は関係ありませんが今回は少し遠慮して『 url-prefix(http://www.google.com/firefox), 』の次にしてみました。
    • @-moz-document
      url-prefix(http://www.google.com/firefox),
      url-prefix(http://www.google.co.jp/firefox),
      url-prefix(http://www.google.co.uk/firefox),
      url-prefix(http://www.google.ca/firefox)
    DarkGoogle19
           ↓
  • 『 url-prefix(http://www.google.com/firefox), ,』の追記が完了したら『お試し』ボタンをクリックして記述が正しいかチェックします。
    DarkGoogle20
          ↓
  • 『FirefoxStart』 のロゴ部分の色が変われば記述方法に問題がありませんので次は全体の背景を設定しているところに移動します。
    DarkGoogle21
          ↓
  • 先ほど指定した検索Key『 @-moz-document 』のまま『 次を検索 』ボタンをクリック
    このとき編集エリア内のカーソルの位置は先ほど検索して移動した
    『 @-moz-document 』より下の位置にあることを確認して下さい。
    DarkGoogle23
          ↓
  • 次の『@-moz-document』が記述まで移動してきたら『 url-prefix(http://www.google.com/movies) ,』行の後に『 http://www.google.co.jp/firefox 』と適用させたい関連サイトのアドレスを記述します。
    • @-moz-document
        url(http://www.google.com/),
        url-prefix(http://www.google.com/webhp),
          :
        url-prefix(http://www.google.com/movies),
    • この行の下に記述します。
    DarkGoogle24
         ↓
  • 今回はGoogle Firefoxのスタートページと検索結果表示ページ、画像検索結果、動画検索結果、お店検索結果の表示ページを追加してみました。
    • ▼ 追記したコード ▼
      url(http://www.google.co.jp/firefox),
      url-prefix(http://www.google.co.jp/search?hl=),
      url-prefix(http://www.google.co.jp/images?hl=),
      url-prefix(http://www.google.co.jp/search?q=),
      url-prefix(http://www.google.co.jp/images?um=)
    DarkGoogle25
        ↓
    DarkGoogle26
        
  • 編集したスタイルシートの保存

  • スタイルに名前を付けて『保存』ボタンをクリックします。 保存することにより適用されます。
    DarkGoogle27
        ↓
  • これで『 Google Firefox (co.jp) 』のスタートページに今編集したスタイルが適用されました。
    DarkGoogle28.
        ↓
  • 『Stylish』の管理画面のリストに先程名前をつけたスタイルが表示されていれば正常に登録完了です。
  • これで『Stylish』を起動することにより自分で編集したスタイルの編集、有効化、無効化、削除などの操作が可能になります。
    DarkGoogle29
        ↓
  • 今回関連サイトとして登録した検索結果表示ページ(左上)、画像検索結果(左下))、動画検索結果(右上)、お店検索結果(右下)
    DarkGoogle30

  •   
  Home PageTop Back
inserted by FC2 system