Font Awesomeを使ってJimdoのボタンを魅力的に

Webを構成する上で絶対に欠かせない物の一つである「ボタン」。ボタンの色や形が違うだけでもサイト閲覧者の反応が変わってしまう、非常に重要な要素です。

そんなボタンですが、Jimdoの通常の機能ではシステムに準拠した文字と記号しかボタンに入力することしかできません。私が良く使うのは下の画像のようなボタンです。

画像では閲覧者から最も良い反応を得られると予測できるオレンジをボタンに使用し、矢印の記号として » を最後に付けています。

真面目なサイトならこれで十分なのですが、優しい／可愛い雰囲気のwebサイトではちょっと味気ないですよね？そんな時はFont Awesomeの出番です。

ヘッダー要素でFont Awesomeを読み込ませ、ボタンに対してcssを記述するとボタンにアイコンを付けられるのです。

例えばこんな感じです。

お問い合わせのボタンにメールのアイコンが付いたことで、親しみやすい雰囲気になりました。画像では文字の先頭にアイコンが付いていますが、末尾に付けることもできます。

今の自分のサイトのボタン、なんだか味気ないなと感じている方は、私のサービスでカスタマイズを承りますので、お気軽にご連絡ください。

宜しくお願い致します。