Diver(ダイバー)の入力補助「ポップアップ」の機能と挿入のコツ

Diver(ダイバー)では記事中に「ポップアップ」っという機能を挿入することができます。

ポップアップとは、画像やテキストをクリックした画面上に別の画面が立ち上がる機能です。

ポップアップ機能があると小さな画像から大きな画像を画面いっぱいに表示できたり、テキストが多くなっても別の画面で大きく表示することができるので見やすいです。

クルミ
ポップアップをあまり使う機会がなかったのでいじってみました。

Diver(ダイバー)の入力補助「ポップアップ」とは

ここで言うポップアップとは、ウェブサイトにアクセスしたときに自動的に立ち上がるものではなく、クリックすると画面上に別の画面が立ち上がる機能の事です。

アプリやサイトへアクセスしたときに表示されるものではありません。

画像やテキストをクリックすればポップアップ画面が立ち上がる機能が、DIVER(ダイバー)では入力補助で実装でき、プラグインが不要で挿入できます。

ポップアップを使うメリット

メリット
  • 画面を大きく表示できる
  • 見やすい(ユーザビリティ重視)
  • 目立たたせやすい

Diver(ダイバー)の入力補助「ポップアップ」の一番のメリットは画面を大きくできることです。

小さくて見にくい画像もウェブサイトのサイズに関わらず大きく表示できるので、ユーザービリティを重視した記事を作ることができます。

ポップアップを使うデメリット

デメリット
  • 操作に手間がかかる
  • ポップアップできるか見た目で分からない
  • 画像は調整が必要
  • HTMLをいじらなければならない

ポップアップのデメリットは、ポップアップウィンドウを表示する操作や閉じる手間が必要なところです。

また、見た目ではポップアップできるか判断できる要素がありません。

ポップアップウィンドウの大きさは画面全体に表示されるので、画像などはデカすぎず、見やすいサイズ調整が必要になりそうです。

Diver(ダイバー)の入力補助「ポップアップ」の使い方

入力補助「ポップアップ」を選択後

ポップアップ挿入画面を表示

DIVER(ダイバー)のポップアップ挿入画面

リンクコンテンツ記事中に表示される部分です。
テキストや画像を設定してください。
表示コンテンツポップアップで表示される部分です。
リンクをクリックしたときに表示する内容を設定します。

ポップアップではテキストはそのまま表示できます。

リンクコンテンツや表示コンテンツに画像を挿入する機能は備わっていません。

ポップアップで画像やリンクを表示するには表示させたい場所にHTMLを入力する必要があります。

Diver(ダイバー)の入力補助「ポップアップ」の挿入のコツ

ポップアップの挿入のコツ
  • 画像のリンク先は「なし」
  • HTMLは一度挿入したものをコピペ
  • HTMLで編集した方が表示不良がない

私がやってみた感じ、このような感じでポップアップを表示させる方がやりやすかったです。

画像のリンク先は「なし」

画像のリンク先は「なし」に設定しないと画像がうまく表示されません。

画像が二重に表示されたりします。

HTML挿入時は一度挿入したものをコピペ

ポップ画面表示前

画像挿入後

HTMLで表示

<img src="https://kikkakeswitch.com/wp-content/uploads/2023/08/pop-up-500-diver.jpg" alt="DIVER(ダイバー)ポップアップ例" width="500" height="330" class="aligncenter size-full wp-image-6705" />

ポップアップにコンテンツを表示させるとなるとHTMLでの挿入が必要です。

HTMLと聞くとちょっと戸惑いますが、そこは大丈夫。

ポップアップに画像を挿入する場合、一度、画像を挿入して画像のHTMLを表示後、ポップアップ画面に挿入することで対応できます。

テキストタイプ

クリックするとポップアップウィンドウが立ち上がります。

Diverで表示するポップアップイメージ画像

DIVERのテキストからのポップアップ画面

画像タイプ

クリックするとポップアップウィンドウが立ち上がります。

ポップ画面表示前

DIVER(ダイバー)ポップアップ例

HTMLから挿入した方が表示不良がない

Diver(ダイバー)でポップアップを色々といじってみたのですが、入力補助のポップアップ挿入画面からは画像をリンクテキストに挿入すると表示が変になりました。

上手くいかない場合は、一旦、適当なポップアップを挿入後、HTML表示で編集した方が良いかもしれません。

Diver(ダイバー)の入力補助「ポップアップ」のまとめ

ポップアップのまとめ
  • HTMLを編集する必要がある
  • HTMLは一度挿入後コピペでOK
  • 画像のリンク先は「なし」
  • リンクテキストに画像を設定する場合はHTMLから編集した方が良い
  • ポップアップかどうかは分かるように装飾した方が分かりやすい

Diver(ダイバー)のポップアップは使い方次第で色んな表示ができます。

HTMLで編集しないとやや表示が変になる部分がありますが、見やすい記事装飾として色々カスタマイズしてみると面白いです。

ポップアップを使って良いアイデアを思いついてみてください。


ハイスペックテーマ「Diver(ダイバー)」は安く買える!?

サーバー契約をするとワードプレスの有料テーマ「Diver」がお得に買えます。

ロリポップ×Diver




お名前.com×Diver

さらに独自ドメインと同時申込みで、ドメインの初年度登録料が実質0円でお得。




エックスサーバー×お友達紹介



友達紹介プログラムでエックスサーバーを契約すると12か月契約で5,000OFF

契約期間に応じて最大1万円OFF

下記のボタンからエックスサーバーを契約するとお友達紹介プログラムが適用され、契約料金が割引きされます。

エックスサーバーのキャンペーン(不定期)と併用するとさらにお得です。

テーマを安く購入するよりもサーバー契約でお得にDIVERを始められます。

スポンサーリンク
このblogはワードプレスのテーマ「DIVER(ダイバー)」を使っています。
DIVERのテーマイメージ

WordPress(ワードプレス)のテーマで最初に手にしたのは「DIVER(ダイバー)」でした。

DIVER(ダイバー)を一言でいうと、カッコいい!!最初は見た目で選びましたが、洗練されたデザインに、多彩でハイスペックな機能は何年使っても飽きません。 コンテンツが増えるほどカスタマイズ性がアップし、サイトの構築が楽しくなる、そんなテーマです。常にバージョンアップを欠かさない向上心のあるテーマと共にサイトを長く大切に育てられます。 長年愛用できるハイスペックで高機能なテーマ「DIVER(ダイバー)」は、一度使うともう手放せません。

代表コンテンツ
おすすめの記事
スポンサーリンク