*

スマホサイトに画像やメニューを表示させない設定

公開日: : 最終更新日:2017/10/15 Webサイト作成

スマホの画面は表示範囲が狭いので、縦長のサイトになります。

縦スクロールは操作がしやすいとはいえ、あまりに長いのは考えもの。なので、PC用の情報をすべて表示させるのではなく、スタイルシート(CSS)で重要でない部分は非表示にすることがおすすめ。

たとえば、スタイルシートは次のようになります。
上がサブメニュー用で下がバナー用。HTMLソース側は、class=aside class=bannerタグです。

===========================================

.aside {
display: none;
}

.banner {

display: none;
}
===========================================

ちなみに、HTMLはclassではなくIDでもよいですが、同じIDは同ページ内で1回しか使えませんから複数のバナーを非表示にする場合は、ID=bannerではなくclass=bannerに。

私の場合はバナーを非表示にしましたが、サイトによってはテキストを非表示にしてバナーを見せた方がアピールしやすいかもしれませんね。いろいろお試しください。



ad

関連記事

ページのコピーと貼付けで注意すること

以前も書きましたが、ホームページ作成にはコピーと貼付け作業を頻繁に使います。 サイトの構成を考

記事を読む

トップバナー

トップのイメージ画像を入れ替える

サイトのイメージ画像とロゴを入れ替えましょう。 あらかじめテンプレートにはサンプル画像が入って

記事を読む

スマホ人口の増加

スマホのユーザーが増加中!なのに…

企業のウェブサイト(ホームページ)でも、まだスマートフォン対応していないものが多いですね。

記事を読む

テンプレートの見出しタグ

タイトル(メタタグ)と見出しタグを編集する

テンプレートのソースタグ「<head>~</head>」の部分を編集します。

記事を読む

画像を回り込ませる方法

スタイルシート(CSS)で画像を回り込ませる

赤枠部分のような、CSSで文字の右や左に画像を回り込ませる方法。ホームページ制作によく使いますね。

記事を読む

無料テンプレート

webサイトのテンプレートはどれを選ぶ?

さて、サイトのテンプレート選びです。 googleで検索をかけると、たくさんでてきます。 い

記事を読む

ファイルを開く

テンプレートをダウンロードして準備

さて、いよいよサイトを作っていきます。 まず、今回使うテンプレートファイルをパソコンにダウンロ

記事を読む

dreamweaver cc

サイト作成ソフトとHPビルダーの設定

サイト作成のソフトもいろいろありますが、代表的なものといえば「ホームページビルダー」と「Dreamw

記事を読む

php工房

問い合わせフォームを作る

ちょっと油断すると更新が遅れますね(笑 ところで、サイトに不可欠なのが問い合わせフォーム。

記事を読む

エックスサーバー

レンタルサーバーを選ぶ

webサイトの運営にはサーバー選びが重要。 中小企業、個人事業者なら、レンタルサーバーが一般的

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

相島での釣果
離島 相島へナイトアジングに行ってきた

福岡県北部の離島、相島へ知人と夜釣りに行ってきました。 新宮港発17

梱包された時計
グランドセイコーの電池交換完了

先月末メーカーへ電池交換に出していたSBGX065が戻ってきました。

プランクトン1.8
34のNewワーム「プランクトン1.8」でアジング

前から心待ちにしていた、34のワームが一般発売されました。 タイ

魚子メタル
魚子メタルでアジングをやってみた

寒さは大の苦手ですが、ほぼ毎週アジングに行ってます。 リグはワー

グランドセイコー SBGX065
グランドセイコーのクォーツを電池交換に出してみた

約3年前に購入したGrand Seiko SBGX065。 時計

→もっと見る

PAGE TOP ↑