レスポンシブデザイン

このブログがスマホ対応になりました

昨日から今日にかけて、このブログをスマホ対応にする作業を行いました。

3月7日の記事に書いたように、スマホ対応しているかどうかを4月21日から Google がランキング要素として使用するため、スマホ対応していないホームページは検索順位が下がってしまいます。(補足:パソコンで検索したときの検索順位にはたぶん変動がないと思われます)

その対策として、このブログで使用している WordPress のテーマをレスポンシブ対応のものに切り替えました。

今まではスマホやタブレットでこのブログを表示すると字が小さくて見づらい部分が多かったのですが、今回の作業によりぐんと見やすくなっています。

Google のモバイルフレンドリーテストでもいい結果が出るようになりました。

問題ありません。 このページはモバイル フレンドリーです。

テーマの切り替え時に役立つプラグイン Theme Test Drive

今回のように WordPress のテーマを切り替える作業をするとき、手を加えていない新しいテーマを有効にすると、そのテーマの初期設定でサイトが公開されてしまいます。

本番サイトとは別にテスト環境を準備してそこで作業すればよいのですが、そういう環境を準備するのってめんどくさいです。

そんなときに役立つプラグインが Theme Test Drive です。

Theme Test Drive を使うと、管理者でログインしているときだけ準備作業中の新しいテーマを有効にした状態のサイトを表示することができます。

今回の作業ではこのプラグインを使ったので効率よく作業を行うことができましたが、ちょっと不具合がありました。

新しいテーマに切り替えたら、Theme Test Drive を使って作業したときに設定したウィジェットがすべてクリアされていて、ウィジェットを再度設定する必要がありました。

ウィジェットの設定はたいした作業ではないので大きな問題ではなかったですが、今後またこのプラグインを使うときにはよく注意したいと思います。

4月21日以降、スマホ対応していないホームページの検索順位が下がります

スマホ対応が Google のランキング要素に

Google が2月27日の公式ブログで、ホームページがスマホ対応しているかどうかをランキング要素として4月21日から使用開始することを発表しました。

パソコンで検索したときの検索結果は4月21日以降も変化がないと思われますが(たぶん)、スマホで検索したときの検索順位には大きな変動が予想されます。

現時点で Google の検索エンジンからご自分のホームページがスマホ対応していると評価されているかどうかは、実際にスマホで検索してみるとわかります。

Google の検索結果に「スマホ対応」と表示

上記のように検索結果に「スマホ対応」と表示されていればOKです。

スマホ未対応の方は早めに対策を

スマホで検索してホームページにアクセスしてもらうことを重視する業種・業態などで、まだスマホ対応していないホームページをお持ちの方は早めに対策を行っておくことをお勧めします。

WordPress で運用しているホームページの場合、基本的にはレスポンシブデザインのテーマに切り替えるだけなので、一般的には作業は楽だと思います。

ホームページ・ビルダーでホームページを更新している方は、こちらの記事で紹介したホームページ・ビルダーの最新版を使ってホームページをリニューアルするのが有力な選択肢になると思いますが、ページ数が多いサイトの場合、いっきにすべてのページをスマホ対応にするのは大変なので、とりあえずトップページだけ早めにスマホ対応しておいて、その後は徐々に・・・ということでもよいでしょう。

ご自分でスマホ対応するのが難しいという方はお力になりますので、こちらからお気軽にご連絡ください

ホームページ・ビルダーのフルCSSテンプレートがレスポンシブデザインになりました

最近、ホームページ・ビルダー 19 を使い始めました。

使ってみて最初に気がついた変更点としては、フルCSSテンプレートレスポンシブデザインになったということです。

ホームページ・ビルダー 19 のフルCSSテンプレートがレスポンシブデザインになりました

ホームページ・ビルダー 19 のフルCSSテンプレートがレスポンシブデザインになりました02

レスポンシブデザインとは、同一のホームページを

  • パソコンで見たとき
  • タブレットで見たとき
  • スマホで見たとき

にそれぞれの画面サイズに合わせて見やすいように、自動的にレイアウトが切り替わるホームページの作り方です。

パソコン向け、タブレット向け、スマホ向け・・・と別々にホームページを制作するのに比べて、ホームページを更新する手間がかからないのがレスポンシブデザインのメリットです。

ホームページ・ビルダー 19 のテンプレートを使えばパソコンからスマホまで対応できるセンスのよいホームページを手軽に作ることができますので、これからホームページを作りたい(リニューアルしたい)という方はホームページ・ビルダー 19 を選択肢として考えるとよいです。

パソコン教室くりっくではこの最新バージョンに対応した講習を行っていますので、興味のある方はご連絡ください。

Internet Explorer 8 + メディアクエリ の不具合を調べてけっこう疲れました

お客さんのホームページをレスポンシブデザイン(スマホ対応)にする作業を行っていて、順調に進んでいたのですが、Internet Explorer 8 で表示したときに不具合が起きることが判明しました。

CSS3メディアクエリに対応させるために css3-mediaqueries.js を読み込んでうまくいくはずなのに、なぜかスタイルが意図した通りにならないんです。

HTML ファイルや CSS ファイルをチェックしたところ、どこにも問題はないはずなのですが、なぜかうまくいかない・・・。

「メディアクエリ Internet Explorer 8」でググってみると、やはり Internet Explorer 8 には注意事項がけっこうあるようで、いろいろと解決策が見つかるのですが、どれも該当せず・・・。

試行錯誤しながらようやく「たぶんこれだろう」という原因を突き止めました。

けっこう疲れました。

ホームページ・ビルダー 17 の新機能、なかなか興味深いです

先日発売された ホームページ・ビルダー 17 を入手して、インストールしました。

まだ少し試してみただけですが、前のバージョンからさらに機能アップしていますね。

いちばん大きな変化はなんといっても、WordPress に対応したことです。

ホームページ・ビルダー 17 のガイドメニュー

WordPress はサイトを構築・運用するためのツールとして現在もっとも人気があるものですが、その WordPress に対応することにより ホームページ・ビルダー の位置付けや性格が変わりつつあるような気もします。

また、ひとつのHTMLファイルでパソコンからスマホ、タブレットまでの画面サイズに対応できる、レスポンシブデザインも取り入れているらしく、そのあたりも大変興味があります。

新しいホームページ・ビルダーでどこまでできるのか、使い勝手はどうなのか・・・これから時間を見つけてじっくりと使ってみようと思います。