稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

GoogleのWEBフォントを導入してみた

投稿日:2017年5月20日 更新日:

過去にもwebフォントに触れている記事は多いですが、googleさんのwebフォントの記事を書いていなかったなと思いアップしました。

はじめに

過去にwebフォント関係の記事をいくつか書いていますが、それらはファイルをダウンロードしてサーバーにアップして表示させる物でした。

ただ、googleのwebフォントはそういった手間がかからず、cssに記載するだけで簡単に誰でも使用することが出来る事が一番のメリットです。

注意事項

漢字によっては表示されないケースもございます

日本語のご紹介

昔と違い、今では日本語のフォントも結構増えてきています。

日本語のフォント一覧

  1. M+ 1p
  2. Rounded M+ 1c
  3. はんなり明朝
  4. こころ明朝
  5. さわらび明朝
  6. さわらびゴシック
  7. ニクキュウ
  8. ニコモジ
  9. Noto Sans Japanese

現在ではこの9つからお選びいただけます。

導入方法

「M+ 1p」を導入してみましょう。

まずは上記サイトのhtmlをヘッダーに記載します。

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />

次にcssを記載します。

<style type="text/css">
.wf-mplus1p { font-family: "Mplus 1p"; }
</style>

後はwebフォントにしたい文字に反映させます。

<p class="wf-mplus1p">ここの文字がwebフォントになります。</p>

デモを作成したよ

わかりやすいようにデモを作成してみました。

デモはこちら

さいごに

導入は簡単で表示も早いが

HPを少し違った形で見せたい人にwebフォントがお勧めですが、やはり導入しすぎると元のフォントが見えてwebフォントになってってのがページ切り替わり時に毎回表示されるので結構うっとおしいかもしれません。

後はやっぱりgoogleのフォントは日本語が少ないので自分の好きなフォントから選ぶと言うよりも、あるやつから選ぶって選択肢になりますね。

ただ、個人的には「はんなり明朝」とか普通に使えそうなwebフォントもあるんで面白そうですけどね。

-副業で稼ぐ仕組みの作り方
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

HEIC形式を簡単にjpgにする方法

web上でクッソ簡単にjpgに戻せました 関連記事: ネスタリゾートを100%遊びたい人へ【宿泊あり】 [2020年]百度baiduアカウントを日本から作る方法 iPhoneで動画をDLしてカメラロー …

WordPressのビジュアルとテキストの切り替えが出来ない時

ビジュアルとテキストの切り替えができない・・・そんな時の対策をご紹介 関連記事: PS Auto Sitemapでサイトマップを自動生成(ワードプレス) スマホ画面の一番下にふわっとコンテンツを表示さ …

tinymce advancedで絵文字もフォントサイズも可能に

ワードプレスって、顔文字が使えなかったり、フォントサイズがいじれなかったりと日本人のブログとしては微妙ですよね?そこでこれらを可能にするプラグインのご紹介です。 関連記事: tinymce advan …

Contact Form 7のエラー項目を分かりやすく方法

Contact Form 7を利用している方でエラー項目をよりわかりやすくさせる方法をご紹介いたします 関連記事: スマホ画面の一番下にふわっとコンテンツを表示させる方法 スマホ画面の下にPC切り替え …

アリエクスプレスで商品が届いた後にする事

アリエクスプレスで商品が届いた後にする事です。 関連記事: ワードプレスで簡単にステップメールを使えるプラグインARGWA FREE Autoresponder Yahoo!メールを複数取得する方法 …