最近、地元のマタニティウェアショップから依頼されたサイト制作で初めてアイコンフォントというものを使ってみたのですが、なかなか使い勝手が良かったので、今後の覚書ということでまとめてみました。

アイコンフォント（シンボルフォントとか言い方は幾つかあるよう）とは、Webサイトなどでよく使われるアイコンのセットをフォントとして使えるようにしたもののことです。

画像アイコンとは違ってベクター形式なので画面の解像度によらずきれいに表示されることや、cssで色、サイズなどを調整できるメリットがあります。

 

今回アイコンフォントを探してみて、商用利用も自由な無料のものでもかなり充実した内容のものがあるな～という感じでした。アイコンって探し始めると本当にあっという間に時間が過ぎて行ってしまいますが、今後はアイコンを探す手間も減るんじゃないかなと期待^^

ちなみに、Wordpressブログでアイコンフォントを使いたい場合も、ちょっとした設定だけで利用できるようになりますので、ぜひこの記事を参考に使ってみてください。記事の後半では、アイコンフォントをサイトで利用するときに便利なWebサービスも二つ、使い方も併せて紹介していきます！

 

初めての利用におススメなアイコンフォントFontAwesome

公式サイトhttp://fontawesome.io/

商用利用にもライセンス表記なしで自由に使える無料のアイコンフォントです（ライセンスの詳細はこちらを確認）。479個（記事執筆時）のシンプルで使いやすいアイコンが揃っていて、取りあえずこれがあれば事は足りるという感じの定番アイコンフォント。以下、使い方の手順です。

 

フォントを利用するHTMLで読み込む

まずはFontAwesomeのフォントを、自分のプロジェクト（サイト）のHTMLで読み込めるように設定していきます。方法は二つあって、フォントファイルをダウンロードせずに本家サイト（BootstrapCDN）から読み込む方法と、フォントファイルをダウンロードして自分のプロジェクト内に設置する方法があります。好きなほうを利用してください。

 

方法１．ダウンロードしないでBootstrapCDNからCSSを読み込む

以下のコードをHTMLファイルのheader内にコピペするだけでOK。

参考http://fontawesome.io/get-started/

 

方法２．フォントファイルをダウンロードして利用する

公式サイトにアクセスします。ダウンロードボタンが分かりやすい位置に表示されているのでクリックしてダウンロードを開始。

 

ダウンロードしたzipファイルを解凍。以下のような構成になっています。

cssフォルダ内のいずれかのファイル（推奨：font-awesome.min.css）とfontフォルダ内の全てファイルを自分のサイトのcssフォルダとfontフォルダにそれぞれコピーします。

注：cssとfontフォルダは同じ階層にあるようにしてください。

 

フォントを利用するHTMLを開き、header内で以下のようにコピーしたcssファイルを読み込みます。

※href=””内は自分のサイトの構成に合わせて適宜変更

 

ここまででフォントの読み込み設定が完了です。では実際にサイト内にアイコンを配置しましょう。

 

サイトにアイコンを配置

公式サイトにアイコンの一覧があるので以下よりアクセスします。

http://fortawesome.github.io/Font-Awesome/icons/

 

ずら～～っと並んでいますね^^; 使いたいアイコンが見つかったらクリックします。

すると、選択したアイコンのタグが表示されますのでコピーします。

HTML内に貼り付けます。

こんな感じにボタンに使ってみました。

 

アイコンのスタイルを変更するのに既に用意されたcssクラスも併せてチェックしておくと役立ちそうですね。

http://fontawesome.io/examples/

 

 

WordPressでFont Awesomeを使う設定

WordPressに何かの機能を追加するとなると、ついついプラグインを使う方向に頭が向いてしまいますが、今回はプラグインは使いわない方法でやってみました。

（実は、使おうとしたんですが、どれもうまく動作しなかったんです・・・。Worpress本体のバージョンとの互換性が微妙だったよう）

 

プラグインを使わずにFont Awesomeを導入する方法はいくつかあるようですが、私はfunction.phpに以下のコードを追加する方法にしてみました。

参考Add Font Awesome Icons To WordPress

 

ダッシュボードで外観>テーマ編集の画面に行き、function.phpを開き、以下のコードを追加してください。

※4.2.0の部分は公式サイトに表示されている最新バージョンに合わせると、最新のアイコンが使えます。

function.phpを保存したら、あとは、投稿画面のテキストモードで、必要な場所にiタグを設置すればOK。

例）　<i class=”fa fa-angellist”></i>　⇒　

 

簡単ですね

iタグに記述する各アイコンのクラス名は前述のようにサイトで確認してください。

 

このブログでは記事タイトルの先頭にあるマークを画像からアイコンフォントに変更しました。

Before： スマホなど画面幅の狭い画面で見た場合にタイトルが縦長になってしまっていました。

 

After：幅が狭くなっても改行が少なく見やすくなったかなと思います。色の変更とかもCSSだけで調整できるのもいいです。

 

March.15.2015追記：ブログデザインのカスタマイズに伴って上記のような記事タイトルの先頭のマークは消えました。代わりにFontAwesomeを使ってShareボタンやFollowボタンを表示させたり、グローバルメニューにもアイコンを表示させています。

 

さてここまではFont Awesomeというアイコンフォントのみの利用方法でしたが、それ以外にもフリーで使えるアイコンフォントは幾つも存在します。

そんなアイコンフォントのなかから好きなもの利用したいという場合に役立つサービスを二つご紹介します。

 

複数のアイコンフォントを簡単な設定で使えるWebサービスWE LOVE ICON FONTS

FontAwesomeを含め、幾つかのアイコンフォント（すべて無料かつオープンソース）を使いたいという時に便利そうなWebサービスを見つけました。ファイルのダウンロード不要でさくっと設定して使えます。

サイトにアクセスhttp://weloveiconfonts.com/

 

表示されているフォントの中から使いたいものをAddをクリックして追加します。

 

ページの下のほうにスクロールすると、Use selected font(s)というセクションがありますので、そこに表示された内容をコピーして、自分のサイトのcss内に貼り付ければ、フォントの読み込み設定が完了です。

例）typiconsとzocialという二つのフォントを選んだ場合

 

次に使いたいアイコンをサイト内で選んでクリックし、ページ下に現れるアイコンのクラス名をコピーし以下のようにspanタグで設定すればOKです。

例）Zocialフォントのdribbbleを選ぶ場合　<span class=”zocial-dribbble”></span>

 

 

使いたいアイコンだけを選んで一つのフォントファイルにしてくれるサービスFontello

前述のサービスとは違って、cssやアイコンファイルをダウンロードして使うタイプのサービスですが、かなり使えそうです。幾つものアイコンフォントの中から、自分が使いたいアイコン（フォントではなく）だけを選ぶことができ、しかも選んだアイコンだけを新たなフォントとしてまとめなおしてくれるんです。

数あるアイコンの中でも実際に一つのサイト内で使うものは限られていますし、ファイルサイズを最小限に抑えながら自分の好きなアイコンをセットにできるのはありがたいですね。

 

サイトにアクセスhttp://fontello.com/

一覧の中から使いたいアイコンをクリックして選んできます。 

 

アイコンを選んだらページ右上のDownload Webfontをクリックしてファイルをダウンロードしましょう。

※ボタンのカッコ内は選んだアイコンの数です。

ファイルを解凍すると以下のような構成になっています。

 

 

使い方は、css、fontフォルダを自分のプロジェクト内に追加し、cssフォルダ内のファイルをHTML内で読み込みます。

基本的には以下の二つのcssファイルを読み込めばOKです。

 

その他のcssファイルは必要に応じて利用してください（README.txtを参照）

 

アイコンはiタグのクラスにアイコン名を設定して利用します。自分が選んだアイコンの一覧とクラス名はdemo.htmlを見ると確認できますよ。

例）　<i class=”icon-home-outline”></i>

最近、自分のサイドビジネス用にひとつWebサイトを立ち上げようと思い、色々なテンプレートを探してたのですが、無料でも今どきのフラット系デザインとか、なかなかお洒落なHTMLテンプレートが見つかったので、備忘録も含めてこの記事で皆さんとシェアしたいと思います。

Treviso

最近人気のタイプのHTML5テンプレート。下の全体像を見ていただくとわかりますが、すべての情報が1ページに長～く記述されていて、ページ最上部のメニューをクリックすると、その内容の位置までスクロールダウンされ、あたかもページ移動したかのようになります。（このテンプレートでは少し下にスクロールすると最上部にメニューが表示されます）。

別ページに遷移するよりも表示がスムーズなので格好いいですし、閲覧者側としては下にどんどんスクロールするだけですべての情報が見れるのも魅力ですね。ただ情報が多くなる場合はページを分けるタイプのほうがいいかなという気がします。

ダウンロードはコチラ

デモはコチラ

 

 

Juntos

こちらも1ページにすべての情報が収まっているタイプのHTML5テンプレート。チャリティー関連の組織向けに作られたテンプレートで「寄付」ボタンもついています。もちろん他のジャンルにもカスタマイズ可能。レスポンシブ対応、コンタクトフォームがちゃんと機能するPHPファイルもありという非常にありがたいテンプレートです。ドキュメンテーションもしっかりしています。

 

ダウンロードはコチラ

デモはコチラ

 

NOVA

こちらもHTML5で作られていますが、ページ遷移するタイプのテンプレートです。様々なジャンルに応用できそうなシンプルなデザイン。ブログ形式やポートフォリオ、ギャラリーのページなど使いやすい形のページが揃っています。コンタクトフォームもちゃんと動くのでコーディングに自信がない人も安心して使えますね^^

ダウンロードはコチラ

デモはコチラ

 

Infusion

レスポンシブ対応のHTMLテンプレート。お洒落なエフェクトがあちらこちらに使われていて、クオリティの高さを感じます。残念ながらこちらはトップページのみのテンプレートですので、メニューをクリックしても別のページは表示されません。残りのページは自分で作成する必要があります。

ダウンロードはコチラ（要登録）

デモはコチラ

 

 

Starnight App

こちらもHTML5＋CSS3で作られた人気の一枚型テンプレート。右上のボタンをクリックするとメニューが現れ、メニューを選択するとそのコンテンツの位置までスクロールします。スクロールの仕方がふわ～っとしていい感じです笑

ダウンロードはコチラ（要登録）

デモはコチラ

 

Picku

ギャラリーやポートフォリオサイトに使えそうなお洒落で個性的なテンプレート。ページを全画面に拡大するボタンなど、普通のテンプレートにはなかなかついていない機能があります。画像の「Open」の文字をクリックしたときの動きにも注目です。こちらもテンプレートになっているのはトップページのみなので他のページが必要な場合は自分で作成する必要があります。

ダウンロードはコチラ

デモはコチラ

 

 

Zeences Dark

 

 

中央部分にスライドがあるのと同時に、バックグラウンドもホワホワと変化するのがお洒落です。トップページも色んな要素がたくさん詰まっていますが、各メニューからアクセスできる様々なタイプのページもよく作りこまれたテンプレートになっています。実際このテンプレートをベースにデザインにも手を加えてサイトを作っているところなのですが、ソースコードも綺麗ですし、非常にカスタマイズしやすい。トップページの全体像は以下のような感じです。

 ダウンロードはコチラ

デモはコチラ

※こちらのテンプレートはFree for only personal use（個人利用のみ無料）です。

 

Obscura

 

こちらも上とおなじサイトからのHTMLテンプレートになります。WordpressようのテンプレートをHTML対応したもののようで、ブログっぽい雰囲気のサイトをHTMLで作りたい方にお勧めです。レスポンシブ対応というのもうれしいですね。全体像は以下のような感じ。

ダウンロードはコチラ

デモはコチラ

※こちらのテンプレートはFree for only personal use（個人利用のみ無料）です。

 

 

WEBサイト制作をしていると必ずと言っていいほど必要になるのが「お問い合わせフォーム」の設置。「僕のサイトにちょっとカッコイイコンタクトフォームをサクッと付けてほしいんだけど」と我が旦那様に頼まれて色々探してみた結果、最近流行りのフラットデザインのクールなコンタクトフォームがほんの5分でサクッと作れちゃう無料のWEBサービスを見つけたのでご紹介しようと思います^^　やりかたも非常に簡単なのでぜひ使ってみてください。

Better Contact Formの概要

公式サイト：　http://bettercontactform.com/

一般的な問い合わせフォームの言語、必要な入力項目、配色とレイアウトの設定、問い合わせメールの送信先をオンラインで設定し、取得したコードをサイトのHTMLに貼りつけるだけで問い合わせフォームが設置できます。PHPの知識とか全然いらないです。スパム対策済み、レスポンシブデザイン対応というありがたい機能もしっかりついていますよ。以下に具体的な使い方を図解します。

※上のリンクからサイトにアクセスすると雰囲気がよりリアルに分かると思います。

 

問い合わせフォームの作成と設置

サイトにアクセスすると以下のようなページが表示されますのでCreate Your Contact Formボタンをクリックします。

 

 

以下のように問い合わせフォームを作成するページが表示されるので、自分のサイトのニーズに合わせて設定していってください。全部設定できたらSave Formをクリックします。

 

※言語は日本語も選択できますが、「おメールアドレス」みたいな感じで今のところ翻訳がちょっと面白いことになっている（？）ので英語のままの方がいいんじゃないかな？と思います^^;　ウチの旦那のサイトはロシア語なんで問題ありませんでした（笑）

 

設定を保存するとHTMLに貼りつけるためのコードが表示されます。

Copy Codeボタンをクリックしてコピーし、自分のサイトのHTMLの一番最後（</body>の手前）に貼りつけます。このコンタクトフォームを表示させたいページのHTML全てに貼りつけてください。フッター用の共通HTMLがある場合はそこに貼りつけると一か所で済みそうですね^^

「後で編集したいかも」と思う場合は、アカウントを作成すると設定が保存されるので便利です。

 

というわけで、簡単に設置できるお洒落なコンタクトフォームBetter Contact Formのご紹介でした。