ReRICK

忘れるな、いつか必ずそれは来る

はてなブログで画面サイズごとに複数のテーマを使い分ける方法

f:id:c-miya:20170505114935p:plain 需要がある気がしないはてなブログのカスタマイズ(?)です。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 メディアクエリ」で検索して勉強してください。

動作例

f:id:c-miya:20170505134620g:plain 最初はDUDEだったテーマが、画面幅を狭めるとInnocentに変わります。ちょっとおもしろいですね。

まとめ

コレを使えば、例えばPC版で使っているテーマがレスポンシブ対応してないけどスマホ版でデフォルトテーマも嫌だ、というときにスマホ版(正確には画面幅が狭い時)は別のレスポンシブ対応したテーマを使う、何ていうことができそうです。

ただまぁ、コレを使うと、テーマ以外で使うデザインcssに記述した内容をどちらのテーマでもうまく表示されるように調整しなきゃとかあるので、たぶん面倒なことになるんじゃないかと。まぁそれもメディアクエリでなんとかすればいいのですが。