The WONDER ROAD

     

Uターンの失敗からリスタートするブログ

2020年04月

ブログ書いていると
「すこしでもきれいに見せたい」
という欲もでてくるので
コピペできるデザインを紹介しているサイトを
利用させてもらうこともあります。

そういったサイトで
「アイコンを表示させたいときは
"Font Awesome"を導入して・・・」
といった表示もあり
前々から気にはなっていました。

やはりアイコンなしでは
デザインにも限りがあるので
思い切って導入しました。


Font_Awesome_使い方_2020

Contents

  1. Font Awesomeってなに?
  2. Font Awesomeの導入方法
  3. うまく表示されない原因はこれ!

1.Font Awesomeってなに?


Font AwesomeはCSSで
1500以上のアイコンを
無料で利用できる
ツールキットです。

使い方もかんたんで
コードをコピーしてきて
自分のページに貼りつけるだけです。

これだけで
かんたんにページが
格段にキレイにみえます。

有料版もあり
そちらではさらに多くのアイコンを
利用することもできます。

2.Font Awesomeの導入方法

それでは Font Awesome の導入方法です。

いろいろなサイトで導入方法が解説されていますが
少し変わっているようです。

以前は無料版であれば特別な手続きは不要で
利用できていたようですが
最近は無料で利用はできますが
メールアドレスを使用して
アカウントの作成が必要になっています。

下記のような説明があります。

Why do you need my email address?

We create kits for each website so you can quickly upgrade and change your settings all without ever pushing code. To do this, we need to create a Font Awesome account so we know which kits are yours and so you can come back and manage them.



なぜメールアドレスが必要?


コードを再送することなく簡単にアップグレードや設定変更できるようにそれぞれのウェブサイトごとにキットを構成しています。そのため、あなたがどのキットを使っているかを確認するためにアカウントの作成が必要で、アカウントがあることでいつでもキットを管理できるようになります。



ここではCDNで使う方法の説明です。

  1. 無料版と有料のPro版がありますが無料版でも十分なコンテンツですので無料版を申し込みます。
    Font Awesome のホームページから「Start for Free」 をクリックします。

    Font_Awesome_つかい方_1


  2. 表示された画面でe-mailアドレスを入力して「Send Kit Code」をクリックします。

    Font_Awesome_つかい方_2

  3. 次のような画面が表示されて入力したアドレスにメールが送られてきます。

    Font_Awesome_つかい方_3

  4. 送られてきたメールのなかの「Click to Confirm Your Email Adress +Set Things Up」をクリックする。

    Font_Awesome_つかい方_4


  5. パスワードを決めて入力するといくつか質問されます。

    Font_Awesome_つかい方_5
    Font_Awesome_つかい方_6


    質問には答えなくても次へすすめるので「All set. Let's go!」をクリックします。

  6. これでアカウントに新しいキットが登録されています。
    まず作成したアカウントにサインインして右上のアイコンをクリックします。

    Font_Awesome_コード_1

    表示されたメニューから「Kits」をクリックします。

    Font_Awesome_コード_2

    作成されたキットが表示されるのでクリックするとコードが表示されます。

    Font_Awesome_コード_3

    これをコピーしてHTMLの<head> ~ </head> タグ内に貼りつけるだけです。

    Font_Awesome_コード_4


3.うまく表示できない原因はこれ!

いざ Font Awesomeを使いはじめると
うまく表示されないことが
よくあるみたいです。

ぼくも表示すると
四角のなかにUnicodeが表示されるだけで
うまく表示されませんでした。

Font_Awesome_表示されない



Font Awesomeでよく書かれている原因は

  • 別のサイトからコピペしたためにバージョンが最新ではなかったりでヘッダーにCSSを正しく読み込めていない。
  • 無料では利用できないPRO版のアイコンを使おうとしている。
  • "font-family"の指定が正しくない。無料版は最後に"FREE"、プロ版は最後に"PRO"の記述が必要です。
  • "font-weight"の指定ができていない。無料版は"400"か"900"しか指定できません。
  • "Content"に指定したアイコンのUnicodeが間違っている。
  • ブログの編集画面だと表示されないのでプレビュー画面で確認が必要。
これらを全部確認して
すべて間違ってないのに
まだうまく表示されない場合があります。

この場合は"font-family"の指定が
問題かもしれません。

「いやいや、最後にちゃんと
    "FREE" つけてるよ」

といわれるでしょうが
その "FREE" が実は原因です。

CSSの記述を

  font-family: "Font Awesome 5 Free";

ではなく

  font-family: "Font Awesome 5 Pro";

と記述してみてください。

おそらく解決します。
ぼくはこれで解決しました。

理由はよくわかりません。
バグかな?

でも、これで使えるようになるので
ためしてみてください。


紙の書類や写真を
手軽にデジタル化するのに便利な
スマホのスキャンアプリ。

たくさんあるアプリのなかから
本のデジタル化に便利なものを選びました。

本をデジタル化_スキャンアプリ_おすすめ

Contents
本をデジタル化しとけば
家のなかも片付いてスッキリするし
簡単に持ち運べるし
いいことだらけです。

でも、書類程度のスキャンなら
どんなスキャナーでも簡単なんですが
本をデジタル化しようとすると
けっこう大変です。

きれいにスキャンできるのは
プリンターのスキャン機能ですが
本の場合は綴じてある部分が
なかなかうまくスキャンできません。

薄い本ならまだ可能ですけど
厚めの本となると
黒くうつったり
文字がよれたり
簡単にはいきません。

けっきょく裁断してスキャン
という方法になるのですが
スマホのスキャンアプリを使えば
裁断せずにスキャンできます。

アプリはいろいろとありますが
本のデジタル化するには
どのアプリが使いやすいか?

実際にいくつかつかってみました。

2.アプリの特徴は?

今回ためしてみたアプリは
  1. CamScanner
  2. Adobe Scan
  3. フォトスキャン by Googleフォト
  4. Microsoft Office Lens
の4つです。

それぞれのよかったところと
イマイチなところをまとめます。

CamScanner

CamScanner_1


  • 傾きの修正などが視覚的に操作でき簡単
  • PDFで保存できる
  • 無料版でも8Mピクセルで保存できる(有料版は11Mピクセル)

  • PDF化したときに画質の劣化が気になる
  • 無料版でPDF化するとロゴが印刷される
  • 有料版の指の写りこみなどを消去する機能がイマイチ

Google Play で手に入れよう

フォトスキャン by Googleフォト

フォトスキャン_Google

  • Googleフォトと連携できる
  • 写真にうつる光の反射を除去する機能がある

  • 画像として保存されるので写真はいいが文書にはむかない

Google Play で手に入れよう

Adobe Scan

Adobe_Scan

  • .pdfファイルに保存できる
  • オートスキャン機能がある
  • アプリ内でPDFファイルの並び替えなど修正ができる
  • オートスキャン機能が思った以上に使いづらい


Google Play で手に入れよう

Microsoft Office Lens

Microsoft_Office_Lens

  • PDFファイルに保存できる
  • 文書のサイズを自動判別

  • 30ページまでの制限がある


Google Play で手に入れよう

3.おすすめのアプリ


写真だけに限って言えば
Googleフォトとの連携も含めて
フォトスキャンが
圧倒的に使いやすい。

でも、本のデジタル化として考えると
PDFファイルで保存したい。

Adobe Scanは
オートスキャン機能がいいかも、
と思って使ってみたものの
まだページ範囲が認識できてないのに
スキャンが始まってしまったり
案外使い勝手が悪かったです。

スマホを固定するような
スタンドみたいなものがあって
本のほうを手に持つようなかんじなら
使いやすいかもしれません。

残りのCamScannerとOffice Lensですが
どちらも手軽で使いやすいです。

ただ、PDFにしたときの画質が
CamScannerはイマイチなんです。

ということで
今のところはOffice Lensをつかっています。








このページのトップヘ