ブログで使用するための超シンプルなアイコンを自作した

【カテゴリ：パソコン　ブログカスタマイズの記録】

このブログで使用するために、アイコンを２個自作してみました。



アイコンといっても、縦横９ドットずつの超シンプルな画像です。

高機能なグラフィックソフトなど使用せず、『Windows 7』に標準で備わっている『ペイント』を使用し、一部フリーソフトを使って加工しました。

この２個のアイコンは、サイドバーのコンテンツのタイトル部分や、リンク項目の文字列の先頭に表示しています。

以下は、具体的に使用している箇所のキャプチャ画像です。







無料で入手できるアイコンの画像はインターネット上にあふれているので、最初色々と探してみたのですが、結局自分が頭の中でイメージしていた画像が見つからず、自作することになりました。

自分の探し方が悪いだけだと思うのですが、このような超シンプルなアイコンはどこにでもありそうなので、逆にわざわざ『目立つようにして公開』するまでもない、みたいな状況になっているのではないかと感じました。

．．．

スポンサーリンク

このアイコンは、絵（＝シンボル部分）の外側が透明色となっています。

自分は最初『ペイント』を使用して描いたのですが、なんと『ペイント』では透明色が使えませんでした。

そこで、検索して調べたら、すごく簡単に透明色を設定できる以下のようなフリーソフトをみつけました。

手軽に透明png　透過png簡単作成フリーソフト（透過gifは作れません）:
http://www.officedaytime.com/toumei/index.html

超便利です。

このソフトのおかげで『ペイント』で描いた画像において、シンボル部分の外側を簡単に透明にすることができました。

以下、今回のアイコン作成までの具体的な手順です。

『ペイント』を実行し『メニュー』⇒『プロパティ』をクリックします。



幅と高さのそれぞれを『9』に設定します。



以下のように表示されます。



小さすぎて編集しずらいので、右下にあるスライダーを利用して『800%』に拡大表示します。



ツールの『鉛筆』で以下のような１ドット単位の絵を描きます。（いわゆるドット絵です。）



『PNG 画像』として『名前を付けて保存』します。



参考までに、もう一つのアイコンは以下のようなイメージです。



次にフリーソフトの『手軽に透明png』を実行します。



『ペイント』で作成した画像ファイルを読み込み、『800%』に拡大表示します。



画像部分にマウスカーソルを乗せると、以下のようにインクボトルの表示に切り替わります。



ちなみに以下は、もう一つのほうのアイコン画像の例です。



インクボトルのカーソルを透明色にしたい箇所に移動してクリックすると、以下のような表示になります。



あとは、ファイルを保存すれば終了です。

．．．

ところで、『最近の記事』などの一覧でリンクの先頭に画像を表示させる方法ですが、自分は以下のページを参考にさせていただきました。

箇条書きリンクの補完２ - ブログカスタマイズ:
http://www.blogcustomize.com/customize_itemize_sidelink2.html

ただ、自分の場合はそのままでは正しい位置に表示できず、以下のようにスタイルシートの内容を調整しました。

.sidelink{
	background:url(https://kingpcfx.up.seesaa.net/image/link.png) no-repeat 0px 5px;
	padding-left:13px;
}

以上です。

スポンサーリンク