注目度の高い記事
【Diver入力補助】ポップアップ機能を簡単に使いこなす方法

 

山本
今回は、Diver のポップアップ機能について解説していくよ!

わかば
はい、お願いします

 

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

1.Diver のポップアップ機能の呼び出し方

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

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

Diver の入力補助機能とは

↓   ↓   ↓

ポップアップ機能の使い方

 

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

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

 

2.Diver のポップアップ機能の使い方

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

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

 

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

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

 

山本
下のリンクをクリックして確認してみましょう

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

ここが表示コンテンツです

 

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

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

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

わかば
あーなるほど
画像の部分は、HTML で入力するってわけですね

山本
その通り!

 

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

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

クリック

ここが表示コンテンツです
ここが表示コンテンツです

 

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

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

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

 

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

リンクコンテンツ(クリックしてください)

表示コンテンツ

 

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

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

わかば
ポップアップ機能の使い方はわかったんですけど
HTML の入力が難しくてうまくできないんですけど...

山本
確かにそうだよね!
じゃあ簡単に HTML を入力する方法を教えてあげるよ

 

3.ポップアップに簡単に HTML を入力する方法

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

 

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

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

 

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

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

 

やり方を解説します。

 

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

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

 

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

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

 

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

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

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

 

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

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

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

わかば
おーなるほどー!!
これなら私でも簡単に画像を設置できそうです!

山本
HTML の直接入力はちょっとハードルが高いもんね

 

さいごに

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

 

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

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

 

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

  • ポップアップ機能の呼び出し方
  • ポップアップ機能の使い方
  • ポップアップに HTML を簡単に入力する方法

 

わかば
ポップアップ機能を使うだけで、ブログがおしゃれに見えちゃいますね!

山本
そうだよね!
「ここを見てもらいたい!」っていうポイントに使いたい機能だね

 

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

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

 

ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で利用が可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事