こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。
どろっぷしっぴんぐ研究所どろっぷしっぴんぐ研究所では、11/18（土）に2つのセミナーを同日開催いたします。
▼11/18（土）AM わずか2,000円で学べるノウハウ初級セミナー（東京・新宿開催）
▼11/18（土）PM 家具インテリアSEOで月商100万円を達成する方法（東京・新宿開催）
いずれも大好評のセミナーですが、定員もそれぞれ12名ずつと少人数の開催でございますので、参加を希望される方はお早めにお申込みください。
さて、今週の執筆者はショップできすぎくんカスタマイズでおなじみの岡田祐子さんです。
今回は、アイコンをショップできすぎくんなどのWebサイトで簡単に表示できる「アイコンフォント」についてです。
最近は、アイコン画像の作成や画像アップロードが不要なアイコンフォントを採用するケースが増えています。
参考にして、ライバルとはひと味違うショップできすぎくんにカスタマイズしてみてはいかがでしょうか。
では、今週もお楽しみください。
ショップできすぎくんでも簡単に表示できるアイコンフォント
皆さま、こんばんは！
岡田です。
アイコンは情報をコンパクトにわかりやすく伝えることのできるデザインとして、Webサイト以外でもよく見かけるようになりました。
今回はアイコンをWebサイトで簡単に表示できる「アイコンフォント」についてお話しします。
「アイコンフォント」とはアイコン型のWebフォントのこと。フォント1文字に対して、テキストではなくアイコンが表示されます。
お問い合わせボタンにある封筒アイコンや SNSのアイコンなど今や多くのWebサイトで利用されています。
アイコンは少し前までは画像で表示するのが主流でしたが、ページが重くなってしまったり、サイズや色を合わせるために
複数のアイコン画像を作成しなくてはなりません。
「アイコンフォント」を使えば、色や表示サイズを簡単に変えることができますし、表示角度を変えたり回転させたりと、
様々な表現が可能になりました。
その「アイコンフォント」が簡単に利用できるサービスの一つ「Font Awesome（フォントオーサム）」は、
HTMLやCSS初心者でも簡単に利用できるサービスとして人気があります。
ショップできすぎくんでも利用できるので、チャレンジしてみてはいかがですか？
サンプルページを用意しましたので参考にしてください。
ショップできすぎくんでの利用準備
ショップデザイン設定＞拡張設定 にある「オリジナルCSS URL」欄に以下のURLを入力し保存します。
（注）このURLは２０１７年１０月２４日時点での最新版です。最新のコードは以下にて確認いただけます。
▼Font Awesome · BootstrapCDN by MaxCDN
これで専用のサーバー上にあるアインコンフォントのデータを読み込んで自分のWebサイトに表示できるようになります。
Font Awesomeの使い方
（１）使いたいアイコンを一覧から選びます。
（２）アイコンフォントのコードをコピー
アイコンが決まったらそのアイコン名をクリックします。
アイコンの詳細ページが開くので下の方の<i class～=””></i>というコードを全てコピーします。
チェックアイコンの例
<i class=”fa fa-check-square” aria-hidden=”true”></i></p>
（３）アイコンを表示させたい位置に貼付け
ショップできすぎくんの自由ボックスにて、HTML編集機能を使いコードをペーストするだけ。
下記コード例のようにテキストと組み合わせてみましょう。
＜コード例＞
<i class=”fa fa-check-square” aria-hidden=”true”>おすすめの使い方
（４）アイコンを大きく
はじめにテキストを入力し、ショップできすぎくんの編集機能にて文字サイズを変更させます。
書き出されたHTMLコードにアイコンのコードを追加します。
<font size=”6″>カートに入れる</font>
↓↓アイコンのコードをテキストの前後にコピペ
<font size=”6″><i class=”fa fa-shopping-cart” aria-hidden=”true”></i>カートに入れる</font>
ショップできすぎくんで利用するコツ
ショップできすぎくんの編集機能を利用しアイコンを大きくしたり、色・背景色を変える時は、初めにテキストを入力し、
文字サイズ、色、背景色の設定を行ってから、書き出されたコードにアイコンフォントのコードを追加すると良いでしょう。
まとめ
「アイコンフォント」ではCSSを活用すれば、ボタン風にしたりリストマークに使ったりと幅広く利用できます。
おすすめポイントのリストマークにチェックマークを使ったり、特に注目させたい項目にコメントマークをつけたりと
使いこなしてみてください。
今回の記事では以下のサイトを参考にしました。
より詳しい説明、CSSの例などがあります。
▼【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
———————————————————–
【今週の執筆者】岡田祐子
（プロフィール）
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。
□ぐるめ通販トライアルのブログ
———————————————————–
それでは、次号もお楽しみに。
※この記事は2017年10月26日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ（無料）』
の一部を修正、改訂して掲載しています。
メルマガのご登録はこちら
ドロップシッピング十戒（pdf版）好評発売中！
どろっぷしっぴんぐ研究所、初のデジタルコンテンツ
pdf版『ドロップシッピング十戒』好評発売中です。
上記のリンク先ではドロップシッピング十戒の一覧や目次も掲載しています。
ご覧いただいてぜひご注文ください。
