フリーのアイコンセットをダウンロードして、ブログデザインのアクセントとして使う。
僕のページは、なるべくシンプルで、分かりやすい見た目を目指しています。
そのため、あえて白バックにして、修飾的に派手なデザイン枠を使わない事にしています。これは「シンプルイズベスト」という考えももちろんあるのですけど、会社の環境で見られる方の為になるべく派手にならないようにすると言う考慮でもあります。
いきなりど派手なロゴが出てしまうと、会社で見てる方は開きづらいと思うんです。もちろん僕もその一人です。黒バックのブログなんて持っての他です。いきなり閉じる事もあります。
ただし、最近は画像やら動画を扱う事が多くなってきたので、白バックにしてもあまり意味がなくなって来たのですが。
そんな僕ですが、あまり派手にならないようアクセント的に小さいアイコンを配置していくと言う試みを最近やっています。
アイコンを取得するのに便利なサイトがあります。下記です。
≫ Function Icon Set,Royalty Free Stock Icons for Web Design and Web Templates
このサイトは、ロイヤルフリーで使えるアイコンをひたすら紹介しています。画像をそのまま掲載しているのですぐ使えるところが良いです。フリーで使えるアイコンを紹介するサイトは数多くありますが、使いたいアイコンを探すならこのサイトだけ見ればOKなんじゃないかと思います。
フリーなアイコンを紹介する記事は下記も良記事です。アイコンパックがダウンロードできます。
アイコンを探していたら、これが良いなーと思いました。はたらくくるま好きのうちの子供が喜びそうです。
≫ Free Icons:Truck icons,Highway Truck icons,lamp icons,Plate icons
余談ですが、箇条書きの先頭に来る"・"とか"●"などをダウンロードしてきたアイコンに差し替えるには、下記のようにCSSを記述します。
スタイルシートに入れる場合
li { list-style-image : url("/arrow.png"); }
HTMLで直接記述
<ul style="list-style-image: url('/arrow.png')">
これは、箇条書きを矢印にしています。僕のサイドバーの「このブログについて」みたいに修飾されます。注意点は、ブログの場合、http://から全て書く事です。個別の記事になったり、アーカイブになったりすると、相対的な位置がずれてしまうので、アイコンが表示されなくなります。