【wordpress】テキストにポップアップを設置してサイト離脱を防ぐ方法｜野うさぎブログ
Web制作

【wordpress】テキストにポップアップを設置してサイト離脱を防ぐ方法

 

野うさぎです。

突然ですがあなたに質問です。ネットサーフィン中に、以下のような難しい専門用語がずらっと並んだ文章に出会った時、あなたならどうしますか？

昨今のWebデザインでは、WebアクセシビリティやWebユーザビリティに考慮し、セマンティックに情報設計されるべきとされています。

意味が分からなくて読み飛ばしてしまうかもしれませんが、必死に理解しようと思ってページを訪れた読者はまずググりますよね。

ググったらどうなるでしょうか。この文章があったページに訪れた読者は、Googleの検索結果の中から、その専門用語に特化したページを閲覧し始めることになります。

そしてもし、その後者の記事のほうが読者にとって有益な記事であった場合、読者はそちらを起点に調べ物を始めてしまいますよね。

元の記事のタブは開かれたままでも、コレは実質上の離脱になってしまいます。

この記事はこんな人向け
  • サイトの離脱率が高くて悩んでいる方
  • 読者のセッション時間が短くて悩んでいる方
  • より読み込まれる記事を作りたい方

専門用語の説明文がポップアップで現れる

ではこちらの場合はどうでしょうか。

昨今のWebデザインでは、Webアクセシビリティ障がいを持つ人々を含めた「誰でも」がWebを使用できることやWebユーザビリティ特定のユーザーが、特定の利用状況下でWebを使用する時の使いやすさに考慮し、セマンティックにWebサイトが持つ意味をコンピュータがわかるように情報設計されるべきとされています。

ググろうと思ってマウスカーソルを合わせると、難しい言葉の意味がポップアップで表示されます。※ スマホでは単語にタッチ

そうすると読者はその記事に集中して読むことができ、読んでいた記事からの離脱を可能な限り防ぐことができます。

あのwikipediaでも「ページのプレビュー」機能としてわざわざリンクを踏まずとも概要情報を得られる仕組みとして導入されていますね。

今回はこの説明文ポップアップのパーツを作成しましたので、使い方をご紹介したいと思います。 

WordPress で使えるブログパーツ 専門用語の説明文ポップアップ

はじめに言っておきますが、プラグインを導入する必要はありません。このページ内にあるコードをコピーして、テキストを書き変えるだけで終了です。

コピペで終了です！

よく使う場合はこのページをブックマークしておくことをお勧めします。

step1:  CSS コードをコピーする

下記のコードをコピーします。

CSS

.popup-desc {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  border-bottom: 1px dotted #ddd;
}

.popup-desc:after {
  content: '?';
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -2px;
  right: -10px;
  background-color: #ccc;
  transform: scale(-50%);
  border-radius: 50%;
}

.popup-desc span {
  display: none;
  font-size: 14px;
  line-height: 1.4;
  min-width: 100px;
  padding: 10px;
  position: absolute;
  bottom: 2.2em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 5px;
}

.popup-desc span:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  bottom: -7.5px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.popup-desc:hover span {
  display: block;
  animation: animShow 0.2s linear forwards;
}

.popup-desc span:hover {
  display: none !important;
}

@keyframes animShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

step2:  CSS コードを style.css に貼り付ける

 WordPress の管理画面を開き、テーマのカスタマイズ画面からstyle.cssにコピーしたコードを貼り付けます。

クラス名の部分は、他と被りそうであれば変えてしまっても構いません。

step3:  HTML コードを使いたい場所にコピペする

下記の HTML コードを WordPress の「テキストエディタ」画面にコピペします。

HTML

<span ontouchstart="" class="popup-desc">難しい単語<span style="width: 200px;">ここに説明文を入れられます！</span></span>

step4:  テキストを書き換える

説明を加えたいテキストの部分と、説明文テキストを書き換えたら完了です。

カスタマイズしたい時

色を変えたい

破線の色や「？」マークの背景色を変えたい場合は、下記コードのコメントのある場所を変えましょう。

CSS

.popup-desc {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  border-bottom: 1px dotted #ddd; // 破線の色
}

.popup-desc:after {
  content: '?';
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  position: absolute;
  top: -2px;
  right: -10px;
  background-color: #ccc; // 「？」マークの背景色
  transform: scale(-50%);
  border-radius: 50%;
}

.popup-desc span {
  display: none;
  font-size: 14px;
  line-height: 1.4;
  min-width: 100px;
  padding: 10px;
  position: absolute;
  bottom: 2.2em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff; // 吹き出し背景の色
  border: 2px solid #ddd; // 吹き出し線の色
  border-radius: 5px;
}

.popup-desc span:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  bottom: -7.5px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd; // 吹き出し線の色
  border-bottom: 2px solid #ddd; // 吹き出し線の色
  background-color: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.popup-desc:hover span {
  display: block;
  animation: animShow 0.2s linear forwards;
}

.popup-desc span:hover {
  display: none !important;
}

@keyframes animShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

 

初期値はグレーですが、変更する場合は記事を読むのに邪魔にならない色を選ぶのがおすすめです。

「？」マークをとりたい

style.css に貼り付けるコードを、下記から引っ張ってきてください。これで「？」マークがない状態になります。

CSS

.popup-desc {
  display: inline-block;
  position: relative;
  margin-right: 10px;
  border-bottom: 1px dotted #ddd;
}

.popup-desc span {
  display: none;
  font-size: 14px;
  line-height: 1.4;
  min-width: 100px;
  padding: 10px;
  position: absolute;
  bottom: 2.2em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border: 2px solid #ddd;
  border-radius: 5px;
}

.popup-desc span:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  bottom: -7.5px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.popup-desc:hover span {
  display: block;
  animation: animShow 0.2s linear forwards;
}

.popup-desc span:hover {
  display: none !important;
}

@keyframes animShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

ポップアップの幅を変えたい

HTMLに貼り付けるコード中の「200px」と指定してある部分の数値を自由に変えてください。

HTML

<span ontouchstart="" class="popup-desc">難しい単語<span style="width: 200px;">ここに説明文を入れられます！</span></span>

注意点

略語の場合は <abbr> 、頭文字をとった略語は <acronym> タグを使おう

基本的に難しい単語や用語の説明に使えますが、1点だけ注意事項があります。それは何かの「略語」に説明を入れたい場合に、より適切なHTMLタグを使ったほうが良いという点
この記事で紹介しているパーツを使ってはいけないわけではないのですが、略語を説明する場合は <abbr> 、 <acronym> タグを使うことを推奨します。

なぜかと言うとそれが適切なマークアップであるから。要はより検索エンジンにて理解されやすい書き方がということですね。

ちなみにこれらのタグを使って説明を加える場合はこんな感じになります。

<abbr>

例： HTMLは、Webサイトでテキストを記述するための言語です。

<abbr title="Hypertext Markup Language">HTML</abbr>は、Webサイトでテキストを記述するための言語です。

<acronym>

例： インターネットを楽しむにはLAN環境が必要です。

インターネットを楽しむには<acronym title="Local Area Network">LAN</acronym>環境が必要です。

 

マウスカーソルを合わせると、ブラウザの機能でデフォルトで「その単語が何の略なのか」を表示する仕様になっています。

逆に何かの略でもないのにこのタグを使うのは避けましょう。難しい単語を自分の言葉で説明したい時には、この記事でご紹介したパーツを使うことをお勧めします。

なお、<abbr> <acronym> タグはiPhoneなどのスマホでは機能しませんのでご注意を。

スマホで効かない時

HTMLコードの「touchstart」が効いていないことが原因だと考えられます。

wordpressの投稿画面は、テキストエディタからビジュアルエディタに切り替えるタイミングで一部のコードが勝手に書きかえられてしまうという仕様になっています。

この仕様をキャンセルすれば、タグを変わるのを防ぐことができます。具体的には、「テキストエディタからビジュアルエディタに切り替えるタイミングでタグに全てのHTML属性を許可する」という記述をfunctions.phpに追加します。

functions.php

<?php
// テキストエディタからビジュアルエディタに切り替えるタイミングでタグに全てのHTML属性を許可する
if (!function_exists('pnd_allow_all_attr')) {
  function pnd_allow_all_attr ($init) {
    $ext_elements = '';

    $target_elements = array('a', 'b', 'base', 'big', 'blockquote', 'body', 'br', 'caption', 'clear', 'dd', 'div', 'dl', 'dt', 'em', 'embed', 'font', 'form', 'h', 'head',  'hr', 'html', 'i', 'img', 'input', 'li', 'link', 'meta', 'nobr', 'noembed', 'object', 'ol', 'option', 'p', 'pre', 'rel','s', 'script', 'select', 'small',  'span', 'strike', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'title', 'tr', 'tt', 'u', 'ul', 'iframe');
    $target_attr = array('*');

    foreach ($target_elements as $target_element) {
      $ext_elements .= ",".$target_element."[".implode('|',$target_attr)."]";
    }

    if (!empty($ext_elements)) {
      if ( !empty($init['extended_valid_elements']) )
        $init['extended_valid_elements'] .= $ext_elements;
      else
        $init['extended_valid_elements'] = trim($ext_elements, ',');
    }

    return $init;
  }
  add_filter( 'tiny_mce_before_init', 'pnd_allow_all_attr', 100 );
}
?>

まとめ

難しい単語に説明文のポップアップを加えることで、サイトの離脱を可能な限り防ぐ方法をご紹介しました。

読者にとって有益で読みやすい記事が、世の中にもっとたくさん生まれますように…！

この記事が役に立ちそうだと感じた方は、是非 SNS なのでシェアをお願いします！

ではではノシ

css html
RELATED POST