*

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

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

関連記事

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

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

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

記事を読む

ドロワーメニュー

スマホランディングページに最適なドロワーメニュー

ショップサーブのスマホページにドロワーメニューを取り付けるために大奮闘していました。というのも、理想

記事を読む

Youtube

動画の再生は可能か?(埋め込み手順)

ショップサーブでは、トップページや商品ページへの動画の貼り付けは、他のサービスに比べると、比較的簡単

記事を読む

自動表示

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

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

記事を読む

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

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

記事を読む

電話予約

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

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

記事を読む

ポデローサを知らなかった

EC CUBEがFTPでうまくアップロードできないときは「Poderosa」を使おう

EC CUBEをzipファイルでダウンロードして解凍。2000個以上のファイル群です。FFFTPでア

記事を読む

サーバーエラー

CSV編集CGIがない

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

記事を読む

CS-CART

新種発見か?レスポンシブ対応CSカート

サーバーにインストールして使うCS-CARTというカートプログラムを発見。 レスポンシブ(端末

記事を読む

打ち消し線

メーカー小売希望価格や通常価格に打ち消し線を引く(CSS)

打ち消しと言えば<s>だったのですが、今はCSSで書きます。 この画像のよ

記事を読む

Adsense

Adsense

ワードプレス
サブディレクトリにインストールしたwordpressをルートディレクトリに表示させる方法

今、自作ネットショップをwordpressに移行しようと奮闘

リアルのセミナー
ネット副業希望者にもおすすめ。セミナーはリアルに限る!

ショップサーブに本店サイト、ヤフーショッピングに支店、それ以外

固定費0円。手数料3.6%のみ。オンライン・クレジット決済の新スタンダード

最近、あるASP(ネット通販運営システム)から秘密の?ダイレ

リファラル採用
ECサイトのパート・アルバイト採用は低コストなリファラル採用

リファラル採用(Refarral recruitment)とい

送料を安くする
灯台下暗し!?送料を普通に安くする方法

個人事業主として契約して以来、「安いから」という理由で使い続けてい

→もっと見る

PAGE TOP ↑