目的

FireFoxのプラグイン「Stylish」を利用して，Googleの検索画面に月島ほろちゃんを召喚しようという計画です。
「Stylish」の使い方も含め，メモとして残しておきます。

月島ほろ01月島ほろ01
月島ほろ02月島ほろ02

目次

  1. 目的
    1. 前提条件
    2. 用意するもの
  2. 「Stylish」をFireFoxにインストール
  3. 「stylish」の使い方
    1. Google用のスキンをGet
  4. 術式用言語について
    1. 参考サイト
  5. Firebugにつて
    1. 参考サイト
  • GoogleサイトのHTMLを分析
  • Stylishで術式を書く
  • ほろちゃん召喚
  • まとめ

    • 前提条件

    • HTML/CSSの予備知識
    • Firebugの基本的な使い方

    用意するもの

    • FireFox
    • Stylish
    • 背景にしたい画像

    「Stylish」をFireFoxにインストール

    まずは，これが無ければ何も始まらない。
    ということで，下記でdownload。

    FireFox
    Stylish :: Add-ons for Firefox

    今回使う「Stylish」は，ブラウザ側に保存された所謂「ユーザースタイルシート」を使ってサイトを上書きしています。
    別に，googleのサイトをハッキングしたりとかはしてるわけではありませんのでご安心を。

    「stylish」の使い方

    Google用のスキンをGet

    まずは，スタイルを書き換えたいサイトを表示しましょう。今回の場合ならGoogleですね。
    続いて，ステータスバーにあるStylishのアイコンを右クリックして，「このサイト用のスタイルを探す」 をクリックします。

    そうすると，userstyles.org というコミュニティーサイトに飛びます。
    しかも，既に「Google」用に作られたスタイルの検索結果が表示されます。
    その中の気に入った物をクリックし,詳細を確認（殆ど英語ですが^^;）。
    ページの右上にある 「Install with Stylish」 をクリックすると，そのスタイルが影響するサイトのURLを確認するアラートの後,ダウンロードされStylishから使えるようになります。
    見事に書き換えられたら,成功です。

    stylish例stylish例

    ※『google space beer』というスタイルを適用した様子

    解除したい時はStylish アイコンのメニューから，当該のテーマ名のチェックを外せば，適用が解除されます。
    このように既に用意されているスタイルを探して使うだけでも充分楽しめますね。(もちろん，テーマのある他サイトでもOK)

    術式用言語について

    先にも述べたように，「Stylish」はCSSを使ってサイトを上書きしています。
    CSSは，簡単に述べるとホームページのデザインを定義する言語です。(因みに，HTMLは文章構造を定義しています。)
    まぁ，この辺りは説明しだすと長いんで，下記に示す参考サイトなり書籍なりGoogle大先生に聞くなりしてください。

    参考サイト

    Firebugにつて

    さて，召喚魔法の為の最後の道具は「Firebug」というこれまたFireFoxのアドオンです。

    Firebug:: Add-ons for Firefox

    このアドオンは，FireFoxでWeb開発するうえで，色々な便利機能を追加してくれます。
    ほかにも，WebDeveloperツールとか色々ありますけど，Firebugが一番有名(＝日本語情報が豊富)なので，今回はこれを使用します。

    インストールが終わると，ツールバーにハチのアイコンが出てくるのでそれをクリックすれば起動します。
    すると，ブラウザ内にFirebugeの画面が現れます。
    通常は右にHTMLのソースが，左にCSSのソース等が表示されると思います。この画面を使ってGoogleさんを分析していきます。

    参考サイト

    GoogleサイトのHTMLを分析

    まずは，Googleのサイトを表示しつつFirebugを起動します。
    そして，Firebugのハチアイコンの横にある長方形に矢印のあるボタンをクリックします。

    firebug2firebug2

    そのままGoogleの画面にカーソルを持ってくると，青い枠で特定のエリアが囲われます。

    要素調査要素調査

    それをクリックすれば，「要素」が選ばれ，Firebugの右画面にはその「要素」に関連付けられているCSSが表示されます。
    このCSSをStylishで上書きしていくわけです。
    手順としては，変更したい「要素」の「ID」or「class」を調べ，その「ID」or「class」をStylishで上書きしていくという作業になります。

    Stylishで術式を書く

    では，早速書いていきます。
    Googleさんを表示した状態で，Stylishのアイコンから「新しいスタイルを書く→　このサイト専用」を選びます。
    すると，下記の「おまじない」が書かれた画面が開くと思います。

    [おまじない] [lang:CSS]
    1
    2
    3
    4
    5
    @namespace url(http://www.w3.org/1999/xhtml);

    @-moz-document domain("google.co.jp") {

    }

    この{　}の中にCSSを書いていきます。

    まず簡単に，下記を入力してみてください。

    [背景色を変更] [lang:CSS]
    1
    2
    3
    body{
        backuground-color: #000000;
    }

    「保存」または「お試し」を押してみてください。
    そしてGoogleを見てみると，背景が黒くなっていたら成功です。

    ほろちゃん召喚

    さて，いよいよわれらが「月島ほろ」を呼び出してみたいと思います。
    まずは，公式ホームページやTwitterから公式画像をダウンロードしましょう。

    [月島ほろ公式ホームページ] 活動停止により閉鎖;;

    月島ほろ公式Twitter

    画像をダウンロードしたら，PCの任意の場所に保存しましょう。
    そして，そのまま画像をドロップでブラウザに放り込みます。
    するとURL欄に次の形式で画像までのルートが記載されます。

    [背景色を変更] [lang:CSS]
    1
    2
    3

    file:///ドライブ名:（例 D:）/フォルダ名/画像ファイル名

    このURLをコピーして，stylishのbodyに次の形式で貼り付けます。

    [背景に画像表示] [lang:CSS]
    1
    2
    3
    body{
        background-image:("コピーしたURL");
    }

    ※stylish公式サイトの使用上「background-image」はコメントアウトしてありますので，解除してください。

    [背景色を変更] [lang:CSS]
    1
    2
    3
    4

      /*background-image: url("コピーしたURL");*/→「/*」「*/」をとる
    →    background-image: url("file:///ドライブ名:（例 D:）/フォルダ名/画像ファイル名");

    それを保存すれば，Googleへの月島ほろ召喚完了です。
    ところが，このままでは無限にほろちゃんが呼び出されてしまいます。

    そこで，次のコードを付け足します。

    [背景画像配置] [lang:CSS]
    1
    2
    3
    4
    5
    6
    body{
        background-image:("コピーしたURL");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right bottom;
    }

    これで，ページの右下に固定されて表示されます。

    月島ほろ %月島ほろ %

    設定によって好きな場所に出現させることができるので，冒頭の参考サイト様を参照に各自設定してみてください。
    他の要素は，先に述べた通りIDやclassを指定して設定していくのが便利です。

    まとめ

    Stylishを使うと，簡単にユーザースタイルシートのオン・オフが切り替えられて便利です。
    HTML/CSSの知識がちょっと必要ですけど，プログラミング言語ほど難しくないので，チャレンジしてみてください。
    以上で，「Stylishを使ってGoogleに月島ほろを召喚 by FireFox」は終了です。
    お疲れ様でした。

    ※下記に，Topの画像で使ってるCSSを公開しておきます。但し，ソースコードだけで画像は付いてきません。好きな画像を引っ張ってきて設定してください。
    ※CSSの仕様上background-imageのURL欄に他サイトにある画像のURLを入力すると，その画像を背景に使えますが，サーバーの負担や規約違反等になるので絶対にしないでください。

    horo_tsukishima on google