需要がある気がしないはてなブログのカスタマイズ（？）です。1つのブログで2つのブログテーマを使います。大画面の時はDUDE、スマホなど画面が小さい時はInnocent、みたいな事ができます。
やり方
まず、これはとりあえずネタ的なものなので、本番環境ではやらないほうが良いと思います。ちゃんとやろうとするといろいろ面倒だと思うので。テスト用ブログでやりましょう。
テーマを剥がす
まずは今使っているテーマを剥がします。デザインcssを開くと、おそらく最初に以下のような記述があります。
/* <system section="theme" selected="6653586347153366095"> */ @import "http://hatenablog.com/theme/6653586347153366095.css"; /* </system> */
これが今使っているテーマの部分です。これを削除します。
headに要素を追加
次に、はてなブログのダッシュボードから設定→詳細設定へと進み、headに要素を追加に以下のように加えます。
<link rel="stylesheet" href="http://hatenablog.com/theme/6653586347149180725.css" type="text/css" media="screen and (max-width: 767px)"> <link rel="stylesheet" href="http://hatenablog.com/theme/6653586347153366095.css" type="text/css" media="screen and (min-width: 768px)">
ちょっと解説します。
http://hatenablog.com/theme/6653586347149180725.cssの部分、最後の数字の部分が「どのテーマを使うか」を示しています。6653586347149180725というのはInnocentで、このテーマのテーマストア内のURLはhttp://blog.hatena.ne.jp/-/store/theme/6653586347149180725です。この最後の数字がここに当てはまります。
max-width: 767pxの部分、これは画面幅が最大767pxまでの時、ということです。この大きさまではInnocentを適用します。
min-width: 768pxは画面幅が最低768pxからの時、ということです。画面幅768px以上の時はDUDEのテーマが適用されます。
この画面幅はもちろん自由に設定できます。また、組み合わせて3つ以上のテーマを切り替えることもできます。そのあたりは「css メディアクエリ」で検索して勉強してください。
動作例
最初はDUDEだったテーマが、画面幅を狭めるとInnocentに変わります。ちょっとおもしろいですね。
まとめ
コレを使えば、例えばPC版で使っているテーマがレスポンシブ対応してないけどスマホ版でデフォルトテーマも嫌だ、というときにスマホ版（正確には画面幅が狭い時）は別のレスポンシブ対応したテーマを使う、何ていうことができそうです。
ただまぁ、コレを使うと、テーマ以外で使うデザインcssに記述した内容をどちらのテーマでもうまく表示されるように調整しなきゃとかあるので、たぶん面倒なことになるんじゃないかと。まぁそれもメディアクエリでなんとかすればいいのですが。
