*

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

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

関連記事

エクセルCSV変換

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

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

記事を読む

たたりなし

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

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

記事を読む

メールフォームCGI

レスポンシブ対応メールフォームCGIを設置した

ショップサーブのメールフォームが気に入らないので、レスポンシブ対応の無料CGIメールフォーム

記事を読む

オリジナルページ

ショップサーブオリジナルページへのカートボタン他

物忘れがひどくなるのは年齢のせい? たま~にHTMLやCGIをいじってページを作るのですが、と

記事を読む

自動表示

ブログの最新記事をトップページに自動表示させる方法(CGI)

ショップサーブはCGIやSSIが使える唯一の通販開業サービスですな。標準で付いている店長ブログこそ使

記事を読む

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

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

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

記事を読む

電話予約

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

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

記事を読む

ヘッダー看板

ヤフーショップのヘッダー画像HTMLの編集方法

開店申請にパスしたなら、とりあえず商品を登録して行くわけですが、ヘッダーを作ってお店らしくしたい人も

記事を読む

ルミーズ配布終了

ルミーズ・ショッピングカートCGI配布終了

http://www.remise.jp/news/20141015.htm フリーショッピン

記事を読む

動画風・・・意味なし

クリック率が高くなる仕掛け(動画風)を作ってみた

動画風バナーというか、「これクリックすると動画が再生される」と思ってしまうバナーです。で、ついクリッ

記事を読む

Adsense

Adsense

アマゾン2018
何でもかんでもアマゾンに出品すりゃ売れるってわけじゃない!?

「アマゾンにやらてちゃって・・・」といったネットショップオーナーの嘆き

コンテンツマーケティング2
コンテンツマーケティング。利用する側から。

今から7、8年前でしょうか。激しく怒ったことがあるんです。

ECサイト
回り回って、結局、ネットショップ(ECサイト)が一番イイネ

ある企業に5年社員として働いて転職した人が言ってました。

SEO Wiz
Googleが称賛したWixのSEO Wiz

2018年5月10日に行われたGoogleの開発者カンファレンス「Go

ネット販売
これからネット販売を始める場合、いろいろ考えることが・・・

このテーマのサイトでこんなことを言うのもなんですが、、、そして、できれ

→もっと見る

PAGE TOP ↑