立て直せ、人生。

人生行き当たりばったりなアラサーが、無事にアラフィフになれるように頑張らないブログ

はてなブログのスタイルシートをDropboxに置いて編集をしやすくする(外部スタイルシート化)

スポンサーリンク

f:id:cho-zu:20161009135035p:plain:w400

はてなブログでスタイルシートを編集する画面、凄く小さくてしんどい。

これを解決するために、外部CSS化を行う。

  • スタイルシートを外部ファイル化
  • Dropboxでカジュアルに編集。版管理も勝手にされる

本エントリでは、気をつけなければならない点がある。 モバイル版は文法違反になってしまっている点だ。

これは現状のはてなブログでスマホ向けカスタマイズを行うためには、避けては通れない点(詳細は後述)。 文法的に問題あるけど、ブラウザが良きに計らって動いてくれているのが実情。 参考にされる人は、この点を理解した上で利用して欲しい。

Dropboxの直接リンクを取得

作業の流れは次の通り。

  1. cssをDropboxに置く
  2. Dropboxに置いたファイルの共有リンクを取得
  3. 上記で取得したリンクを直リンクに変換

共有リンクと直接リンクの違い

ここで面倒なのが、2.の共有リンクから直リンクへの変換。

Dropboxの共有リンクを取得すると、ファイルへの直接リンクではなく、DropboxのWeb画面にてファイルが表示されるものとなっている。

f:id:cho-zu:20161009151459p:plain:w300

レッツ変換

ルールは至って簡単。次の手順で共有リンクを書き換えてやるだけで良い。

  • www.dropbox.comdl.dropboxusercontent.com に置き換え
  • 末尾の dl=0 を削除

具体例を挙げると次のようになる。

  • 書き換え前: https://www.dropbox.com/s/qouzsqd2vfnd4nj/my.css?dl=0
  • 書き換え後: https://dl.dropboxusercontent.com/s/qouzsqd2vfnd4nj/my.css

直接リンク生成してくれるやつ

面倒なので、「直接リンク生成してくれるやつ」を作りました。上の書いてある通り置換をやっているだけ。

javascriptとか初めて書いたので、何かおかしかったらこそっと教えてください。



PC版

次の箇所に、上記で取得したスタイルシートへの直接リンクを書き込む。

「ダッシュボード」 > 「カスタマイズ(スパナマーク)」 > 「 デザインCSS

既存の外部スタイルシートを読み込んでいる部分があるはずなので、その下に自前の外部スタイルシートを読み込むように外部スタイルシートへの直接リンクを記述する。 外部スタイルシートの指定は、

@import "スタイルシートへの直接リンク"

として指定できる。

具体例を挙げると次のようになる。

/* <system section="theme" selected="6653586347153366095"> */
@import "http://hatenablog.com/theme/6653586347153366095.css";
/* </system> */
@import "https://dl.dropboxusercontent.com/s/qouzsqd2vfnd4nj/my.css";

f:id:cho-zu:20161009152300p:plain

これで、Dropboxに置いた外部スタイルシートを編集すると、ブログのスタイルも変更されるようになる。

モバイル版(はてなブログProが必要)

モバイル版は、HTMLの <head> タグ内が編集できない。

仕方がないので、<body>タグ内の編集を行い、スタイルを適用させる*1。 これには、 はてなブログのプロの契約が必要。プロにすると、「ヘッダ」の「タイトル下」などが編集できるようになる。

外部スタイルシートへのパスは、次のように書けば良い。

<style type="text/css">
@import url("スタイルシートへの直接リンク"); 
</style>

具体例を挙げると次のようになる。

<style type="text/css">
@import url("https://dl.dropboxusercontent.com/s/nix9urq357umk93/mobile.css"); 
</style>

f:id:cho-zu:20161009153622p:plain

補足:文法的な部分について

外部スタイルシートを指定して記述するには、 <link> タグか、または <style> タグを利用する。

これらの指定は本来 <head> タグ内に書く必要がある。しかし、 はてなブログではプロであっても、モバイル版のヘッダ部分は編集できない。 PC版は「デザインCSS」という項目があり、編集ができるというのに。

本当はこういう「汚い」実装はしたくなかった。 けれど、はてなブログでモバイル向けにカスタマイズするためには、避けては通れない道だ。 ヘッダが編集できない以上、外部スタイルシートであろうとなかろうと、文法違反をせざるを得ない。

もう少しカスタマイズがしやすいよう、改良が進むことを願っている。

さいごに

Dropboxの直接リンクを取得するフォーム作り終えてから気づいたんだけど、これDropboxじゃなくてGithubとかでよかったんじゃん?

*1:これが本当は文法違反になる。ほとんどのブラウザでは動いてしまうけど