グーグル検索結果スマホ対応@ホームページビルダー教室

    グーグル検索結果にサイトがスマホに対応しているかが表示されるようになりました。一般的なサイトでは、スマホからのアクセスがおおいかと思います。

グーグル検索結果スマホ対応  

ちなみに、当サイト ホームページビルダー.net はホームページビルダーのワードプレス・テンプレートを使っており、スマホ対応のレスポンシブデザインです。

ホームページビルダー クラシック フルCSSテンプレート スマホ対応の使い方

ホームページビルダー19クラシック フルCSSテンプレートは、19からはレスポンシブ・デザインになり、パソコン版、スマホ版が自動表示切替となりました。以前のように、パソコン版とスマホ版を別々に作る必要はありません。

しかし、別のものにしたいとの要望がなりわけではありません。スマホ版はスマホの事だけを考えて最適化するという選択肢も有効です。
以前のように、別にスマホ版のサイトを作成して、リダイレクトすることはホームページビルダー19になっても可能なようです。

ホームページビルダー19クラシックの使い方

スマホ(スマートフォン)対応ページの重要度@ホームページビルダーの使い方

ホームページビルダー.netなど、私自身が運営している主なホームページをグーグル・アナリティクスでアクセス解析しています。 パソコンから見にくるのか、スマホなどから見にくるのか調べてみました。

ホームページビルダー.net

グーグル アナリティクス モバイル サマリー   ホームページビルダーとうパソコン上の道具に関するサイトのためか、パソコンからのアクセスが多くなっています。

パソコン教室横浜.net

グーグル アナリティクス モバイル サマリー こちらは、スマホからのアクセスの方が多くなっています。 一般的なサービスでしたら、スマホの割合はもっと多くなると思われます。(ホームページビルダー教室生徒さんの事例に基づく) パソコン版のページより、スマホ版のページを優先して、サイトを設計したほうがいいのではないでしょうか? ホームページビルダー19 SP、クラシック どちらもレスポンシブ・デザインで、スマホに対応しています。

ホームページビルダーの使い方 スマホ ページから電話発信 

【ホームページビルダー教室】の実際の授業からのヒントです。

スマホ(スマートフォン)のページの特徴は、電話番号をタップするとスマホの電話機能を呼び出すことができることです。リンクの設定の応用で実現します。

tel:

電話発信

 

上の見本はホームページビルダー19クラシック ワードプレス・テンプレートの例です。

(パソコンでは、必ずしも電話機能があるわけではありませんが、私のパソコン教室の環境では、スカイプが起動されます。)

 

ホームページビルダー スマホ対応ページの使い方

元々は他の方が作成した独自デザイン(HTML/CSS)でのサイト(パソコン版のみ)の更新をホームページビルダー18で始められた生徒さんの例です。更新方法、SEO対策、アクセス解析(グーグル・ウェブマスターツール)などが一通りできるようになり、今度はスマートフォン対応ページ(フルCSSスマートフォンテンプレート)の追加の作業を始めました。 サイトの確認画面からスマホ追加/同期、テンプレートを選択して、スマホのページを作成することができます。パソコン版のindex.htmlにスマホページへの切り替えコード(Javascript)が自動挿入され、同じURLでパソコン版、スマホ版の切り替え表示となります。

 スマホ

スマホから投稿 ワードプレスの使い方@ホームページビルダー教室

ホームページビルダー18のパッケージに「デバイスを選ばずに、どこからでも更新!」*2と謳っています。 ワードプレスでサイトを作成すれば、スマホ、タブレットから投稿することが可能です。 (hpb pad for wordpressというスマホ専用の投稿アプリも用意されていますが) スマホの通常のブラウザーでダッシュボードを開いて、以下のように、投稿することが可能です。 ワードプレス スマホから投稿

  例えば、スマホで写真を撮って、それを投稿に入れる作業は、デジカメ+パソコンで同じことをするよりずっとずっと楽ですね。私は日常こういう使い方をしています。   (*2 WordPressテンプレート使用時の機能)  

ホームページビルダーWordPressテンプレートの使い方 スマホ向けレスポンシブデザインをやめる

ホームページビルダーのワードプレス・テンプレートの使い方の応用です。テンプレートはレスポンシブ・デザインとなっており、パソコン向けのページを作成すれば、その同じページがスマホ上ではスマホの大きさに適した表示方法に切り替わります。

レスポンシブ・デザインはいらないので、パソコンと同じ画面をスマホでも表示したいとのご要望をいただきました。

ワードプレス・テンプレートで使われている、css media queries あたりを改造することになりました。

ホームページビルダー スマホ レスポンシブ デザイン

 

その結果が左の画面です。スマホの画面の大きさでもパソコンでの表示方法となっています。右は、オリジナルのテンプレートでの表示です。

スマホからメディア(写真)のアップロードの使い方@ホームページビルダーWordPressテンプレート

ワードプレスの利点のひとつはスマホから投稿できることです。専用のアプリ hpb pad for wordpress もありますが、今回はスマホ上のブラウザー(Chrome)上のダッシュボード経由で、スマホで撮影した写真のアップロードをしました。投稿本文は、後にパソコンのブラウザー(Chrome)上で入力しました。スマホでのダッシュボードの使い方も指導いたします。 ワードプレス メディアのアップロードの使い方

レスポンシブ デザイン ホームページビルダー・テンプレートの使い方

ホームページビルダー ワードプレス テンプレートはレスポンシブ デザインになっています。スマホ向けのページを別にサクセイスルことなく、パソコンで見ればパソコン向け、スマホで見ればスマホ向けの表示になります。 以下は他のワードプレスサイト(パソコン教室横浜.net)のスマホでの画面表示例です。本サイト ホームページビルダー.net も同様にスマホ対応になっています。特別な使い方を覚える必要はありません。

パソコン教室横浜 ホームページ

hpb pad for wordpressの使い方@ホームページビルダー教室

hpb pad for wordpress をスマホ(アンドロイド)にインストールして、使っています。 当サイト(ホームページビルダー.net)を登録します。 設定時に、日本語ドメインは直接入力できなかったので、Punycodeへ変換して半角英数字で入力しました。 既にある記事の「編集」など、いくつかの機能は動作せずにABENDしてしまいます。 それでも、出先で新規記事の投稿には便利なので使っています。

hpb pad for wordpress

hpb pad for wordpress