ネットサーフィン中に、以下のような難しい専門用語がずらっと並んだ文章に出会った時、あなたならどうしますか?昨今のWebデザインでは、WebアクセシビリティやWebユーザビリティに考慮し、セマンティックに情報設計されるべきとされています。意味が分からなくて読み飛ばしてしまうかもしれませんが、必死に理解しようと思ってページを訪れた読者はまずググりますよね。ググったらどうなるでしょうか。この文章があったページに訪れた読者は、Googleの検索結果の中から、その専門用語に特化したページを閲覧し始めることになります。その後者の記事のほうが読者にとって有益な記事であった場合、読者はそちらを起点に調べ物を始めてしまいますよね。元の記事のタブは開かれたままでも、コレは実質上の離脱になってしまいます。タグを使おうスマホで効かない時まとめ専門用語の説明文がポップアップで現れるではこちらの場合はどうでしょうか。昨今のWebデザインでは、Webアクセシビリティ障がいを持つ人々を含めた「誰でも」がWebを使用できることやWebユーザビリティ特定のユーザーが、特定の利用状況下でWebを使用する時の使いやすさに考慮し、セマンティックにWebサイトが持つ意味をコンピュータがわかるように情報設計されるべきとされています。ググろうと思ってマウスカーソルを合わせると、難しい言葉の意味がポップアップで表示されます。スマホでは単語にタッチそうすると読者はその記事に集中して読むことができ、読んでいた記事からの離脱を可能な限り防ぐことができます。あのwikipediaでも「ページのプレビュー」機能としてわざわざリンクを踏まずとも概要情報を得られる仕組みとして導入されていますね。今回はこの説明文ポップアップのパーツを作成しましたので、使い方をご紹介したいと思います。専門用語の説明文ポップアップはじめに言っておきますが、プラグインを導入する必要はありません。このページ内にあるコードをコピーして、テキストを書き変えるだけで終了です。コピペで終了です!よく使う場合はこのページをブックマークしておくことをお勧めします。コードをコピーする下記のコードをコピーします。管理画面を開き、テーマのカスタマイズ画面からstyle.cssにコピーしたコードを貼り付けます。クラス名の部分は、他と被りそうであれば変えてしまっても構いません。「テキストエディタ」画面にコピペします。テキストを書き換える説明を加えたいテキストの部分と、説明文テキストを書き換えたら完了です。色を変えたい破線の色や「?」マークの背景色を変えたい場合は、下記コードのコメントのある場所を変えましょう。}}初期値はグレーですが、変更する場合は記事を読むのに邪魔にならない色を選ぶのがおすすめです。貼り付けるコードを、下記から引っ張ってきてください。これで「?」マークがない状態になります。}}ポップアップの幅を変えたいHTMLに貼り付けるコード中の「200px」と指定してある部分の数値を自由に変えてください。タグを使おう基本的に難しい単語や用語の説明に使えますが、1点だけ注意事項があります。タグを使うことを推奨します。言うとそれが適切なマークアップであるから。要はより検索エンジンにて理解されやすい書き方がということですね。ちなみにこれらのタグを使って説明を加える場合はこんな感じになります。HTMLは、Webサイトでテキストを記述するための言語です。Language">HTML</abbr>は、Webサイトでテキストを記述するための言語です。インターネットを楽しむにはLAN環境が必要です。Network">LAN</acronym>環境が必要です。マウスカーソルを合わせると、ブラウザの機能でデフォルトで「その単語が何の略なのか」を表示する仕様になっています。逆に何かの略でもないのにこのタグを使うのは避けましょう。難しい単語を自分の言葉で説明したい時には、この記事でご紹介したパーツを使うことをお勧めします。タグはiPhoneなどのスマホでは機能しませんのでご注意を。スマホで効かない時HTMLコードの「touchstart」が効いていないことが原因だと考えられます。wordpressの投稿画面は、テキストエディタからビジュアルエディタに切り替えるタイミングで一部のコードが勝手に書きかえられてしまうという仕様になっています。この仕様をキャンセルすれば、タグを変わるのを防ぐことができます。具体的には、「テキストエディタからビジュアルエディタに切り替えるタイミングでタグに全てのHTML属性を許可する」という記述をfunctions.phpに追加します。);}?>まとめ難しい単語に説明文のポップアップを加えることで、サイトの離脱を可能な限り防ぐ方法をご紹介しました。Designer野うさぎ会社から脱走して野に放たれたフリーランスのウサギ。Web制作会社に5年間勤務し、エンジニアとして独立。ブログでWeb制作、フリーランスの働き方、ガジェットレビューなどの記事を書いてます。