【Diver入力補助】ポップアップ機能を簡単に使いこなす方法

 

 

ワードプレステーマ Diver の、ポップアップ機能の使い方について解説します。

１．Diver のポップアップ機能の呼び出し方

Diver のポップアップ機能は、ワードプレス投稿画面で

入力補助 ＞ ポップアップ と選択することで使うことができます。

↓　　　↓　　　↓

 

こちらが、ポップアップ機能の実際の設定画面です。

 

２．Diver のポップアップ機能の使い方

ポップアップ機能の設定項目は、以下の２つです。

リンクコンテンツ	ブログの投稿画面に表示される部分です。 文章や画像などをここに設置します。
表示コンテンツ	リンクコンテンツをクリックした時に、表示したいコンテンツをここに設置します。

 

説明文を入れてくれてはいますが、初めて使うときは少し戸惑うかもしれませんね。

ということで、実際のポップアップのサンプルを使って動作と内容を確認していきましょう。

 

ここがリンクコンテンツです

 

以下が、このポップアップを表示させるために入力した内容です。

リンクコンテンツが通常のテキストで、表示コンテンツが画像の HTML となっています。

 

では今度は、リンクコンテンツの部分も画像にしてみましょう。

以下のサンプル画像をクリックしてみてください。

 

そしてこちらが入力した内容。

リンクコンテンツも表示コンテンツも、両方共が画像の HTML になっていますね。

 

このように表示コンテンツを、テキストにすることも可能です。

リンクコンテンツ（クリックしてください）

 

このときの表示の入力内容がこちら。

 

３．ポップアップに簡単に HTML を入力する方法

ここまでで、ポップアップ機能の使い方はわかっていただけたかと思います。

 

でも、テキストの場合はいいとしても、画像を設置するときに

普通の投稿画面と違って「メディアを追加」ボタンがありません。

 

画像を使いたいけど HTML の直接入力はちょっと難しい...

そんなときは、一度投稿画面に表示させたHTMLをコピペすれば簡単にできます。

 

やり方を解説します。

 

１ まずは、ワードプレスの投稿編集画面で、ポップアップに使いたい画像を普通に表示させましょう。

 

２ 次に、画面右上の テキストタブ をクリックして、テキストモードに切り替えます。

 

３ すると、画像を表示するための HTML が表示されるので

これをコピーして、ポップアップの入力欄にペースト（貼り付け）すれば画像を表示できます。

 

この時に、画像のリンク先が「なし」の状態になっていないと

ポップアップに設置した時に、正常に表示されないので注意しましょう。

 

さいごに

今回は、Diver の入力補助機能の一つ「ポップアップ」の使い方について解説しました。

 

上で紹介したほかにも、工夫次第で色々な使い方ができる機能なので

あなたのオリジナルのポップアップで、ユーザーに関心を持ってもらいましょう！

 

最後にこのページのおさらいをしておきます。

 

 

注目の記事現役アフィリエイターが Diver をおすすめする７つの理由【もう他のテーマはいりません】

注目の記事Diver の入力補助機能のすべてを徹底解説