無料版JUGEMでレスポンシブデザインを使う方法

最近のWEB情報は、PCよりスマホで閲覧する人の方が俄然多い。

ところがスマホでのJUGEM閲覧画面が、完全に『ガラケー仕様』。
正直使い勝手が本当によろしくない。
メニューは減るし、デザインがダサいし、ショボ…いやいや

そこで考えるのが『レスポンシブデザイン』！

なのだけど、『スマホ用』と『PC用』のテンプレートは完全に別！
どれだけテンプレートをレスポンシブにしようと、完全な無駄なのである。

通常は。
そう通常は。
ちゃんと設定する方法があるのである。

まずは一番単純な修正方法を紹介しておく。

『モバイル』→『フリースペース』に、下記Scriptを入力する。

<script>javascript:pcview_on();</script>

このScriptは『PC閲覧モードをON』にする。

しかし無料版JUGEMでは『フリースペース[スマートフォン]』の編集が出来ないのだ！
そこで、代わりの方法を使うのである。

フリースペース以外にも、無料版でも、スマホ用にいじれる場所がある。
そう『記事』である。
記事なら『PC』と『スマホ』で同じ内容が表示されるもんね！

全ての記事に下記の『PC閲覧Script』を入れる。

<script>javascript:pcview_on();</script>

そう、全ての記事に、Scriptを入れるのである。
正直かなり手間である。
だが、これが月300円の対価なのだ！

入れる場所は『記事の内容』の。

『一覧表示』されたときにも『PC閲覧Script』が表示されてなくてはいけない。
ということで、内容の一部が表示される『直接表示形式』にする。

『モバイル』→『基本設定』→『直接表示形式』
で変更する。

記事とは別個用意されているページも書き換えが必要。
だがそんなのは『プロフィール』くらいだった。よかった。

なので、プロフィールにも『PC閲覧Script』を入力する。

『設定』→『ユーザー設定』→『プロフィール編集』→『自己紹介』
に『PC閲覧Script』を混ぜる。

<script>javascript:pcview_on();</script>

これで『スマホ』でも『PCと同じテンプレートで表示』される設定は完了！

かといえ、レスポンシブデザイン、作るのメンドイ。

そんな人に素敵なことに『他のユーザが作ってくれたもの』があるのです！
『デザイン豊富なユーザー作成ブログテンプレート「utf」』
※『デザイン』→『PCデザイン変更』→『その他のPCブログデザイン』→『ユーザー作成』→『ユーザー作成PCデザインをもっと見る！』でも行けます！

オススメは、この『ついさんのテンプレート』。
というか、多すぎて他は見つけられなかった…。
この人のは全てレスポンシブなので、とてもありがたく使わせて頂いた。

ただ、このサイト自体はなくなってしまった様子で、
ダウンロードは使えなくなっているので、『テンプレートダウンロード』は使えない。
内容をコピーして使う。

JUGEM管理画面『デザイン』→『PCデザイン変更』→『適応しているブログデザインを複製』で、名前をつけてテンプレートを作成。
その作ったテンプレートの内容を、「utf」でテンプレート名をクリック→『このテンプレートを使う』で表示された内容に、まるっと書き換える。

これでレスポンシブデザイン対応のJUGEMブログの完成！