Textwellで文字に色とりどりなハイライトを付ける Colors(装飾版)
大事なところは蛍光ペンで強調を。
色見本が出るだけでは寂しいので活用方法を考えました。Textwellでカラーコードの色見本を表示するアクション Colors
配色を決める参考に。HTML用カラーコードを取得。HTMLタグの配色は「style="color:#000033; background:#CCCCCC"」と指定します。この「#000033」とか、数...
<title>Colors</title>
<body style=margin:0;>
<script>
h="0123456789ABCDEF";
s="<table>";
for(i=0;i<256;i+=51){
for(j=0;j<256;j+=51){
s+="<tr align=center>";
for(k=0;k<256;k+=51){
c=h.charAt(k/16)+h.charAt(k%16)+h.charAt(j/16)+h.charAt(j%16)+h.charAt(i/16)+h.charAt(i%16);
s+="<td style=padding:50px;background:#"+c+";><a onClick=Paste(\"#"+c+"\")>"+c+"</a></td> ";
}
s+="</tr>\n";
}}
s+="</table>";
document.write(s);
function Paste(x){
s=T.current;
if(T.range.len){
text="<span style=\"background:"+x+";\">"+s+"</span>";
T("replaceCurrent",{text:text});
}else{
if(s){
text="<div style=\"color:white;background:"+x+";padding:10px;font-size:large;font-weight:bold;\">"+s+"</div>\n";
T("replaceCurrent",{text:text});
}else{
T("insert",{text:x});
}
}
}
</script>
</body>登録リンクはこちら→ http://tinyurl.com/ooo2e3h
強調したい範囲を選択状態にしてColorsを起動します。
色見本のコードをタップして、使いたい色を選ぶ。
それを背景色にしたspanタグが付加されます。つまり、中学生の教科書のように蛍光ペンで文章に色塗りすることが出来る。ハイライトできるわけです。
今回は小見出し化機能搭載
さらに、範囲選択をしていないときはカーソル行を小見出しにします。文字は白でサイズをlarge、ウェイトは bold。ここあたり好きなようにカスタマイズしてください。空行のときは従来通り、カラーコードを貼り付けます。
(あらぁ、はてなが付ける自動リンクで小見出しが黒になっちゃてるなあ)
そんなこんなで、装飾優先の改造版。普通はブログごとに style で決めるんだろうけど、そこあたり自由に配色したい日もあるかも知れない。内容で勝負しないといけないから、テキストだけだとちょっとしんどい。そもそも真冬のような、モノクロな世界では寒々しい。
Textwellなら「色」を添えることができます。世間に縛られるのは嫌だ。俺は自分の色で生きるんだって青春時代には、このアクションがお役に立つかも知れません。
