FC2ブログを使用しております。
CSSの@font-face値を使って、フリーのWebフォントを使用したいです。
その際、Webフォントをどこかにアップロードして、それを参照する必要があると知りました。
しかし、FC2ブログにttfなどのファイルをアップロードしようとすると、拡張子制限がかかってしまいます。
よって他のアップローダなどを使用しなければならない、と考えました。
そこで質問です。
1.Webフォントをアップロード出来そうな場所を教えてください。
2.Webフォントが利用できる他の方法をご存知でしたら、ぜひご教授ください。
ちなみに、「Google Web Fonts」は利用したことがあります。
些細なことでも構いません。
ご意見お待ちしております。
No.1ベストアンサー
- 回答日時:
はじめまして。
私どもの環境で試行錯誤した結果、成功致しましたので方法を御紹介致します。まず、FC2ブログを御利用との事ですので、FC2IDをお持ちでございますね?
そのIDでFC2ホームページを開設してください。ここにフォントファイルをアップロードします。
※ファイル置き場としての利用は規約上、あまりよろしくないようなのでブログ記事のまとめなどとして利用することを推奨致します。
開設までは特に苦労することはないと思います。開設が成功しましたら、ホームページの管理画面を開いてください。
FC2IDのコントロールパネルから開けます。
開きましたら、画面左の「ファイルのアップロード」項目をクリックして下さい。
すると、アップロード用の画面が開きます。
ページ中ほどに、ファイルのアップロードという項目がありますので、「ファイルを選択」ボタンを押し、ファイルのアップロードを行います。
Webフォントの利用ですので、TTF形式の他にEOT・WOFF形式のファイルも用意する必要が御座います。
※TTFからの変換方法を御存じなければ、紹介致しますので御一報下さい。
それらのファイルをひとつずつ選択していき、アップロードを行ってください。
アップロードが無事成功致しますと、ページ上部に先程アップロードしたファイルが追加されている筈です。
アップロードしたフォントファイルの行の虫眼鏡マークを右クリックし、URLをコピーして新規のテキストファイルなどに貼り付けして保存してください。
URLは【http://あなたのユーザーアカウント.fc2.com/フォントファイル名】となります。
これでフォントファイルのアップロードが成功致しました。次にブログの設定を行います。
再度FC2IDのコントロールパネルに戻り、今度はブログの管理画面をお開きください。
管理画面が開きましたら、画面左のメニューから、「テンプレートの設定」項目を開いてください。
すると、現在ブログに登録されているテンプレートの一覧が表示されます。
その中から現在使われているテンプレートを選択し(旗マークが付いております)、【HTML CSS】の編集を押してください。
編集画面が開きましたら、画面をスクロールさせ、「default のスタイルシート編集」項目に移動してください。
尚、編集手順を誤るとブログの表示が正常に行われなくなる可能性がございますので、
編集前にスタイルシートをメモ帳などにコピー&ペーストし、保存しておくことを推奨いたします。
それでは、Webフォントの導入に移ります。
以下のコードをコピーして、自分の環境に合わせて編集なさって下さい。
@font-face {
font-family: "フォントの名称";
src: url("先程アップロードしたフォントファイル.eot?") format('eot'),
url("先程アップロードしたフォントファイル") format('woff');
}
.webfonts-text {
font-family: "@font-faceのfont-familyで設定したフォントの名称";
font-size:15px;
}
【@font-face】の説明をいたします。
「フォントの名称」は自分の好きな名前を設定できます。なるべく半角英数で設定した方が良いでしょう。
「先程アップロードしたフォントファイル」は、先程控えたURLを貼り付ければOKです。
【.webfonts-text】ですが、これはcssの呼び出し名称ですのでお好きな名前が付けられます。こちらも半角英数で設定してください。
「font-family」には、【@font-face】で設定したフォントの名称を記述して下さい。
編集が完了しましたら、「@font-face から 下の }」までコピーし、先程の編集画面に貼り付け、更新を押してください。
cssの設定はこれにて完了となります。
最後は記事の編集ですが、別段難しいことはしませんのでご安心を。
画面左のメニューから「過去の記事の管理」を開き、Webフォントを適用したい記事を開いてください。
いつもの見慣れた編集画面が開きますね。
今回は例として、「あいうえお」という文字にWebフォントを適用します。
<span class="webfonts-text">あいうえお</span>
上のコードを入力し、記事を保存を押せば適用完了です。
汎用ブラウザ(IEやChromeなど)なら、Webフォントが正常に表示されるはずです。
Firefoxですと、クロスドメインの制約の都合上、.htaccessの設定を行う必要がございます。
ご希望であれば、こちらの方も説明させて頂きますので、御一報下さい。
ご回答ありがとうございます。
迷うことなく新しいフォントを適用することが出来ました。
分かりやすい説明に心より感謝いたします。
これを機に、後学とためにいくつかお尋ねしたい部分がございます。
目標は達成されましたので、お暇でしたら回答くださると幸いです。
1.「.htaccess」について
当方の環境はGoogle Chromeです。
よって、フォントの反映が確認されましたが、
ご指摘いただきました通り、Firefoxではフォントは反映されていませんでした。
.htaccessという単語は初見です。
Googleで調べてみましたが、全くわかりませんでした。
申し訳ございませんが、この対処法をご教授願います。
よろしくお願いします。
No.2
- 回答日時:
回答が遅くなり、申し訳御座いません。
無事Webフォントが導入できたようで何よりです。さて、Firefoxでの表示に関してですが、セキュリティ意識の高いFirefoxでは現在ドメインによって
ファイルを読み込むか読み込まないかを決定する機能が搭載されています。
不正なスクリプトを実行させない為の機能で、おそらく今後他のブラウザにも同じような機能が搭載されると思われます。
こういった場合、どうすれば別ドメインからファイルを呼び出すかというと、ファイルにアクセスしても大丈夫だよ、という記述を
ファイルが置いてあるサーバーに施してあげる必要があるのです。
幸い、FC2サーバーは.htaccessに対応していますので以下に対処方法を記載します。
=======================
(1)次のテキストをコピーして新規テキストドキュメントに貼り付ける
header add Access-Control-Allow-Origin "サイトのURL"
(2)サイトのURL部分を、Webフォントを適用したいフォントのドメインに置き換える。
例) http://webfonts.jpにてWebフォントを使用したい場合
header add Access-Control-Allow-Origin "http://webfonts.jp"
(3)置き換えたら、ファイル名をhtaccess.txtとして保存する
(4)FC2のホームページ管理画面に行き、画面左の「ファイルのアップロード」をクリックし、アップロード画面へ。
(5)先程保存したhtaccess.txtをアップロードする
(6)アップロードが完了したら、htaccess.txtの名前の変更を行い、「htaccess.txt」から「.htaccess」へファイル名を変更する
=======================
これにて.htaccessの設定は完了です。Firefoxで表示が正常に行われるか確認してみて下さい。
まだ正常に表示することが出来ないようなら、御一報下さい。
※本日、http://webfonts.jp/をオープン致しました。まだコンテンツの全てを公開できておりませんが、
興味がありましたら是非御覧下さい。御待ちしております。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
マイクロ(μ)の文字を半角で出...
-
outlook 文字を揃えたい。tab...
-
教えてください。
-
似ているフォント(Win⇔Mac)
-
「MS Pゴシック」と同じ幅の...
-
英語版OSでの遊明朝、游ゴシック
-
font-family の記載方法
-
C# Font GdiCharSet
-
Excel:一部のフォントでセルの...
-
フォントの著作権(または規約...
-
MsgBoxについて
-
このフォントはなんというフォ...
-
CommonDialogでの、キャンセル...
-
Eclipseで文字がずれます。
-
メールで、榊の文字を木辺に神...
-
フォントダイアログを開くいた...
-
Wordで、指定したフォント...
-
PreRenderイベントの実装方法に...
-
逆向き/(スラッシュ)の入力方法
-
Webフォントのアップロード場所...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
MsgBoxについて
-
似ているフォント(Win⇔Mac)
-
「MS Pゴシック」と同じ幅の...
-
英語版OSでの遊明朝、游ゴシック
-
C# Font GdiCharSet
-
font-family の記載方法
-
メールで、榊の文字を木辺に神...
-
ワードでゴシックの文字を太く...
-
Excel:一部のフォントでセルの...
-
CommonDialogでの、キャンセル...
-
逆向き/(スラッシュ)の入力方法
-
エクセルの代替フォントを指定...
-
Visual C++ 6.0 行番号の表示
-
CSS SafariでMS P ゴシックを表...
-
ホームページをTeraPadで日本語...
-
printf("文字列\\n")が円マーク...
-
このフォントはなんというフォ...
おすすめ情報