突発企画 - 目指せ脱初心者(?)！エクステンション自作講座
失敗話が連続で続いたんで、ちょっとお茶にごし。
今回はabout:blankに画像を表示です。
準備
以下、例として次の画像を使用します。
完成イメージ
使用したい画像と同じ階層にて以下の内容でHTMLファイルで保存してください。
(無論"hoge.png"を自分が使用する画像のファイル名に変更してください)
<html><body style="background-color:#000000;"><div style="position:absolute;top:50%;left:50%;width:220px;height:300px;margin-left:-110px;margin-top:-150px;"><img src="./hoge.png" alt="hogehoge"></div></body></html>
スクリプト編集
- "blank_image.user.js"をテキストエディタで開き、先頭に以下のように記述します。
// ==UserScript== // @name about:blankに画像を表示 // @include about:blank // @exclude http* // @description about:blankの背景色を変更し、中央に画像を表示 // ==/UserScript==
以下順に解説していきますので、書き足していってください。
- 背景色を変更する。黒以外にしたい方はgoogle:CSS カラーなどで検索してください。
document.body.style.backgroundColor = "#000000";
- divを挿入。 *3
詳しい説明は私がグダグダ書くよりAll About ホームページ作成を読んでください。
var division = document.createElement("div");
division.style.position = "absolute";
division.style.top = "50%";
division.style.left = "50%";
division.style.width = "220px";
division.style.height = "300px";
division.style.marginLeft = "-110px";
division.style.marginTop = "-150px";
document.body.appendChild(division);
division.style.width、division.style.heightには自分が使用する画像の幅、高さを指定してください。
division.style.marginLeft、division.style.marginTopには自分が使用する画像の幅、高さの倍を指定してください。
- imgを挿入。
var image = document.createElement("img");
image.setAttribute("src", "file:///C:/Program%20Files/Fenrir%20%26%20Co/Sleipnir/plugins/seahorse/blank/hoge.png");
image.setAttribute("alt", "hogehoge");
image.setAttribute("width", "220");
image.setAttribute("height", "300");
division.appendChild(image);image.setAttributeの"file:///〜"は自分の設定に合わせて適宜変更してください。("%20"ってのがwikipedia:スペース(半角)で、"%26"ってのがwikipedia:アンパサンドです)
image.setAttribute、image.setAttributeには自分が使用する画像の幅、高さを指定してください。
ファイルが読み込まれているならば@name、@descriptionで書いた名前と説明が表示されているはずです。
この状態で、about:blankを開くと画像が表示されているはずです。
今回はこれにて終了。
もう少しプラスアルファなことがあるので次回にでも。
