font

fontawesome5の使い方

  • 2018-02-18  最終更新日:2018-02-20

アイコンフォントで最も有名なfontawesomeですが5になってますます使い勝手が向上しました。推奨はJSを使ったSVGと表示となっております。Webで最も人気のあるアイコンセットをFontAwesomeを使って、ベクターアイコンとソーシャルロゴを表示させてみましょう。

fontawesome5はFree版とPro版があります。Pro版は有償となっておりますが違いとして929のフリーアイコンが使えますがProは1,387個のアイコンが使えます。そして各アイコンのクラスにはRegular,Solid,Light,Brandsという項目に分かれています。

Regular,Solid,Lightは同じアイコンでも太さや形が違っていたりしますがFree版は主にSolidでRegular,LightがPro版というくくりになっています。Brandsはその名の通りブランドやロゴなどがその項目になっております。公式サイトは以下になります。

もっと見る

自作アイコンをSVGでの表示方法

  • 2018-02-13  最終更新日:2018-02-13

そもそもSVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)で、拡大縮小、変形してもキレイなままでぼやけず荒れないXMLベースの画像のことです。Web上でSVGを使って表現することが出来ます。イラストレータのデータも同じベクターデータです。

最近はアイコンフォントよりもSVG化が主流になりつつあります。アイコンフォントは、元々はテキスト表示を改造してアイコンを表現していた物でしたが最近は直接アイコンを描画するSVG化に流れが向いています。

有名なアイコンフォントFont Awesomeもバージョンが5になってJSを使って描画していますがSVG推奨となっています。もちろん以前のアイコンフォントとしても使えます。

さて今回はオリジナルのアイコンを作ってSVGで表示させてみたいと思います。HTML版とWordPress版の2つのバージョンでお届け致します。

もっと見る

日本語のwebフォントを作成する方法

  • 2017-11-18  最終更新日:2017-11-18

Webフォントを使うといえばGoogle Fontsを使って利用している人が多いかもしれません。 そのほか、アドビ社のTypekitやWebフォント TypeSquare タイプスクウェアなど結構Webフォントも多く使えるようになってきました。

ただ指定フォントを使って表示させたいという要望もあります。その場合にWebフォントを表示させる方法をご紹介します。

ただし、いまあるお手持ちのフォントをwebフォントとして使用出来るわけではありませんのでご指定のフォントのライセンスをご確認下さい。今回の作業はMacでの流れをご紹介します。Windowsでも流れは同じですのでわかると思います。

もっと見る

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
だから私はXperia

その前のスマホはgoogleのNexus5Xを使っておりました。これはこれで満足しておりましたが、あるつてでXperiaが安く購入できたので変更しました。iPhone3G、iPhone4S、iP...

14 Apr 2018

アイキャッチ
ラジコを録音して聞く方法-どがらじ

ウォーキング中などでラジオを聴くようにしているのですが、以前はFMラジオ機能付きのボイスレコーダーで録音して聴いていたのです。 しかも今のタイプは予約録音が出来るようですね、、、ちょっと昔のタ...

07 Apr 2018

アイキャッチ
ワードプレスの固定ページの階層で一番下の階層には同階層を表示する方法

主にサイドメニューで固定ページを表示させようと考えておりました。それで子階層があれば子階層を表示させて一番下の階層になれば同一階層を表示する方法をご紹介致します。 サイドメニューに表示する際に...

18 Mar 2018

アイキャッチ
ワードプレスのカスタムメニューをスライドトグル

今回はワードプレスのカスタムメニューをトグルダウンで表示させる方法をご紹介します。 クリックしてサブメニューが表示させる方法になります。スマホメニューなどにはよく使われているかと思います。 ...

17 Mar 2018

アイキャッチ
ワードプレス静的サイト生成プラグイン

ワードプレスでローカル環境で見てもらう必要があり、静的ファイルの出力を希望されていたのでそれが出来るプラグインを探しました。静的サイトの生成プラグインは主に3つだけですね。 Simply...

04 Mar 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

フッターイメージ