ちょっとした情報を見せたいとき、わざわざページ遷移させる必要も無いんじゃないかと思い、作ってみました。

SPAっぽくなり、先進的な感じがするので個人的には好きです。同じページ内で動いているので、このページとリンク先の関連性の高さを感じてもらえるのではないかと思います。

下記リンクを押してみてください。
Wondersブログの過去記事01
Wondersブログの過去記事02
モーダルでiframeを利用してリンク先が読み込まれます。

リンクはaタグで設置しているので、JavaScriptが有効でない場合にもちゃんとページ遷移されます。

iOSのSafariの挙動を見てみたのですが、今回の実装は逆に不便になってしまった感が否めないですね。PCユーザー、またはSP版Chromeユーザーに対しては有効ではないかな?と思います。

実用的かどうかは別として、今後も「あったらどうだろう」を目に見える形にしていきますー!

※この手法は、iframeを用いています。ブラウザ上の制約のため、別ドメインのリンクでは動作させることができません。同ドメイン内のページのみ表示させることができます。サブドメイン等でも動きません!ご注意ください。

※新しいものを考えたつもりでしたが、WordPressプラグイン「Inline Preview」も同様の仕組みを使っているようでした(;_;)

< Wondersブログへ戻る
close閉じる