*

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

公開日: : 最終更新日: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

関連記事

バナー画像をJavaScriptで切り替える

前回スマホ用の画像の話をしましたが、jQueryのJavaScriptを使ってサブページのバナー画像

記事を読む

エックスサーバー

レンタルサーバーを選ぶ

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

記事を読む

無料テンプレート

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

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

記事を読む

スマホ人口の増加

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

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

記事を読む

画像を回り込ませる方法

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

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

記事を読む

ファイルを開く

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

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

記事を読む

TeraPad

サイト作成に役立つツール

webサイト作成には、バナーやボタンなどが必要です。 ホームページビルダーには「ウェブアートデ

記事を読む

メニュー部分をドラッグ

DreamWeaverの便利な「ライブラリ機能」

webサイト作成にはコピーとペースト(貼付け)作業をよく使います。 メニューやヘッダー(タイト

記事を読む

電話番号にリンクを設定する

スマホサイトによくある、タップをすると電話がかけられるリンクを設定します。 スマホ画面では電話

記事を読む

トップバナー

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

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

記事を読む

ad

Message

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

ad

コンパクト卓上コンロ
シーズン前に釣りキャンプの準備中

暦では立春を過ぎましたが、北海道は猛烈な寒波に襲われ、関東地方も積雪だ

ライフジャケット
海釣りにライフジャケットは必需品!?

気温は低いものの天気が良いので釣りに出かけていますが、相変わらず釣果は

姫島の漁港
離島で釣り 糸島市の姫島に行ってきた

2019年も半月が過ぎすっかり正月気分も抜け、繁忙期の仕事に追われてい

シャローフリーク・プチ
シャローフリーク・プチ(3.3g)を使ってみた

アルカジックジャパンから発売されているフロート、シャローフリーク PU

ショアジギング用のリールとライン
ショアジギング用のタックルを揃えてみた

12月も残りわずかとなり、公私ともに慌ただしい日が続いています。

→もっと見る

PAGE TOP ↑