Archives | Tumblr | Facebook | bullet-feed.pngRSS

フリーのアイコンセットをダウンロードして、ブログデザインのアクセントとして使う。

function_icon_set.jpg

 僕のページは、なるべくシンプルで、分かりやすい見た目を目指しています。

 そのため、あえて白バックにして、修飾的に派手なデザイン枠を使わない事にしています。これは「シンプルイズベスト」という考えももちろんあるのですけど、会社の環境で見られる方の為になるべく派手にならないようにすると言う考慮でもあります。

 いきなりど派手なロゴが出てしまうと、会社で見てる方は開きづらいと思うんです。もちろん僕もその一人です。黒バックのブログなんて持っての他です。いきなり閉じる事もあります。

 ただし、最近は画像やら動画を扱う事が多くなってきたので、白バックにしてもあまり意味がなくなって来たのですが。

 そんな僕ですが、あまり派手にならないようアクセント的に小さいアイコンを配置していくと言う試みを最近やっています。

 アイコンを取得するのに便利なサイトがあります。下記です。

freeicon.jpg
Function Icon Set,Royalty Free Stock Icons for Web Design and Web Templates

 このサイトは、ロイヤルフリーで使えるアイコンをひたすら紹介しています。画像をそのまま掲載しているのですぐ使えるところが良いです。フリーで使えるアイコンを紹介するサイトは数多くありますが、使いたいアイコンを探すならこのサイトだけ見ればOKなんじゃないかと思います。

 フリーなアイコンを紹介する記事は下記も良記事です。アイコンパックがダウンロードできます。

Free Icons - Hidden Pixels

 アイコンを探していたら、これが良いなーと思いました。はたらくくるま好きのうちの子供が喜びそうです。

Car_Icons_Pack
Free Icons:Truck icons,Highway Truck icons,lamp icons,Plate icons

 余談ですが、箇条書きの先頭に来る"・"とか"●"などをダウンロードしてきたアイコンに差し替えるには、下記のようにCSSを記述します。

スタイルシートに入れる場合

li {
    list-style-image : url("http://naglly.com/arrow.png");
}

HTMLで直接記述

<ul style="list-style-image: url('http://naglly.com/arrow.png')">

 これは、箇条書きを矢印にしています。僕のサイドバーの「このブログについて」みたいに修飾されます。注意点は、ブログの場合、http://から全て書く事です。個別の記事になったり、アーカイブになったりすると、相対的な位置がずれてしまうので、アイコンが表示されなくなります。

このエントリーをはてなブックマークに追加

関連性が高いおすすめ記事


comments powered by Disqus