*

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

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

関連記事

たたりなし

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

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

記事を読む

HTML編集

ヤフーショッピングの画像やHTML編集方法

ヤフーショッピングは、ショッピングモールなので、と言うと語弊

記事を読む

生き残り

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

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

記事を読む

自分で作成

「自分でネットショッピングサイトを作りたい方」へのアドバイス

「ネット販売がしたい。」というのではなく、「ショッピングサイトを作りたい。」という方へのアド

記事を読む

サーバーエラー

CSV編集CGIがない

放置気味の自作サイトのCSVファイルをウェブ上で編集するためのCGIを探してみたところ、意外にないん

記事を読む

EFO

CVRアップのためのEFO5つのテクニック

EFO(エントリーフォーム最適化)のHTML、CSS等の技術情報。 1.入力フォームの拡大 通常

記事を読む

売れてる本の表紙デザイン

売れている本は表紙デザインが秀逸

ショッピングカートを作りたい! APIを使えるようになりたい! マッシュアップサイトを作

記事を読む

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

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

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

記事を読む

モーダルウィンドウ

ページの移動なしその場で子ウィンドウを表示できる「モーダルウィンドウ」

modalは英語で「形式上の」「形態上の」という意味ですが、modal window(モーダルウィン

記事を読む

トップページ

yahoo! shoppingレイアウトが3カラムの場合のトップページのHTMLの編集

幅950pxでレイアウトを3カラムにした場合、サイドナビ180px、スペース10px(✕2)、右側サ

記事を読む

Adsense

Adsense

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

2018年からの傾向なんですが、通販システムを借りているショップサ

事情
一部のネット販売店の実情

最近話したAさんのお話。。。「ネット販売やっています。」というと、

確定申告
2019年確定申告の時期だよ~テキトーな個人的裏(ウラ)話

来ましたか?確定申告のハガキ!1月下旬に来たハガキ、忘れないように

みるみる残高が増える
やれば、銀行口座残高がみるみる増えるヽ(^o^)

銀行口座の残高が増えるって嬉しい! って思いませんか? 思

insta
instagramやるべき店とやるべきではない店(ネット販売)

インスタは一応アカウント持ってますが何年か放置です。当然です。

→もっと見る

PAGE TOP ↑