*

スマホサイトで新規ウィンドウを立ち上げずその場でちびウィンドウ(小窓)

公開日: : 最終更新日:2018/09/08 CSSやHTML、CGI

この記事は約5分で読むことができます。

target=”_blank”

パソコンサイト用では、何の疑問もなく多用するリンクのターゲットですが、これをスマホでやると元のページに戻りづらくなるんですよね。スマホサイトでは新規ウィンドウは使わないのがベターです。

クリックで小窓を出す方法はJava Scriptを使った方法がポピュラーですが、スマホでは効かないんです。次のようなタグですね。

<a href=”aaa.html” onclick=”window.open(this.href, ‘mywindow6’, ‘width=400, height=300, menubar=no, toolbar=no, scrollbars=yes’); return false;”>小窓開け</a>

これを解決するのが、モーダルウィンドウという便利なやつです。

ただ、モーダルウィンドウはjQueryを使うことが多いので、ショップサーブユーザーとしては避けたいのです。なぜなら、Java Scriptを本文内に埋め込むと、正体不明のエラーが出ることがあるからです。

そこで、ちょーありがたいことにCSSだけでモーダルウィンドウを実現してくれるやつがあるんです。

これ→CSSだけでモーダルウィンドウ(もちろん無料)

1.ダウンロード&解凍

ZIP形式のファイルをダウンロードして解凍。その中から「modal.css」だけ取り出してサーバにアップ。本文にHTMLタグをコピペするだけで使えてしまう優れものです。サーバは、「/hpgen/」内に放り込むのが良いです。

2.head内にタグ

スマホサイトのヘッダ内にCSSを読み込むタグ。

<link rel=”stylesheet” href=”/hpgen/modal.css”>

ショップサーブでは、オリジナルナルページやパーツを使う場合は、「hpgen」内にファイルを置くのがポイントです。「smp」フォルダなどもありますが、ここにCSSファイルやHTMLファイルなどを置いても表示されません。

モーダルウィンドウ

ステップ3 小窓を出すリンク

モーダルウィンドウ(小窓)を出したいところに、「リンク」と言いたいところですが、リンクではなく次のタグを書きます。

<label for=”modal-trigger”>小窓よ開け</label>

これだけだと普通の文字に見えるので、リンクカラーをつけると良いですね。<span style=”color:#0044CC”>キスマークいいね</span>という感じです。

ステップ4 小窓用コンテンツ

最後に、小窓に表示させる内容(コンテンツ)を本文のどこでも良いので挿入します。これは、リンクがクリックされたときに表示されるだけで、通常は隠れて見えません。

<div class=”modal”>
<input id=”modal-trigger” class=”checkbox” type=”checkbox”>
<div class=”modal-overlay”>
<label for=”modal-trigger” class=”o-close”></label>
<div class=”modal-wrap”>
<label for=”modal-trigger” class=”close”>&#10006;</label>
<p>ここにコンテンツ(HTML何でもOK)サンプルでは画像を表示させてます。</p>
</div>
</div>
</div>

なんとシンプルで簡単なんでしょう。楽しくなっちゃいますよね。サンプルはスマホサイトだけで表示されるようになっているのでチェックしてみてください。(パソコンでも表示可能なので、ブラウザの幅を狭めておためしを。)

一応動画アニメーションもオマケ。

モーダルウィンドウ

ショップサーブくそや!」と思うことは多々あるのですが、こういった小回りがきく部分があるので、今のところ不満と相殺中。


Adsense

関連記事

レスポンシブWEBデザイン

レスポンシブ・デザインへの移行に際し学んだこと(その1)

自分のサイトをスマホで見た時の残念感・・・なんとかしたい。でもやる気ない・・・そんなこんなで数年が経

記事を読む

no image

全部の商品ページに同じパーツを表示せる方法

ショップサーブのような開業サービスを使うメリットは、何かと「一括」処理ができる点です。例えば、商品ペ

記事を読む

カスタマイズ

WEB MART(KentWeb)カスタマイズ

WEB MART CGIの続き。購入は最低限のスッキリ3ステップなので、カスタマイズもしやすく、かつ

記事を読む

自作ショップ常識

自作ショップ構築ファイル構成の考え方

自作構築をする場合、知らないと後で「トンデモない事態」を引き起こしかねないががファイルの構成。(商品

記事を読む

トップページ用テンプレート

ヤフーストア・トップページ用のテンプレートを作ってみた。

ヤフープロフェッショナル出店は、HTMLが理解できて使える人にとっては、ページを作り上げる楽しみがあ

記事を読む

エクセルCSV変換

もしもドロップシッピングのCSVファイルの列にあるカテゴリーを小分けにする方法

「そんなこと誰が知りたがっているのか!?」というような内容ですが、意外にいるかも? というわけ

記事を読む

電話予約

「ご予約はお電話で?」「ご予約のご変更はお電話で?」はっ????

※http://support.biglobe.ne.jp/ask/konzatu.html

記事を読む

学んだこと

レスポンシブ・デザインへの移行に際し学んだこと(その2)

もうやり始めると止まらない(><)。HTML5とCSS3?レスポンシブWEBデザインをち

記事を読む

フォームメールで売上UP

高機能フォームメールを活用して売上アップ

問い合わせのフォームも、使い方によっては受注数のアップにつながるケースがあります。フォームから受注と

記事を読む

yahooトップテンプレート

yahoo! shoppingトップページ用HTMLテンプレート

yahooさんが用意してくれてもいいのに、無いのがトップページ用のカテゴリー一覧のテンプレート。無い

記事を読む

Adsense

Adsense

ショップサーブがレスポンシブ・デザインに対応していない常識的な3つのワケ

レスポンシブWEBデザインとは、1つのページを作るだけで「PC

B2B
BtoBビジネス入門エッセイ「もっと儲かりまっせ」

もっと儲かりまっせ。 15年近く前の本です。ドッグイヤー

ショップサーブ・CSSカスタマイズ
最初にやっておきたい、ショップサーブ・スマホサイトCSS基本カスタマイズ5ヶ所

ショップサーブのスマホ・テンプレートですが、個人的にはイマイチ・・

park終了
9月30日Eストアー「park.jp終了」の裏事情!?と通販サイトの二極化

ショップサーブにとっては、棚ボタ的な広告サービスだったEストア

商品写真
商品のメイン写真にはベネフィットのベストポイント・イメージを

「バナーを作らねば・・」ということがあって、度々参考にするショップサー

→もっと見る

PAGE TOP ↑