HOME > Web屋の呟き
リニューアルサイト完成

自然免疫制御技術研究組合様のホームページがリニューアルオープンしました。

 

自然免疫制御技術研究組合

 

Webサイトはこちらです。↓

http://shizenmeneki.org/

もちろんスマホからのアクセスもOKです。

 

リニューアル前の最初のバージョンが2010年制作でしたので、9年ぶりということになります。

インターネットの世界で9年10年というと大昔と言われるほど、この世界はスピードが速いし、その間、サイトの構造やデザインなどの主流もずいぶんと変わるし、流行も変わってまいります。

別に流行を追い続ける必要もないのですが、さすがに10年も前のサイトは、今見るとやはり「古くささ」が目に付きます。

また、構造的なものについては、まずモバイル対応がなされているかどうか。10年前というとスマートフォンというものが広く一般に普及しだした時代です。スマホの先駆けとなったiPhoneが日本で発売されたのが2008年だそうです。その当時は、まだほとんどのホームページはパソコンにしか対応しておらず、スマホへの対応が必須と言われるようになったのはそれから数年経ってからのことです。

今となっては、モバイル対応・スマホ対応をするのは当たり前。してないとGoogleもお客様にも相手にしてくれないというのが現状となっています。

弊社では、2014年秋頃からレスポンシブWebデザインという手法によりスマホ対応を積極的に行うようになり、当時から現在までの制作例のほぼ9割方はレスポンシブのサイトとなっております。

この先、また別の技術が開発され、スマホ対応の手法が変わっていく可能性も充分に考えられることではありますが、できるだけ積極的に対応していくように努力いたします。

0
    | 仕事 | 21:13 | comments(0)←コメントはこちらからお願いします。 | - |
    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)←コメントはこちらからお願いします。 | - |
      看板

      ピクセル工房を立ち上げてから15年目。法人化してから5年目。ようやく会社の看板ができ、玄関横に取り付けました。

      自作です。自作と言っても100%自作というわけではなく、データは私が作成しましたが出力は看板屋さんにお願いしました。

      耐光性、耐水性があるので屋外設置でも数年以上は持つそうです。

      表面にボルトで貼り付けてある透明アクリル板はオーダーで専門業者に注文いたしました。

      後ろの格子は、築70年の我が家のリフォーム前に玄関にあったものを洗って色を塗って仕上げました。

       

      看板

       

      看板

      0
        | 仕事 | 13:30 | comments(0)←コメントはこちらからお願いします。 | - |
        きたじま皮フ科様のサイト制作完成

        去る6月10日に、北島町の「きたじま皮フ科」様のサイトが完成しました。

        きたじま皮フ科
        北島町にあるチューリップ公園がメイン画像になっています。
        0
          | 仕事 | 00:19 | comments(0)←コメントはこちらからお願いします。 | - |
          大久保病院様HPリニューアル

          少し前になりますが、4月25日に大道の大久保病院様のサイトがリニューアルオープンいたしました。

          中庭の大きな桜の木がシンボルです。

           

          大久保病院

           

          サイトはこちら

           

          販促クリエイター 有限会社ソニックプランさんのプロデュースです。

          0
            | 仕事 | 00:09 | comments(0)←コメントはこちらからお願いします。 | - |
            引越センター丸一様リニューアル

            少し前ですが3月1日に「引越センター丸一」様のサイトがリニューアルオープンいたしました。

            最近はスマホ等でアクセスまたはお問い合わせのケースが多くなってきたとのことで、スマホやタブレットなどのモバイル機器に対応したサイトを制作させていただきました。
            引越センター丸一
            弊社サイト制作例にも掲載させていただいております。
            0
              | 仕事 | 12:15 | comments(0)←コメントはこちらからお願いします。 | - |
              名刺

               

              先日、免許証の更新にあたり、視力検査は眼鏡なしでなんとか通過したということと、写真は5年分歳をとったと痛感した話をブログに書きました。

              きょうは、老眼のお話です。

              実は、1週間ほど前にあるクライアント様(10年以上のお付き合いをさせていただいております)からのご依頼により、名刺と封筒を作成いたしました。

              といっても、10年以上前に名刺と封筒の両方ともご依頼いただいたものと全く同じデザインでいいからということで、当時のデータを引っ張り出してきて、そのまま印刷しようとしたのです。

              しかし!

              封筒はまあいいとして、名刺のほうは10年前のデザインでは文字が小さいと感じました。

              もちろん、当時はそれでちょうど良いと思って作成したと思いますが、今改めて見ると文字が小さすぎて読みづらい!
              思うに、これは当時の判断が間違っていたのではなく、この10年の間に私の老眼が進んだ、と。
              当然ながらクライアント様も私より年上ですから、同様に老眼が進んでいるはずだと考えました。
              そこで、全体のバランスを崩さない程度に、若干文字を大きめにして印刷いたしました。
              たぶん比べてみないとわからないぐらい微々たる差ですが、今回の新しい名刺のほうが読みやすくなりました。
              まあ、この名刺をもらった人で年齢がある程度若い方なら10年前のものでも特に問題はないとは思いますが。

               

              ということで、いろんなところで「歳」を実感するようになってきた今日この頃。

               

              0
                | 仕事 | 16:23 | comments(0)←コメントはこちらからお願いします。 | - |
                サイトリニューアル

                「えもとこどもクリニック」様のサイトがリニューアルオープンしました。

                 

                 

                サイトはこちら

                http://emoto-kodomo.com/

                0
                  | 仕事 | 17:53 | comments(0)←コメントはこちらからお願いします。 | - |
                  サイトリニューアル

                  今年6月に全面リニューアルされました自然免疫応用技研株式会社様のサイトの、英語版サイト制作のご依頼を受け、このほど完成しましたのでお知らせいたします。

                  以前にも英語版サイトはあったのですが(弊社制作)、日本語版のリニューアルに伴い、内容も大きく変わったため、英語版もリニューアルすることになったのです。

                   

                   

                  サイトはこちら

                  https://www.macrophi.co.jp/english/

                  0
                    | 仕事 | 17:47 | comments(0)←コメントはこちらからお願いします。 | - |
                    新規サイト公開

                    少しお知らせが遅くなりましたが、7月16日に「まつもと皮フ科」様のサイトが正式オープンしました。

                     

                     

                    サイトはこちら

                    http://matsumoto-hifuka.net/

                    0
                      | 仕事 | 17:40 | comments(0)←コメントはこちらからお願いします。 | - |
                      カレンダー
                           12
                      3456789
                      10111213141516
                      17181920212223
                      24252627282930
                      << November 2019 >>
                      最新の記事
                      カテゴリー
                      過去の記事
                      最近のコメント
                      リンク
                      プロフィール

                      コンテンツ案内

                      ▲PAGETOP▲