人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなブログでウェブフォントを適用する方法を教えて下さい
FC2からの引っ越しを考えてテストしている段階なのですが、はてなブログのデザインについての質問です。
テーマで使われているフォントを、ウェブフォントに変更しようと頑張っているのですが、反映されず困っています。
下記の記述をデザインCSS部分に追加しています。

@font-face {
font-family: "myFont";
src: url("FC2のアドレス.eot?") format('eot'),
url("FC2のアドレス.woff") format('woff');
}
p {
font-family: 'myFont', sans-serif;
}

FC2で使っている(FC2にアップロードしている)ファイルを流用しているのがマズいのでしょうか、外部スクリプトも読み込んでくれません。
スクリプト自体は記事に埋め込む形にすれば反映されたのですが…

先輩方、ご教授下さい。

●質問者: EMLN
●カテゴリ:はてなの使い方 ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

FC2で使っている(FC2にアップロードしている)ファイルを流用しているのがマズいのでしょうか、外部スクリプトも読み込んでくれません。

そうです。
FC2 でアップロードしたファイルは、他のサイトから使われるとエラーになります。
Web のリクエストは、「リファラー」といって、どのページから読みに来たか、というのが送られるんですが、FC2 のサイトでは、それをチェックしてるみたいです。

Webフォントや、スクリプトだけじゃなく、画像もそう。



って、書こうと思ったら、自分とこの(↓)は表示される。
http://blog-imgs-44.fc2.com/j/i/m/jimsie/20100729-turtle.jpg
あれっ?

適当に探してきた誰かのブログの(↓)だと、やっぱり表示されない...
http://blog-imgs-60-origin.fc2.com/m/e/r/meruloco/013_201310252306376de.jpg

画像の URL をよく見てみると...

表示される http://blog-imgs-44.fc2.com/...
表示されない http://blog-imgs-60-origin.fc2.com/...


試しに、誰かさんのやつの -origin を削ってみると...
http://blog-imgs-60.fc2.com/m/e/r/meruloco/013_201310252306376de.jpg
# http://blog-imgs-60.fc2.com/m/e/r/meruloco/013_201310252306376de.jpg で表示してます

おおっ



もし、流用しようとしている Webフォントの URL に -origin が入ってたら、試しに削ってみてください。
もしかしたら、上手くいくかも。

でも、保証されている方法じゃないと思うので、外部からきちんとアクセスできるところに置いておくのが一番だとは思います。


EMLNさんのコメント
リファラの問題でしたか、勉強になります。 お陰様で保管場所を変えたらフォントは適用出来ました。外部スクリプトに関しては、コードの記述方法に癖があるのかまだ上手く出来ませんが、最近jquery関連で何か変更されているみたいなのでそれかも知れません。 ご回答ありがとうございました。

a-kuma3さんのコメント
>> 最近jquery関連で何か変更されているみたいなのでそれかも知れません。 << ああ、これ。 [http://staff.hatenablog.com/entry/2013/10/24/155959:title] jQuery の実装を定義している、はてなの外部スクリプトの読み込み位置が、随分下の方に行っちゃったので、記事の中で jQuery を使うスクリプトがエラーになっちゃいます(ぼくも、嵌った)。 記事の頭か、デザインでヘッダの中に jQuery の読み込むようにしておくのが簡単です。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ