スマホ対応でないホームページをスマホ対応にする方法(1)

スマホ対応とは

この投稿をほぼ半分書いていましたが、続きを書こうとしてバックアップを取らなかったら3時間分のデータが全部無くなりました。何事も慎重に進めていきます。全ては教訓です。文書の殆どは頭の中にあるので、今度はさほど時間はかからないでしょう。

さて、

今やスマホ対応でない=レスポンシブ未対応のホームページは古いと思われてしまいます。若者はPCをあまり使わない世代になっていますので、スマホでホームページに辿り着いても、スマホ対応で無いホームページは見にくいので見ないということになってしまいます。

では、スマホ対応にするにはどうすれば良いのでしょうか?実際にWordpresswのLighntingというスマホ対応のプラグインを使って作り変えてみました。

Lightningというのは、Bootstrapというフレームワークを利用してスマホ対応になっています。Bootstrapはスマホ対応に特化した部品を提供しています。これを組みわせてHTML+CSSでスマホ対応のホームページができます。Wordpressでは、このHTML+CSSも必要なくスマホ対応ができることになります。だた、できるといってもCSSでを使わないと味気ないホームページになってしまいます。

たまたま、どんなホームページがあるか調査中にスマホ対応でないホームページがあったので調べてみました。

http://www.sun-setubi.jp/  <–あくまでも調査の為に分析しただけです。感謝です。

すると、Wordpressを使ったホームページでした。ソースを見ると使っているプラグインも分かります。

hp-02

トップページは、Wordpressをただ使っただけでは実現できるデザインではありませんでした。

①lightningのカスタマイズで設定できます。

②右上に固定されていますので、header.phpに画像を置いて、VK ExUnitのCSSカスタマイズで固定しました。また、サイズがスマホ版に鳴った時には、画面中になるように調整しました。

「外観ー>テーマの編集ー>Lightning:テーマヘッダー(header.php)」で以下の赤い部分(img)を入れました。

</h1>

</h1><!–電話番号タグ表示2017/9/10 –>

<p  class=”tel-no”><img src=”http://www.xxxxxxxx/images/ContactInfo.png” width=”257″ height=”56″ alt=”お電話でのお問い合わせはこちら” /></p>

<?php do_action(‘lightning_header_logo_after’); ?>

 

電話番号画像の場所設定は、以下のように画面サイズが992pxより大きいか、小さいかで変えています。

@media (min-width: 992px){/*  電話番号の位置をレスポンシブ*/

.tel-no{    position: absolute;    top: 5px;    right: 0; }}

@media (max-width:992px) {

.tel-no{ max-width: 50%;    margin: 0 auto }}

 

③画像はLightningのトップスライドショーに1個だけ画像を設定しました。Max.5画像を設定できます。この設定ではスマホ用とPC用を変えることがでできので便利です。Lightningではスライドショーの時間設定はできませんが、直接パラメータを設定できるはずです。参考:http://mizukazu.minibird.jp/bootstrap-carousel/に変更方法が記載されています。でも、現況の設定時間でも良いかなと思います。

④この画像にリンクさせる方法が一番難しかったです。トップコンテンツエリア上部にウィジェット「カスタムHTML」を挿入して、コードを書きましした。基本的に元のホームページのソースをコピーして貼り付け、CSSだけをスマホ対応にします。CSSの調整は必ず、ブラウザ上で実際に動かしてから使います。ソースはSafariを使ってエディタ上でカットします。CSSの調整はChromeを使うのが使い勝手が良いです。

toppage

 

⑤フッターに画像と文字を挿入すれば良いのですが、lightningのフッター上部では表示場所が違うので、フッターウィジェットエリア1〜3になります。ただ、このままだと3カラムになるので「フッターウィジェットエリア1」に「カスタムHTML」でCSSを記述して、1カラムになるように設定しました。

footer-html

 

⑥元々、入れていたものを使いました。Lightning: テーマヘッダー (header.php)にどこかで参考にしたjQueryを挿入しました。画面の700pxより下がるとボタンを表示して、ボタンを押すと最上位に戻ります。

<script>

jQuery(function(){ var topBtn = jQuery(‘#re-top’);

topBtn.hide(); //最初は非表示

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop() > 700) { //700以上、下にスクロールされた時

topBtn.fadeIn(“”); //表示 }

else { //それ意外は topBtn.fadeOut(“”); //非表示 } });});

</script>

 

以上

Follow me!

0