Webシステム用管理者画面作成マニュアル デザイン/HTML/CSS/JavaScript集
HTML

矢印・見出し・飾りフォント

管理者画面で多数見かける&利用されている矢印や見出しのアイコン。あまりビジュアルにこだわったものはうるさく感じることがありますよね。でもまあ、このあたりは個人の趣味なので深く追求はしませんw
こちらでは私がよく利用するアイコンフォントをご紹介します。
フォントに関しては、2次配布になってしまうのですが、外国産フォントなのでコソッと許してももらおうかな・・と思っています^^;Windows版のみ。
また、Windowsにデフォルトで入っていても気づいていないフォントもあったりします。それらの例文も掲載しました。
【使用例】
お勧め情報修正
店舗のおすすめ10商品を表示します。
月ごとに確定した成果報酬の合計を表示します。
【上記ソース例】
<div class="sample_icon">お勧め情報修正</div>
.sample_icon{
background-image:url(/~kanri-gamen/images/design/arrow/sample_icon.gif);
background-repeat:no-repeat;
background-position:0% 5%;
padding:0px 0px 10px 20px;
font-size: 16px;
font-weight:bold;
}

(1)フォントのインストール・管理について

WindowsもMacもそうですが、フォントフォルダにたくさんのフォントを入れてしまうと、PCの動きが悪くなったり、Macの場合特にですが、OSがとまってしまうことがあります。
そこで!!!!PCに負担をかけず、かつ簡単にフォントを使用したい場合、以下のフリーソフトをお勧めいたします(こいつうああ、本格的にお勧めですよ!!)。

フォントマスター旧版ForWindows(フォントマスター2は作成中のようです。)→配布停止になったようです。

新たに別のフォント管理ソフトを探しました。コチラの方が性能上でした。海外サイトで拾ってきたフォントは、フォントマスターでは扱い切れなかったり、小塚やモリサワあたりも微妙でした。ですが、このフォント管理ソフトはかゆいところに手が届くようなソフトで、大満足です。

なんといっても、現在もバージョンアップを続けている点が最大。フリーソフトを選ぶ指針のひとつとして、製作者が常にこのソフトに対してバグとりや機能改善を行っていることです。システムもそうですよねっ。
どうしてもっと早く見つけれなかったんだろう。でも起動に少し時間がかかるのが・・・とちょっと残念。ちょっとだけなんですがね!!(気が短い私としてはもう少し早く起動して欲しい。そしていきなりフォント管理ウィンドウが開いて欲しい
「フォントインストーラー SAKURA」http://tam.vni.jp/

使い方
(1) Dドライブでもどこでもいいので任意の場所にフォントをいれたフォルダーを置きます。
(2) ソフトの画面左上側のエクスプローラから該当のフォントフォルダを選択します。
(3)選択すると、そのフォルダ以下に入っているフォントが、右下画面に次々と表示されます(仮インストール状態)。
(4)各種エディタソフトで、SAKURAの右下側に表示されたフォントが選択可能となります。
※SAKURAを終了すると、選択もできなくなりますのでご注意ください。Fireworks、Photoshop、illustratorなどを使用の場合は、アウトラインをとるか、再度フォントマスターを起動させて、該当のフォントが入っているフォントフォルダーを選択し、仮インストール状態にしてください。ソフトによっては、SAKURAを起動させずにフォントの外観を維持する場合がありますが、何か作業を適用すると外観崩れますので、使うフォントは仮インストール状態にしておくのがベストです。

(2)文字列

以下で紹介するフォントは、下記の順で文字が並んでおります。(キーボード左上より、右下にかけて並んでいます。)
サンプル
1234567890-^\qwertyuiop@[asd
fghjkl;:]zxcvbnm,./\!"#$%&'(
)=~|`{+*}<>?_QWERTYUIOPASDFGH
JKLZXCVBNM

(3)フリーフォント例

この他にも山ほどあります。「Dingbats」で検索すると、このようなアイコンに使えそうなフォントが山ほど検索されてきます(ほとんど外国サイトです) 。 ちなみに、私はこの「Pointers」を一番よく使います。

フォント探せるサイト(海外)
http://www.houseoflime.com/
http://www.fontface.com/fonts/(ここオススメ。ダウンロードの際はサンプル下にある「TTF」をクリック。WINをクリックしてもどうもうまく行きません。)
http://www.fontsnthings.com/
http://www.fontfiles.com/
http://www.myfonts.com/
http://www.dafont.com/
http://www.acidfonts.com/

以下のダウンロード先は外国サイトなので、突然変更される場合がございます。リンク切れを発見された場合はご連絡ください。
フォント名 サンプル
Pointers
CarrDingbats1
Regular
CarrDingbats2
Regular
EZBorder
Mapbats
Stars splats & arrows
Carr Balloons

◆他にも色々あります。サンプル一覧(ちょっと大きい画像です) ⇒矢印1 ⇒矢印2

▲UP
エルテ化粧品
▲「エルテ化粧品」スポンサーサイトです。
(c)kanri-gamen