*

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

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

前回スマホ用の画像の話をしましたが、jQueryのJavaScriptを使ってサブページのバナー画像をパソコン用とスマホ用に切り替えてみやすくすることもできます。

jQueryの情報はネットにたくさんあるので参考にしてください。私は書籍のresponse.jsサンプルを使用しました。

画像はスマホ用とパソコン用の2つを用意。
スマホ用は文字を大き目にし、縮小されたときでも読みやすく作ります。

response.jsの場合の設定方法ですが、サンプルフォルダー一式をダウンロードし、その中のJavaScriptフォルダをサーバーにアップ。

image4

HTMLのソースタグを開き「①の<body>の中」「②の画像タグ部分」「③の</body>の前」にそれぞれタグを入れます。

image5

これで完了ですが、慣れていないと結構大変!私もネットでいろいろ調べましたが、手順がわからず悪戦苦闘。やっと大手本屋でわかりやすい書籍を手に入れました。
jQuery mobileは以前使ったことはありましたが、jQueryもいろいろ使い勝手があるので参考になりました。



ad

関連記事

TeraPad

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

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

記事を読む

画像を回り込ませる方法

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

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

記事を読む

スマホの画面

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

スマホの画面は表示範囲が狭いので、縦長のサイトになります。 縦スクロールは操作がしやすいとはい

記事を読む

ファイルを開く

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

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

記事を読む

メニュー部分をドラッグ

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

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

記事を読む

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

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

記事を読む

スマホ人口の増加

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

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

記事を読む

dreamweaver cc

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

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

記事を読む

php工房

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

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

記事を読む

トップバナー

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

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

記事を読む

ad

Message

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

ad

J.W.Black Guitars JWB-J-S
J.W.Black Guitars JWB-J-S のメンテナンス

今日、成人の日はあいにくの雨。振袖の女性は大変でしょうね。 そう

浮嶽神社
今年の初詣は浮嶽神社へ参拝

正月三が日は予報に反して、天気に恵まれました。 例年、親戚宅で年

東芝 USB3.0接続 ポータブルハードディスク
またハードディスクのトラブルが…

年末ぎりぎりになって商品が届きました。大晦日でも配達してくれる通販は便

「PAPAGO!」ドライブレコーダーの取付け

あと数日で2017年も終わり。思い起こせば今年もいろんなことがありまし

RAW VINTAGE スプリング
トレモロのスプリングをRAW VINTAGEに変えてみた

最近よく利用するサウンドハウスから、クリスマスプレゼントが届きました。

→もっと見る

PAGE TOP ↑