ホームページビルダー21 クラシックの使い方 スマホ版 固定部表示試験記録

/* 2017 06 29 */
.fixed-menu {
display:none;
}
@media screen and (max-width: 568px) {
.fixed-menu {
display:block;
position:fixed;
bottom:0;
background:rgba(1, 0, 0, 0.4);
color:white;
z-index:9999;
font-size:14pt;
font-weight:bold;
width:375px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.fixed-menu a, fixed-menu a:link, fixed-menu a:visited {
color:white;
}
}

スマホ対応ページの開発@ホームページビルダー教室

ホームページビルダーのテンプレートを使えば簡単にスマホ対応のホームページが作成できます。

ホームページビルダー教室ならホームページビルダーの基本機能に加えて、作業の効率化のためのブラウザーの使い方、機能の追加などを学習しながら実際のホームページの作成を進めることができます。

SnapCrab_No-0007

レスポンシブデザインと表 ホームページビルダー20の使い方

ホームページビルダー19(ホームページビルダー20も同様)ではフルCSSテンプレートもレスポンシブデザインによるスマホ対応となりました。(WordPressテンプレートはバージョン17から対応)

しかし、自分で作成される部分がパソコン、スマホそれぞれでどう見えるかをよく考えないと、全体としては読みづらいサイトになってしまいます。

典型的な例に「表」があります。

パソコン画面では

ホームページビルダーの表

問題のない形で表示されています。スマホで表示すると

ホームページビルダーの表

各セルが縦長に表示されてしまい、なかの文章はとても読みづらいものになってしまいます。

 

 

.htaccessの使い方 スマホページへのリダイレクト@ホームページビルダー教室

ホームページビルダー教室でフルCSSテンプレートで作成したホームページのスマホ対応を指導した際に、見本として作成した .htaccess です。

記録のために投稿します。

RewriteEngine on
RewriteCond %{REQUEST_URI} !/sp/
RewriteCond %{HTTP_USER_AGENT} (iPod|iPhone|iPad|Android|Windows\ Phone)
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(gif|png|jpg|jpeg|css)$ [NC]
RewriteCond %{REQUEST_FILENAME} !^(.*)profile\.html$
RewriteCond %{REQUEST_FILENAME} !^(.*)otoiawase\.htm$
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^(.*)$ sp/$1 [R]
RewriteBase /

ワードプレス・テンプレートの使い方@ホームページビルダー教室

ホームページビルダー19クラシック ワードプレス・テンプレート CSS(スタイルシート)の知識があれば、改造が可能です。

ホームページビルダー教室での改造例を紹介します。

テンプレート(ミニマル0027)原型はこちら

ホームページビルダー ワードプレス・テンプレート

改造後(PC表示)はこちら・・・

ホームページビルダー ワードプレス・テンプレート

サイドバー、ナビゲーションメニューなどを取り去っています。PC版はとてもシンプルなものにしました。その理由は、このサイトはスマホ(スマートフォン)表示を優先して設計したからです。スマホ表示はこちら・・・

ホームページビルダー ワードプレス・テンプレート

実際のサイトはこちら⇒ 天然石・パワーストーン卸リアルアートコーポレーション

Googleモバイル検索順位取得 Rank Reporterの使い方@ホームページビルダー教室

4月にGoogleモバイル検索の結果に、モバイルフレンドー(スマホ対応)かどうかが考慮されるようになりそうです。 ホームページビルダー教室で、生徒さんのおすすめしている検索順位取得ツール(Rank Reporter)で、モバイル検索順位の測定方法が紹介されていました。ホームページビルダー教室で解説しているサイト(パソコン教室横浜.net)に対して、早速、試してみました。今日のところは、順位の差はないようでした。4月21日以降、モバイルの順位に変化があれば、改めて報告します。

 
 

Google Developers モバイル フレンドリー テストの使い方@ホームページビルダー教室

Googleは4月下旬にモバイルフレンドリー・アルゴリズムを導入する予定です。モバイル(スマホ)対応していないサイトは検索上不利になる可能性があります。 Google Developers モバイル フレンドリー テスト グーグルではテストツールを提供しています。 https://www.google.com/webmasters/tools/mobile-friendly/ 以下、OKとNGのテスト結果画面例です。 モバイル フレンドリー テスト モバイル フレンドリー テスト 当サイト ホームページビルダー.net はレスポンシブデザインでモバイル対応となっています。  

スマホ メニュー アイコン使い方@ホームページビルダー教室

ホームページビルダー教室の生徒さのご要望(生徒さんの場合は、ホームページビルダー19クラシック フルCSSテンプレート)「レスポンシブデザインでのスマホページのメニューのアイコンがわかりずらいと思うので、自分で作成した画像と入れ換えたい」に、お応えするために パソコン教室横浜.net  上で試してみました。(こちらはワードプレス・テンプレート)。実現するにはスタイルシートの変更が必要です。   オリジナル ホームページビルダー スマホ メニュー アイコン 開くという言葉を追加 ホームページビルダー スマホ メニュー アイコン 開いているときは「閉じる」になる ホームページビルダー スマホ メニュー アイコン