あなたの発信を手伝うWebデザイナー”Ringo”が、【HPとブログの運営&集客】【PC&ガジェット】【ワークスタイル】【制作】の情報を発信するブログ

当ブログについて

筆者について

Ringoプロフィール

あなたのビジネスの発信〜集客までをサポート
Webデザイナー Ringo

RingoをSNSでフォローするならこちら


ブログ運営・集客したい人へ

-

ブログ運営や集客・活用方法について届けます。

当ブログを運営して学んだこと、他ブログのコンサルで気がついたことを、お教えします。

今の時代、”情報発信するブログ”は誰が何をするにおいても重要。

もし、あなたがこれから独立開業するのであれば、開業届を出す前にブログで発信を始めましょう!

この記事は「ブログ運営・集客したい人へ」カテゴリーの記事

Post Title

【Adobe Typekit】Webフォントを使って、ブログの雰囲気を変えよう!

  • スポンサーリンク

Webデザイナー”Ringo”おはようございます。
”あなたの発信を手伝うWebデザイナー”Ringo(@rebirth_design)です!
僕が好きな「Web」や「ガジェット」といった、デジタル関連の物達が持っている”わくわく”感を伝えたいと思って、毎朝8時にブログを更新しています。

ホームページやブログって基本的には『文字(テキスト)』がメインのコンテンツですよね。

その為、文字の色・サイズ・行間・文字間の余白を意識したデザインが必要になります。

このブログで利用しているオリジナルテンプレート『GuGulog』でも、読みやすさを意識して文字の調整をしました。

また、文字の書体(フォント)の変更をすることでサイト全体の雰囲気を変えて、お店やサービス、自分にあったイメージを演出することもできます。

和な雰囲気や大人な感じ、高級感を演出するなら『明朝体』とか使いたいですよね?

少し前までHP・ブログ上で使えるフォントの選択肢は少なかった…。

ホームページやブログ内の文字を変えるには、CSS内でフォントを指定します。

ただ、閲覧者の閲覧端末に指定したフォントがないと反映されなくて、従来は汎用性のあるフォントを指定することが殆どでした。(Wndowsの場合は”MSゴシック”や”メイリオ”。Macだと”ヒラギノ”かな)

ぶっちゃけ、使えるフォントの種類に自由はあまり無く『ゴシック対』なのか『明朝体』か程度な指定しか出来ませんでした。

しかし数年前に『Webフォント』という技術が出てきたことで、閲覧者の環境に関係なく自由にフォントを指定することができるようになったんです!

『Webフォント』を使ってブログの雰囲気を変えよう!(Adobe Typekit編)

Webフォントにはいくつか種類がありますが、僕はAdobeが提供しているWebフォントサービス『Adobe Typekit』を使っています。

PhotoShopやIllustratorを使うために契約しているAdobe CCの『コンプリートプラン』ユーザーなら追加費用を掛けずに利用することができるので、使わない手はないですよね。(利用可能なフォントは限られるが無料プランもあり)

使い方は簡単。

『Typekit』のページから使いたいフォントを選んで、コードをブログテンプレート内に追記するだけ。

『Typekit』のフォントをサイト内で利用する方法。

まずは『Typekit』のページから使いたいフォントを探しましょう。

使いたいフォントをクリックして画面が移ったら『キットに追加』をクリック。

キットを作成・選択したらブログテンプレート内にコードを埋め込みましょう。

最後に『公開』をクリックしてTypekitの設定が完了です。

あとはCSSやHTML内にてフォントの指定をしてあげましょう。

まとめ「Webフォントを使ってみよう」

Webデザイナー”Ringo”今回は「【Adobe Typekit】Webフォントを使って、ブログの雰囲気を変えよう!」って話でした。

フォント一つ変えるだけでもページ全体の雰囲気は結構変わりますよ!

導入も簡単なのでぜひ試してみてください!

ということで、また明日も朝8時に記事を更新するので読んで下さいね。また明日!

この記事が面白い・役に立ったと思ったら、今すぐSNSでシェアしよう!
  • オススメ記事&スポンサーリンク


こんな記事にも興味がありませんか?

  • スポンサーリンク

Ringoから記事を読んでくれたアナタに

RingoのLINE@に登録して、いつでもどこでも何でも即相談できるように!

RingoのLINE@に登録して、いつでもどこでも何でも即相談

Ringoは、LINE@も行なってます。

聞きにくいことや相談したいこと等、何でも気軽に聞いてください!

始めたばかりの今のうちに登録してくれた方は、LINE@での相談を永久無料で対応します。

気軽に下の「友だち追加」ボタンを押して、登録をお願いします!

RingoのLINE@に登録

この記事を書いたのは「Ringo」

筆者「Ringo」について

Ringoプロフィール

RingoをSNSでフォローするならこちら

あなたのビジネスの発信〜集客までをサポート
Webデザイナー Ringo

当ブログにて【HPとブログの運営&集客】【PC&ガジェット】【ワークスタイル】【制作】の情報を発信中。

デジタル関連の物が持っている”わくわく”感を伝えたいと思っています!

【ブログでの発信〜集客までの相談】【レビュー記事等の執筆】【Webサイトや印刷物等のデザイン】を承っております。

ご依頼やご相談は問い合わせページ、各SNSにて。まずは「ブログみて」と気軽に声をかけて頂ければ返信します。

詳細プロフィールを見る

Ringoに仕事を依頼・相談する

  • スポンサーリンク

  • YouTubeで『Macで遊べるゲームの紹介&実況動画』アップ中!

筆者について

Ringoプロフィール

あなたのビジネスの発信〜集客までをサポート
Webデザイナー Ringo

RingoをSNSでフォローするならこちら

ブログ全体の新着記事

Apple好きへ

Apple整備済製品ページから『MacBook Air 11』の…

楽しく生活したい人へ

スーファミやPS、N64…。HDMI接続できないレトロゲーを遊ぶ…

楽しく仕事したい人へ

僕が『ゲームの動画』を作っているのは、仕事?遊び?どっちだと思う…

楽しく生活したい人へ

YouTubeにアップした動画、URLは変えないで動画だけ差し替…

楽しく生活したい人へ

【Macでゲーム】ドット絵世代はハマるアクションゲーム『Dand…

楽しく生活したい人へ

前回は買えなかった『ファミコン』が待望の販売再開!6月28日!予…

ブログ運営・集客したい人への新着記事

No Image

ブログ運営・集客したい人へ

ブログで『自分が伝えたい事』と『読者が知りたい事の差』に、どう対…

No Image

ブログ運営・集客したい人へ

経営者・起業家が、情報発信の為に自分で持っていると便利なスキル『…

ブログ運営・集客したい人へ

『経営者・起業家がブログで情報発信をする』ってどういうこと?

No Image

ブログ運営・集客したい人へ

ブログネタが切れたよ!そんなときはブログのリライトに力を入れてみ…

No Image

ブログ運営・集客したい人へ

【Googleアナリティクス】 2018年5月25日までにデータ…

No Image

ブログ運営・集客したい人へ

毎日更新のブログ。更新を止めるとアクセス数は減る?

ブログ全体の人気記事

Apple好きへ

【追記有】Apple PencilとiPad Proの接続が出来…

Apple好きへ

【検証】MacBookをクラムシェルで使うと、本当にバッテリー劣…

Apple好きへ

[追記あり]Apple WatchでInstagramのアプリが…

Apple好きへ

Apple Pencilが故障。壊れたら交換には出さずに新品を買…

楽しく仕事したい人へ

【追記】ニコちゃんマークこと「スマイリーフェイス」。皆よく使って…

Apple好きへ

MacBookProのディスプレイの掃除はこれ!Mac同梱『クリ…


▲最上部へ