*

バナー画像を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サイト作成には、バナーやボタンなどが必要です。 ホームページビルダーには「ウェブアートデ

記事を読む

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

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

記事を読む

スマホの画面

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

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

記事を読む

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

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

記事を読む

php工房

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

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

記事を読む

画像を回り込ませる方法

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

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

記事を読む

dreamweaver cc

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

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

記事を読む

無料テンプレート

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

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

記事を読む

エックスサーバー

レンタルサーバーを選ぶ

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

記事を読む

ファイルを開く

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

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

記事を読む

ad

Message

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

ad

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑