Gooleのロゴをシルシルミシル仕様にしよう
先ほど放送されたシルシルミシルにてGoole特集があり、その中でGooleのロゴの番組バージョンが作られてました。
残念ながら(？)、採用はされなかったものの番組ページにて公開されているので、自前でロゴとして表示させようと思います。
使うもの
Sleipnir + Seahorseプラグイン
ロゴ画像
今回のロゴ画像はこちらから入手、一番上が日本法人でGoogleのロゴデザインをしているシニアウェブマスターの作品、残り2つが漫画家・蛭子能収氏の作品
手順
- seahorseフォルダ直下にGoogleLogoフォルダを作成し、DLしてきたロゴを置く。(番組ページにいつまでも置いてあるとは限らないので)
- seahorseフォルダにGoogleLogoChanger.user.jsというファイルを作る。
- GoogleLogoChanger.user.jsをテキストエディタで開き、以下の説明の通りに書き足していってください。
ファイル先頭の定義部
// ==UserScript== // @name Google Logo Changer // @include http://www.google.co.jp/* // @include http://www.google.com/* // @description Googleのロゴを変えます。 // @type SleipnirScript // ==/UserScript==
画像ファイルまでのパスを定義します。
var path = sleipnir.ScriptFullName.replace(sleipnir.ScriptName, '').replace(/\.js$/, '') + "GoogleLogo\\";
各画像情報を配列に格納します。
var ar = new Array( "google_shirushiru01.jpg:360:147", "google_shirushiru02.jpg:360:202", "google_shirushiru03.jpg:360:202");
ファイル名、横幅(単位：ピクセル)、高さ(単位：ピクセル)を":(半角コロン)"で区切ってください。
今回はDLしたファイルの名前を変更してあります。
使用する画像を設定します。
var inf = ar[Math.floor(Math.random() * ar.length)].split(":");
画像をランダムで決定し、":(半角コロン)"で各情報を分割して配列に格納します。
画像を入れ替えます。
var obj = document.getElementById("logo");
if(obj != null) {
if(obj.nodeName == "IMG") {
obj.setAttribute("src", path + inf[0]);
obj.setAttribute("width", inf[1]);
obj.setAttribute("height", inf[2]);
}else if(obj.nodeName == "DIV") {
obj.style.background = "url(" + path + inf[0] + ") no-repeat";
obj.style.width = inf[1] + "px";
obj.style.height = inf[2] + "px";
if(obj.hasChildNodes()) {
obj.firstChild.style.display = "none";
}
}
}
その他
ロゴ画像を1つしか使用しない場合は前回の記事なんかを読んで、自分で書き直してください。
画像さえあれば良いので、Googleのホリデーロゴやオリジナルの画像も使えます。
昔のホリデーロゴ(の一部?)はGoogle 公式ロゴなどから入手できます。
他にも検索すればみつかると思います。
