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