*

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

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

関連記事

EC CUBEはバージョン2.13がオススメ

過去にインストールして試してみたCMSは数知れず。Movable Typeに始まり、XOOPS、Dr

記事を読む

no image

まだまだ売れるホームページビルダー20!

「通販サイト作成 ホームページビルダー20」というキーワードでご訪問。 ホームページビルダーっ

記事を読む

レスポンシブ・ウェブ・サイト

レスポンシブ・ウェブ・サイトの仕組み

もっともレスポンシブ・サイトを作りやすいのは、コンテンツがデータベースに記録されているケースですね。

記事を読む

yahooトップテンプレート

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

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

記事を読む

自作ショップ常識

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

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

記事を読む

バリエーション

自作ページにバリエーションを設置した

「ショップサーブに自作ページを作ってカートは設置したが、バリエーションの選択肢がないので動作しない。

記事を読む

CSVファイルのカンマを置換

CSVファイルを変な区切り文字に変換する方法

エクセル(今回はOpenOffice)を使えば、任意の区切りでCSVファイルを作れると思ったらできま

記事を読む

最強のメルマガCGI

メルマガCGI、こんなに素晴らしい最強のCGIがあったのを忘れていた・・・

2018年からの傾向なんですが、通販システムを借りているショップサーブ(運営はEストアー)が、顧

記事を読む

たたりなし

CMS・・触らぬ神に祟りなし

「触らぬ神に祟(たたり)なし」とは、『かかわり合いさえしなければ、余計な災いを受けることもない。』の

記事を読む

生き残り

WEB制作業が生き残る方法はあるのか

今から15年前の2000年あたりでしょうか。HP制作業が一番儲かった時期は。その後、「猫も杓子もホー

記事を読む

Adsense

Adsense

サポートの品質
サポートの品質で企業の正体がバレてしまう。

ネットショップ1店舗の引っ越し先として検討していた某社。気にな

簡単に取れて稼げる資格
簡単に取れて稼げる資格

税理士の資格を取れば税理士として商売ができるけど独学では難しい

固定費0円
クレジット決済手数料が安い・固定費が無料や安いサービス5選

あっちこっちにネットショップを作っていると大変です。ある通販サ

5つの鉄則
ネットショップ成功の秘訣5つの鉄則

ビジネスとはあまり関連のない教育ジャンルで、とてもいい記事があ

スマホ対応レスポンシブ化
コーポレートサイト(会社ホームページ)のレスポンシブWEBデザイン化で儲ける方法

今ではほとんどの企業やお店がウェブサイトを持っているのは周知の

→もっと見る

PAGE TOP ↑