ワイヤード・パンチ

Tumblrのテーマopticaでタイトル表示が遅いときの対処法。

Tumblrでブログを新規作成したときに必ず設定されているであろうテーマ「Optica」。しかしこのテーマを使ったブログを開くと、ページトップのブログタイトルおよび記事タイトルが、数秒間真っ白のまま何も映らないときがあります。画像よりも表示が遅いとは何事か。何とかならないでしょうか。

広告

原因は使用しているフォント。

Opticaテーマを使用している状態でTumblrのテーマ編集画面を開くと、その中に「タイトルのフォント」という項目があります。ちなみに標準だと「Gibson」というフォントが設定されているはず。「タイトルのフォント」から選べるフォントですが、「Gibson」を含めてWindowsに搭載されていないフォントが多数見受けられます。つまりタイトルで使われているフォントはWEBフォントであり、外部からフォントを読み込んできていると思われます。

cssにWEBフォントの記述があるのか、あるいはjavascriptなのか、WEBフォント読み込みの処理がどこに書かれているのかは不明でしたが、そのWEBフォント読み込みに時間がかかってしまうために、タイトルに何も映らない時間が発生してしまっているのでしょう。

そもそも「タイトルのフォント」の中にあるフォントを使ったところで、英字専用フォントばかりです。当サイトのように日本語タイトルでしたら全くの無意味で、ブラウザで標準設定されているフォントが代わりに出てしまいます。Windowsだったらメイリオでしょうか。

WEBフォントを使わない。

読み込みに時間のかかるWEBフォントの使用をやめれば、タイトルが表示されるまでの時間が短くなるはずですが、「タイトルのフォント」を無効化するための設定がありません。でも、たとえテーマの設定項目が消せなくても、CSSを上書きしてしまえば、テーマの設定よりも優先されます。

方法としては、テーマの編集画面の最下部にある詳細設定をまず開きます。「カスタムCSSを追加」という入力欄があるので、ここにタイトルあてのCSSを記述すれば、こちらが優先されることになります。以下、書き方の例です。ちなみに、メイリオになります。

h1.blog-title, .post-content h2.title {
    font-family: Meiryo, sans-serif;
}

わざわざよそからフォントを読み込んでくるより、OSに入っているフォントを読んでくる方が速いことは明らかです。ただ、WEBフォントが完全に悪いなんてことはなく、どうしても使いたいフォントがあるけど全部のPCに入っているわけないフォントでしたが、WEBフォントを使うべきでしょう。もちろん、読み込みが遅くないサーバから読んでくるように。

余談。

同じくテーマ編集つながりな話として、当サイトの記事の作成日時を記事タイトルのすぐ下に出るようにしました。というか、もともとこうしていたはずなのに、いつぞやのテーマ修正の際に元に戻してしまったようです。長らく気づかないままほったらかしでした。なので直しました。

せっかく記事を見つけても、実際に読んでみたら古い記事であり、今じゃ通用しない内容なので時間の無駄だった、ということはよくあるので、やはり記事の作成日時は初めの方に置いた方が良いでしょう。