スクショ用にラベルを付ける

はじめに

Webページの「この部分はこんな感じです」というような資料を作る事が多いです。例えば…

という部分をパワーポイント等で

のように加工して、「①はXXです。」みたいな補足を加える感じ。
この赤部分を入れるのがめんどくさくてしょうがない…ので！ブラウザのコンソールから簡単に挿入できるスクリプトを作ってみました。

使い方

1. 加工対象の要素にid属性がない場合は付与する
2. ブラウザのコンソールに下記を流し込む ※idとlabelの部分は置き換えてね

(function(){"use strict";var
id='abc',
label='①',
e=document.getElementById(id);e.style.border='2px solid red';e.innerHTML='<div style="position:relative;"><div style="color:red;font-weight:bold;position:absolute;top:-18px;left:-15px;padding-right:3px;background-color:white;">'+label+'</div></div>'+e.innerHTML;}());

これだけで上記赤文字と赤線を加えることができます。便利便利♪

整形

上記スクリプトはコピペして使いやすいようにしていますが、整形するとこんな感じ

(function () {
    "use strict";
    var id = 'abc',
        label = '①',
        element = document.getElementById(id);
    element.style.border = '2px solid red';
    element.innerHTML = '<div style="position:relative;">'
        + '<div style="'
        + 'color:red;'
        + 'font-weight:bold;'
        + 'position:absolute;'
        + 'top:-18px;'
        + 'left:-15px;'
        + 'padding-right:3px;'
        + 'background-color:white;"'
        + '>'
        + label
        + '</div>'
        + '</div>'
        + element.innerHTML;
}());

スタイルが崩れる場合は少し加工してみてくださいね(^^)