SIMPLE TOOLTIPS

意外と知っておくと便利なツールチップ。
グローバルメニューをスタイリッシュに表示したい時に英語表記することが多々あるのですが、年齢層高めのユーザーがターゲットの場合、日本語表示も欲しいという声をいただきます。
そんなときにツールチップがあれば、英語表記だけどマウスオーバー時にちゃんと日本語で案内できるので、クライアント様の要件を満たせることが多いです。

みなさまも覚えておくと、ちょっとサイトデザインの幅が広がりますよ。

プラグインを新規追加

まずは、Wordpressにプラグインを追加しましょう。
今回ご紹介するのは「Simple Tooltips」です。

なので、Wordpressのダッシュボードの
「プラグイン」→「新規追加」→右上の検索ボックスに「Simple Tooltips」と入力しましょう。
検索ボックスにSimple Tooltipsと入力しましょう

すると「Simple Tooltips」が表示されますので、
インストール→有効化

をクリックします。

グローバルメニューにツールチップを設定

では早速、このプラグインを使ってグローバルメニューにツールチップを追加しましょう。
現在ご覧の弊社onWEBのサイトでは、グローバルメニューが英語表記となっています。
こちらに日本語表記のツールチップを導入し、ユーザーの利便性を高めたいと思います。

ツールチップ設定

まず、ダッシュボードの左メニューの「設定」→「Simple Tooltips」をクリックします。

設定画面を開きましょう

  • Background Color
  • ツールチップの背景色の変更

  • Text Color
  • ツールチップの文字色の変更

  • Max Width
  • 最大幅の設定

  • Opacity
  • ツールチップの背景透過度の設定

  • Position
  • ツールチップの配置場所

  • Disable On Mobile
  • モバイル時にツールチップを表示するかしないかの設定

  • Menu Selectors (Advanced)
  • グローバルメニューに設定する際にクラス名を指定
    今回の重要なポイントです

背景色や文字色などは、サイトに合わせて設定してください。

では、グローバルメニューにツールチップを使用していきましょう。

まず、ツールチップを入れたい、グローバルメニューのクラス名を確認してください。
※弊社onWEBでは「headMainMenu」になります。
クラス名を確認しましょう
クラス名が確認できたら、上記「Menu Selectors (Advanced)」の項目に先ほどのクラス名を記入ください。
「.」を付けたままクラス名を入力
その際、「.」を入れるのをお忘れなく。

グローバルメニューの設定

ツールチップ側の設定が完了しましたら、次はグローバルメニューの設定です。
ダッシュボード左メニューから「外観」→「メニュー」をクリック。

そこで、右上の「表示オプション」をクリックし、「タイトル属性」・「CSSクラス」にチェックを入れます。
タイトル属性とCSSクラスにチェックを入れましょう

次にメニュー構造のメニューを一つ開き、以下の項目を入力しましょう。

  • タイトル属性
  • ツールチップに表示するテキストを入力

  • CSS Class
  • 「tooltips」と入力

タイトル属性とCSS Classに入力します

最後に・・・

以上で設定が完了しました。
ちゃんとグローバルメニューにツールチップが表示されるか確認してみてください。

このような簡単な設定で、グローバルメニューにおしゃれなツールチップが入りました。
これでまたデザインの引き出しが増えましたね。

投稿者プロフィール

kinukawahiroyasu