当ページのリンクには広告が含まれています。先日、フロップデザインさんからまた魅力的なフォントが公開されました。かかわらず、無償で使用することができます。このフォント、トップの画像でも使っていますが、かなり荒々しいです。いうことで、本文よりは見出し向けとなっています。これはアレですね、ウェブフォントにしてブログのタイトルに使ってみましょう。タイトルに使うまでの手順フォントをダウンロードするサブセットフォントメーカーで必要な文字だけを抽出WOFFコンバータでウェブフォントに変換Dropboxにアップロードcssを設定もうひと工夫INDEXタイトルに使うまでの手順このフォントをブログタイトルに使う一番素直な方法は、これを自分のパソコンにインストールして、それを使ってタイトル画像を作ることです。今回はそれをせずに、ウェブフォントとして利用してcssでブログタイトルのフォントを変更します。完成形はこうなります。フォントをダウンロードするまずはフォントをダウンロードしましょう。こちらのページ内の「源界明朝をダウンロードする」からダウンロードしてください。圧縮されているので解凍ソフトでファイルを展開します。解凍した中には3つのファイルがあります。必要なのは「genkai-mincho.ttf」です。PCにインストールする必要はありません。サブセットフォントメーカーで必要な文字だけを抽出ダウンロードした限界明朝フォントですが、通常の状態だと22MB近くあります。これをウェブフォントとして使うと読み込む量が半端ないのでかなり重くなってしまいます。ウェブでそれはもう酷すぎるので、なんとか小さくします。そもそも、タイトルだけに使うのであれば、必要な文字数は限られます。その必要な文字だけのフォントにすれば軽くなるはずです。いうことで、「必要な文字以外のフォントを削除してサイズを小さくするツール」を使います。それが武蔵システムの「サブセットフォントメーカー」です。WindowsとMacどちらも無料で利用可です。サブセットフォントメーカーこちらからダウンロードし、インストールしましょう。次の項で使用する「WOFFコンバータ」も一緒にダウンロード&インストールしておくと良いです。使い方は特に難しいことはありません。■作成元フォントファイル:先ほどダンロード・解凍した「genkai-mincho.ttf」を選びます。■作成後フォントファイル:フォントを生成する場所とファイル名を入力します。■フォントに格納する文字:実際に使いたい文字を入力します。今回はブログタイトルに使いたいので、自分のブログタイトルをそのまま入力すればOKです。文字がかぶる必要はないので「ののさんののんびりブログ」であれば「のさんびりブログ」でOKです。■書体名を変更する:cssで指定するときも必要になります。適当に英数字で指定しておくと楽です。■作成終了後、WOFFコンバータを起動する:次の工程で起動するのでチェックを入れておきましょう。これで「作成開始」をクリックすれば、指定した場所にフォントファイルが作られます。今回のフォントファイルは拡張子が.ttfですが、ウェブフォントとして使えるフォントファイルの形式はほかにもいくつかあります。.ttfファイル以外に、もっと軽量のものがあったほうがベターですので、WOFFコンバータでそれを作成します。WOFFコンバータをインストールし、先ほどのサブセットフォントメーカーで「作成終了後、WOFFコンバータを起動する」にチェックを入れてあれば、フォント作成後に自動で起動してくれます。今回はもっと項目が少ないです。「変換前ファイル」に先ほどサブセットフォントメーカーで作成したフォントファイルを指定し、「EOTファイルを作成する」にチェックを入れればOKです。「変換開始」をクリックしてウェブフォントファイルを作成しましょう。これで「subset1.ttf」「subset1.woff」「subset1.woff2」「subset1.eot」の4つのファイルができたと思います。それぞれ最初の22MBからはだいぶ小さくなったと思います。収録する文字数によってファイルサイズは変わりますが、100KBを超えないくらいにはしたいですね。Dropboxにアップロードこのフォントを利用するには、どこかにアップロードし、それを呼び出せる状態にしなければなりません。自分でレンタルサーバーの契約をしているなどならそれを利用すればいいですが、そうでない場合はDropboxが便利です。Dropboxを利用するので、例えば「Dropboxへのアクセスが禁止されている環境」からアクセスした場合は当然今回のフォントも適用されない状態で表示されます。あなたのブログが「業務上の情報を調査することによく使われている」などであれば、そういったDropboxにアクセスできない会社もあるので使わない方が良いかもしれません。普通のブログなら「Dropboxが禁止されているような会社のネットワークからうちのブログにアクセスしてんぢゃねえよ!」だと思いますが。Dropboxにアップロードしたら、そのファイルの「共有リンク」を取得できることを確認しておきます。このあたりのやり方は以下のページを参考に。cssを設定Dropboxに保存したら、デザインcssにcssコードを追加します。1;}フォントファイルのURLのところは「https://dl.dropboxusercontent.com/s/2ji5repav67v3jn/subset1.eot」などになります。共有リンクで取得できるhttps://www.dropbox.com/s/2ji5repav67v3jn/subset1.eot?dl=0を変換しています。詳しくは上述の記事へ。これを4ファイル分やって上記のようなコードになります。これで作成したフォントがブログタイトルに適用されます。!おぉ、雰囲気あってカッコイイですね!もうひと工夫おまけで、もうちょっとだけ工夫してみます。世の中には面白いフォントがあるもので、ペイントをぶちまけたような図柄のフォントもあります。dafont.comこれをダウンロードして同じようにウェブフォントとして使います。cssは以下のように。rgba(179,10,10,0.95);}これで(その他多少の調整をして)冒頭のようなタイトルの完成です。ネット上ではc-miya、orefolderなどの名前で活動しています。ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。2017-2024閉じるINDEX閉じる。