【Diver入力補助】「ポップアップ」で作れるデザインと使い方

このページでは、Diverの入力補助機能の1つ「ポップアップ」で作れるデザインを紹介します。

「Diver」の導入を考えている方は参考にしてみてください。

Diverで作れるポップアップのデザイン

ポップアップとは、画像やテキストをクリックした場合に、その画像、または別のテキストを飛び出させる機能のことを指します。

画像を拡大させたい場合や、少し長い文章を省略しておきたい場合に有効です。

Diverのポップアップを使えば、設定画面で文字や画像を入力するだけで簡単にポップアップを作ることができます。

例1:テキストのポップアップ

もっと詳しく知りたい方はこちらをクリックしてね

これがポップアップの機能です!
例2:画像のポップアップ

ポップアップの作り方

ポップアップの作り方は、「入力補助」の「ポップアップ」画面で、「リンクコンテンツ」と「表示コンテンツ」を入力して、画面右下の「挿入」ボタンをクリックするだけです。

リンクコンテンツはポップアップする前の文字や画像のことで、「表示コンテンツ」はリンクコンテンツをクリックした時に飛びだす文字や画像を指します。

画像をポップアップとして設定したい場合は、リンクコンテンツと表示コンテンツに次のようにタグで囲った形式で挿入する必要があります。

<img src="http://naoya-ono.com/diver/wp-content/uploads/2019/09/diver-300x300.png" alt="" width="300" height="300" class="size-medium wp-image-271 alignleft" />

最強のWordPressテーマ「Diver」

Diverを使えば、SEO対策はもちろん、美しくカッコいいサイトがいとも簡単に作れます。「サイト回遊率を上げたい」、「直帰率を下げたい」、「アフィリエイトで稼ぎたい」といった人に、とてもオススメのテーマです。一度購入すれば、複数のサイトで利用でき、また、サポートは無制限なのでWordPressを使ったことが無い人でも安心して利用できます。