なか日記

一度きりの人生、楽しく生きよう。

トップ > 雑記 > はてなブログのデザインCSSをDropboxに置いたら思わぬ落とし穴にハマった件（解決）

はてなブログのデザインCSSをDropboxに置いたら思わぬ落とし穴にハマった件（解決）

雑記

先日、「はてなブログのCSS編集が使いづらい人はDropboxを使いましょう - なか日記」という記事を公開しましたが、元ネタの記事を書かれてる[twitter:@h_a_l_f]さんから次のような指摘をいただきました。

なるほど

スマホサイトの方は当面レスポンシブを有効にしないからいいやって見てませんでした。

f:id:nakaji999:20160107045551p:plain

試しに有効にしてみると、確かに表示がおかしい・・・

デザインCSSを変更

次のようにテーマ本体のimportは残して、Dropboxに置くCSSは自分が追加した物だけに編集してみました。

/* <system section="theme" selected="6653586347149180725"> */
@import url("http://hatenablog.com/theme/6653586347149180725.css");
/* </system> */

@import url("https://dl.dropboxusercontent.com/u/2771162/HatenaBlog/nakaji.hatenablog.com.css");

プレビューはばっちり！だけど・・・

プレビューで確認すると、テーマのCSSも、自分がカスタマイズしたCSSをちゃんと適用されています。

f:id:nakaji999:20160107050542p:plain

しかし、実際のブログを確認すると・・・自分がカスタマイズしたCSSが適用されていません。

f:id:nakaji999:20160107050742p:plain

なんで？

ソースを確認してみると、デザインCSSに書かれた内容はそのままHTMLに出力されるのではなく、下の様にリンクされるっぽいです。

<link rel="stylesheet" type="text/css" href="http://blog.hatena.ne.jp/-/blog_style/12704346814673864576/cc4b84cf5f5542866742d04277eaebb75d4f17ff"/>    <script>    </script>

そのリンク先を見てみると・・・

/* <system section="theme" selected="6653586347149180725"> */
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

/*

   Theme: Innocent
   Author: waitingmoon
   Desciprtion: カスタマイズのためのテーマ
   Responsive: yes

*/

～～～　中略　～～～

.google-afc-image .open-pro-modal,
.google-afc-text .open-pro-modal {
    font-size: 13px;
    padding-top: 16px;
}
/* </system> */

@import url("https://dl.dropboxusercontent.com/u/2771162/HatenaBlog/nakaji.hatenablog.com.css");

テーマのCSSが展開されており、その後にカスタマイズしたCSSのimportが・・・

importはCSSの先頭に書く必要があるので、無視されちゃってる訳ですね。

対処方法

さて、どうしたものか。というわけで、自分なりに考えてみました。

案1：今のままにしておく

レスポンシブのチェックは付けないので、スマホで見る人は従来のスマホデザインで見れます。

しかし、スマホで「PC版」を見ようとすると、レスポンシブな表示になり、表示がおかしくなってしまいます。

スマホで「PC版」を見ようとする人がどれくらいいるかを考えたら、それほど問題はないように思います。

案2：importじゃなくて、linkでCSSを読み込ませる

デザインCSSでimportができないなら、linkしれあげればいいじゃないかということです。

<link rel='stylesheet' href='https://dl.dropboxusercontent.com/u/2771162/HatenaBlog/nakaji.hatenablog.com.css' type='text/css' media='all' />

しかし、head内に要素を挿入する術がありません。

ヘッダのタイトル下にHTMLが記述できますので、そこに追加したところ、Chromeでは表示できましたが気持ち悪いです。

案3：Dropboxに置くのをやめて、デザインCSSに戻す

ある程度落ち着いたら、頻繁にCSSをいじることもないと思うので（身もふたもない

まとめ

まとまるかいな・・・

他にいい案や、「おっさん勘違いしてるで」等のツッコミがあればお願いします。

おしまい。

headに要素を追加できたので解決した（2016/01/07追記）

この記事を見て頂いた[twitter:@h_a_l_f]さんから連絡を頂きました。

なになに？と元記事「はてなブログの CSS 編集を Dropbox で高速化しよう - MoonNote」を確認したところ・・・

headに要素を追加できたんか！！

「設定」→「詳細設定」→「検索エンジン最適化」内にある「headに要素を追加」という項目があったんですね。

というわけで、以下のように設定してすっきりしました。

  • デザインCSSには元々あったテーマ固有のimportのみを記載
  • 「headに要素を追加」にDropboxに入れたCSSのURLを記載

これでほんとうに、おしまい！