【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

意外と簡単なGoogle Webフォントを活用する2つのステップ!

意外と簡単なGoogle Webフォントを活用する2つのステップ!

みなさんこんにちは!あっという間に3月ですね。。。

今年ももう3ヶ月過ぎたことに驚きを隠せない開発部ヤマダです。

さて、本日はGoogleのWebフォントを使用する方法をを紹介します!
(若干いまさら感が否めないですが。。。)

“Web Font とは”

普段Webサイトを製作していると、見出しやタイトルでサイトのイメージに合ったフォントを使いたいときってありますよね。

私も今まではIllustratorで画像を作成して、それをそのまま要素で配置していたのですが、CSSでフォントを指定することで好きなフォントを表現することが可能です。

CSSの記述で

body{
     font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
}

の様に記述してサイトのフォントを指定します。

通常ブラウザで表示できるフォントはユーザーのパソコンにインストールされたフォントだけですが、これを、Web上に公開されているフォントを取り込んで表示させるのがWeb Font です。

Googleから取り込む

今回はGoogleが公開しているGoogle Fontsを利用して、

さまざまなフォントを表示する方法を紹介します。手順としてはいたって簡単な、

  1. head内でCSSを読み込む
  2. CSSで任意の要素にWebフォントを指定する

という2点だけです。

1.head内でCSSを読み込む

Google Fontsから好みのフォントを選び、下記のボタンを押下し詳細ページへ遷移する。

20160314_01

3. Add this code to your website: に書かれている要素を、

自身のサイトの内に記述する。

20160314_02

2.CSSで任意の要素にWebフォントを指定する

フォントの詳細ページに記載されている、

4. Integrate the fonts into your CSS: を自身のCSS内に記述する。

20160314_03

これで、先ほど選んだフォントがWebサイト内で表示されています。

Webフォントを利用していないとき。
Webフォントを利用していないとき。
webフォントを利用したとき
webフォントを利用したとき

サイトのイメージに合った文字になりましたね!

終わりに

Google Fontsの各フォントの詳細ページを見ると、ページの先頭部分に計器のような画像があり、

文字の太さ(font-weight:400)のチェックボックスを変更すると計器の針が動きます。

スクリーンショット 2016-03-14 14.45.24

そう、これは Web Fontの読み込みにかかる時間を表し、フォントの種類と大きさによっては読み込みに若干時間がかかるんです。。。

Google Fontsの注意書きにもありますが、サイト内で使うWebフォントはせいぜい1つに決めておいたほうが良いのかもしれません。

使いドコロを意識して、サイトのコンセプトにあった文字を選定しましょう!

以上、開発部ヤマダでした!

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+