どうも！LSSです！！
はてなブログのアイコンについて。
ブログを開始してから、途中一度アイコンを変更していますが、それっきり。
黄緑色の背景に、文字を３つ乗せただけのごくごくシンプルなアイコンとなっていますｗ
↑こういうの。
ちょっと描き直そうか…でも大きく変えると、これまでスターを押してきたブログの方々に「えっ？誰？？」と思われそうなので、「全体的な雰囲気は変更せずに、微妙にかっこよくしたい」と思ったわけです。
なお、今回の記事はお役立ちツールではなく、LSS個人がアイコン制作に「多分他の人はやらない」方法で取り組んでいる様子を綴っただけの記事となります^^;
どうやって描くか？この際コードで！
今のところ、「使い慣れたお絵かきソフト」というのがなく、さらにアイコンは画像サイズがシビアなのでなおの事、がっつり描こうと思うと難儀しそう…。
ちなみに、はてなブログのアイコンは「192×192以上の画像が良い」と書かれていたり、アップロードする画面には、
と書かれていたりします。
んー、つまり、192×192以上であり、リサイズされる最大値である256×256で作るのがベストなのかな？
そしてそれが64×64や16×16にリサイズされる、と。
はてなスターはかなり小さい上に、左下4分の1がスターで上書きされます。
また、サイドバーにあるプロフィール欄では、大きいけれど丸く切り抜かれています。
…以上の事を踏まえて…「canvasタグ ＆ JavaScript」で描き始める事にしました！
※ちなみに、まだ未完成ですｗ
お絵描き開始！
上記画像中、丸と左下の四角は、カットされる位置のアタリで最終的には消します。
コード
<p>[]<canvas id="cv2" style="border: 1px solid white;" width="256" height="256"></canvas>[]</p>
<p><img width="64" height="64" id="s64" /> <img width="16" height="16" id="s16" /></p>
<script>// <![CDATA[
ctx=cv2.getContext("2d");
ctx.beginPath();
ctx.moveTo(15,1);
ctx.lineTo(239,1);
ctx.lineTo(255,16);
ctx.lineTo(255,239);
ctx.lineTo(239,255);
ctx.lineTo(15,255);
ctx.lineTo(1,239);
ctx.lineTo(1,15);
ctx.closePath();
ctx.stroke();
ctx.fillStyle='lightgreen';
ctx.fill();
//ここからアタリ
ctx.beginPath();
ctx.arc(127,127,127,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.rect(1,127,128,128);
ctx.closePath();
ctx.stroke();
//ここまで
ctx.beginPath();
ctx.moveTo(60,20);
ctx.lineTo(25,120);
ctx.lineTo(100,110);
ctx.lineTo(110,90);
ctx.lineTo(42,105);
ctx.lineTo(95,10);
ctx.closePath();
ctx.stroke();
ctx.fillStyle='blue';
ctx.fill();
s64.src=cv2.toDataURL();
s16.src=cv2.toDataURL();
// ]]></script>
こんな感じでコードを足しながら、描画していっています。
ctx.beginPath();
ctx.moveTo(15,1);
で「線を描き始めて、描き始めの位置は右に15、下に1のところから」とか、
ctx.lineTo(239,1);
「そこから、239,1の位置まで直線を引いて～」って感じでカクカクと線を引き、
ctx.closePath();
で、これまで引いた線を「閉じた図形」にします。
ctx.stroke();
で作った線を描画。
ctx.fillStyle='lightgreen';
で塗りつぶしの色を指定して、
ctx.fill();
で指定した色で塗りつぶしを実行する、という感じ。
あと、サイズ違いのものも見られるように、
<img width="64" height="64" id="s64" />
<img width="16" height="16" id="s16" />
と予め画像を入れる枠だけ用意して置いたところに、
s64.src=cv2.toDataURL();
s16.src=cv2.toDataURL();
で現在描画中の画像を、枠に はめ込んでいます。
あとは…
この要領で、線を書き足していって、都度プレビューで確認。
サイズ違いも同時に確認できます^^
満足いったら、ダウンロード保存のコードを追加して、アタリ線を消し、画像ファイルとして保存してから、はてなの設定画面にアップロードする感じですね。
さてどんなアイコンが出来上がるのやら…
探せば、こういった微調整が楽にできるお絵描きソフトもあるんだろうとは思いますが…ここまでくると、コードで描くのもそれほど苦ではなくなってきていますｗ
さて、近日中にアイコンを変更…できるかな？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
