はてなブログに外部CSSファイルをリンクする方法を備忘録として書いておきます。
ドロップボックスに外部CSSファイルを置いて共有化する
外部CSSファイルをドロップボックスに置いて共有化します。
別にドロップボックスでなくても構いません。ただし常時SSLで混在コンテンツをなくそうと思ったらhttpsプロトコルで配信してくれるサービスが必要です。httpプロトコル配信の場合は混在コンテンツになってしまいます。
ドロップボックスに外部CSSファイルを置いて共有化する方法は以下の記事をご参照ください。簡単です。
head内にリンクタグを設定
外部CSSへのリンクタグをheadの中に書き込みます。
外部リソースタグが次のようだったとします。
<link type="text/css" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/6jkdhgf05nid2aj/test.css">「設定」から「詳細設定」タブをクリックし「検索エンジン最適化」から「headに要素を追加」という窓を見てください。
この窓に先ほどのリンクタグを書き込んで「変更する」ボタンを押します。これで外部CSSファイルが読み込まれるようになります。
外部からCSSファイルを配信するメリット
外部CSSを当てるメリットはいくつかあります。何故わざわざ外部CSSを当てるのか理由も書いておきます。
テーマCSSとの干渉を避けることが可能
外部CSSファイルは、はてなブログのテーマよりも後から効くことになります。CSSファイルの読み込みの順番が外部ファイルの方が後だからです。
なので同じCSSプロパティなら外部CSSファイルの記述の方が優先され上書きされていきます。テーマのCSSと干渉したりすることがなくなりトラブルが少なくなります。
はるなぴは今Innocentという人気テーマを使用しています。しかしデザイン窓にカスタムCSSを書いてみたところ、テーマ内に書かれているCSSと競合してしまい、うまく表示できなかった経験をしました。
これをなんとか避けることができないか？ここが外部にCSSファイルを置こうと思った出発点です。
小さくて見にくい「デザインCSS」の窓ではなく使い慣れたテキストエディタが使用可能
デザインCSSの窓はとても小さく、新たにCSSを張り付ける際に苦労します。文字も小さく本当にすべてコピペできたのか不安になることもあります。
外部CSSファイルを使えば、普段使いのテキストエディタで見やすく、編集し上書きするのも簡単です。
ファイルを更新するだけですぐにCSSが適用される
更に、ドロップボックス共有を使えば、CSSファイル更新とほぼ同時にサイトの表示が変わります。
いちいち「設定を変更」ボタンを押したりする必要はありません。スピーディな開発が可能になります。
外部CSSファイルの読み込み速度もOK
PageSpeedInsightsを使って測定しましたが結果はまったく変わりませんでした。パフォーマンスに影響なしです。
外部CSSファイルを読み込むことによる遅延はほとんどありません。これで安心してドロップボックスに置いた外部CSSファイルを使うことができますね！
