HOME > Web屋の呟き
<< 看板 | TOP | リニューアルサイト完成 >>
JUGEM無料版でレスポンシブにする方法

「JUGEM」は、ロリポップやムームードメインと同じGMOペパボ株式会社が提供しているブログシステムです。

使い勝手やサービスなどは他のブログとさほど変わらないのですが、閲覧するデバイスとしてスマホが主流となっているこのご時世に、スマホ用のテンプレートがあまり充実しておらず、しかも、「自分でカスタマイズするか、レスポンシブ化してパソコン用とデザインのテイストをそろえたい」などと考えているプロ、またはハイエンドユーザーにとっては、有料版にしない限りなんにも触らせてもらえないというブログシステムとなっています。(ペパボさん、すみません)

 

実は、私も自社サイトをレスポンシブデザインにしたついでに、ブログもレスポンシブにしようとしました。・・・いや、レスポンシブにしたのです。

ところが、スマホからアクセスすると強制的にスマホ版のテンプレートのほうに行ってしまい、レスポンシブの設定は全く無駄な作業となっていました。(一生懸命HTMLやCSSを書いたのに)

 

そこで、私は「JUGEM レスポンシブ」などのキーワードでググってみることにしました。諸先輩方がなにかヒントを与えてくださるかもしれません。

でも、ヒットしたページを何十ページ開けても、ほとんどの記事は、「まずは有料版の”JUGEM PLUS”を契約して、フリースペースにjavascriptのコードを挿入しましょう」と書かれています。

無料版ではタグ等を入れることはほとんどさせてもらえませんが、有料版なら一部触れる箇所があるということです。
ただ、私の場合、無料版JUGEMといっても少し普通のとは違っていて、レンタルしているロリポップサーバーに付属している「ロリポブログ」(中身はJUGEMと同じもの)を使用しており、これは無料でありながら広告が出ないブログになっています。ですから、「広告がうっとうしいので非表示にしたい」という理由で有料版にする人が多い中、「せっかく広告は出ないのにわざわざ毎月300円払って有料版にするのもどうかなあ?」という理由だけで、有料版にすることに二の足を踏んでしまう・・・、ケチくさくてすみません。
そんなわけで、「いやどこかに抜け道はあるはずだ」と、ああでもないこうでもない、といろんなことを試してみました。

「HTML編集」でコードをいじってみたり、サイトタイトルやサブタイトル、記事のタイトルなどにコードを挿入してみたり。しかし、パソコン版のHTML編集は、スマホ版とはテンプレートが別なのでなにをやっても無駄だし、タイトルなどを入れるフォームはそもそもHTMLは受け付けないしで、結局、無料版では根本的に無理。というか、HTMLのタグを挿入できるところは2カ所しかないのです。

 

 

・・・え?

 

 

2カ所は挿入できるんだ。
・・・そうです。逆に言えば、無料版で触れるその2カ所を触れば、可能になる・・・ということなのですね。

 

 

はい。では前振りが長くなりすぎましたが、ここからがいよいよ本題です(笑)。

 

その前に(まだ前振りがあるんかいっ!!)、今から書く内容は、「レスポンシブWebデザイン」を知っている、プロまたはハイエンドアマチュア向けな内容となっていますので、基本的にレスポンシブ対応のHTMLやCSSはすでに書いた上での話、もしくは書くのを前提とした話となっていますのでご了承ください。

レスポンシブWebデザインの詳細については、長くなるのでここでは省略します。他のサイトやブログでとてもわかりやすく書かれている記事もたくさんあるので検索してみてください。

 

 

まず、有料版では、レスポンシブにするために行うのはたった1カ所。フリースペースに

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

を1行記述するだけです。

 

しかし、無料版ではスマホ版のフリースペースは使えません。

↓管理画面の「モバイル→フリースペース」を選ぶと、このような画面になり、有料版にすることを要求されます。

 

フリースペース

 

無料版の場合はHTMLなどのタグを挿入できるのは2カ所

1.「ブログを書く→記事の投稿、または記事の編集・削除」の「記事の内容」フォーム内(ただし<HTML>モード)

2.「設定→ユーザー設定→プロフィール編集→自己紹介」のフォーム内

この2カ所だけはタグを挿入できます。

 

-------------------------------------------

 

さて、それでは実際に作業を行うことにいたしましょう。

触るところは全部で3カ所です。

 

【手順1】

「ブログを書く→記事の投稿、または記事の編集・削除」の「記事の内容」フォーム内に通常の文章を打ち込んだ後、フォーム右端にある↓「<HTML>モード」というボタンを押し

 

Javascript

 

文章のどの位置でもかまいませんから(上のほうに書いた方がすぐ読み込むのでいいかも。しかしFacebookでシェアするとFacebookのタイムラインでコードも最初に表示されてしまうので、その場合は最下部に入れた方がいいかも)

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

というコードをフォーム内に挿入してください。

そして通常のように投稿ボタンを押して更新いたします。

この作業は、投稿する度に毎回行ってください(それが少々面倒くさい)。

 

 

【手順2】

「設定→ユーザー設定→プロフィール編集→自己紹介」のフォーム内にもこのコードを挿入しておくことをお勧めいたします。これは検索エンジンなどから直接プロフィールページにランディングされた場合(滅多にそんなことはないと思いますが)にもレスポンシブが効くようにする設定です。↓

 

プロフィール

 

この画像では最下部に挿入していますが、上部に挿入した方が少しでも先に読み込むのでそのほうがいいかもしれません。

また、注意点として、ここに挿入するタグは途中で改行せずに1行で書いた方がいいでしょう。改行すると、自動改行で勝手に<br />というタグが挿入され、うまく作動しない可能性があります。(作動するかもしれない。未検証)

この作業を行うのは1回だけでいいです。

 

 

【手順3】
管理画面の「モバイル→基本設定→ブログの表示設定」で、スマートフォン表示設定のところを、「直接表示形式」に切り替えておきます。これを切り替えておかないと、「リスト表示形式」ではせっかくタグを挿入した記事本文が表示されませんので、レスポンシブが効きません。↓
この作業も1回だけでいいです。
基本設定

 

 

以上で、無料版JUGEMでもレスポンシブが可能となり、ご自分で好みのデザインのレスポンシブ対応CSSを書いて、表示させることが可能となります。

 

 

 

一応、不都合な面も書いておきましょう。

この方法を参考にされる方は、基本的にHTMLやCSS、更にはレスポンシブに大変詳しい、プロかハイエンドアマチュアの方と思われますが、それ以外の、「そもそもレスポンシブって何?」とか、「HTMLってなんぞや」とおっしゃる方には、念仏にしか聞こえないでしょう。

例えば、ホームページ制作業者がクライアント様のサイトやブログをレスポンシブ仕様にして、ブログの更新はクライアント様ご自身でされるようにお願いしたとしても、クライアント様が毎回の投稿時に、わざわざ「HTMLモード」に切り替えてJavascriptコードを挿入してくれるかどうか・・・。うーーん。ちょっとハードル高いかもですね。

クライアント様:「えーーー?毎回そんな面倒なことをしなきゃいけないの?ブログを書くだけでも面倒なのに・・・じゃあもうブログなんか書かねぇ!!」・・・と言われるかも。

ブログは最新記事が一番上に表示され、古い記事はどんどん裏に回っていきますから、常に上記のJavascriptコードを記事本文中に埋め込み続けなければなりません。新規投稿をする度にです。これは素人さんでなくても(プロでも)毎回となると面倒くさいし、うっかり挿入し忘れなんてことも。

更には、ブログ更新はパソコンで行う必要があるということです。スマホ版の管理画面(投稿フォーム)には「HTMLモード」がありません。

 

 

まあ、それが面倒くさいという方は、素直に有料版にすべきですね。有料版なら、最初に1回だけフリースペースに挿入するだけで済みますから。

私の場合、毎回手間をかけてでも、有料版にはしたくなかった、というのが、今回の方法を見つけ出すことにつながったと言えます。(ただのケチやんけ)

 

もし、「そんな面倒なことをしなくても、うまくいく方法あるよ!」とおっしゃる方がいらっしゃいましたら、是非その方法を無料でお教えください(笑)。

 

 

レスポンシブWebデザインがうまく作動した当ブログのスマホ表示↓

 

レスポンシブ

 

ちなみに、レスポンシブではなくJUGEMのスマホテンプレート表示の場合↓

 

スマホテンプレ

 

こんなふうに、ずいぶん表示に違いがあるのですね。

さて、あなたも無料版JUGEMでレスポンシブしませんか!!
0
    | 仕事 | 12:51 | comments(0)←コメントはこちらからお願いします。 | - |
    コメント
    コメントする









    カレンダー
      12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
    << October 2019 >>
    最新の記事
    カテゴリー
    過去の記事
    最近のコメント
    リンク
    プロフィール

    コンテンツ案内

    ▲PAGETOP▲