熊本県でアクセス解析、集客型ホームページ制作会社 株式会社クロコロール

お問い合わせ

MENU

Kuroko Blog

クロコブログ

本願寺人吉別院様の実績を追加しました。

こんにちは、クロコのケンです。
本日は本願寺人吉別院様の実績追加のお知らせです。

本願寺人吉別院とは

鎌倉時代から明治時代まで、肥後国球磨地方を統治した相良藩は、代々にわたり真宗の教えを禁じました。相良藩による念仏禁制(浄土真宗禁制)は360有余年もの間続けられました。明治に入りようやく解禁となり、その浄土真宗解禁第一号のお寺が「本願寺人吉別院」です。

制作で難しかった点

一番難しいと感じたのは別院案内のページの”ツールチップ”でしょうか。
人吉隠れ念仏の里巡りマップの数字上にマウスカーソルを乗せてみてください。吹き出しが表示されると思います。おまけにクリックすると詳細記事まで飛びます。このような「マウスオーバーするとテキストが表示される」表現をみなさん一度はどこかのサイトで見たことがあるのではないでしょうか。これがいわゆる”ツールチップ”です。
今回はツールチップを解説してみたいと思います。

ツールチップを解説

HTMLとCSS

まずはHTMLとCSSです。

HTML

CSS

地図全体はID「meguriMap」で定義し、数字のアイコンデザインはクラス「mapIcon」、吹き出しがクラス「tooltip」になります。(吹き出しに個別にIDを付与してるのは文字数が各々違うため個別にwidthを指定したかったからです。やり方次第では必要無いかと思います。)

アイコンを適切に配置する

数字アイコンを各々適切な位置に配置するために各アイコンにIDを付与し、共通のクラス「mapIcon」にposition: absolute;を設定、基準点としてID「meguriMap」にposition: relative;、を設定してます。
そして各アイコンIDにtopプロパティとleftプロパティで位置を指定。

吹き出しを作るには…

続いて吹き出しのCSSが以下になります。

疑似要素で吹き出しの三角部分を表現しています。
ちなみに吹き出しを作るにはCSS ARROW GENERATORというジェネレーターが便利です。

jQuery

jQueryのコードが以下です。

wordpress環境ではない場合「jQuery」を「$」で置換して以下のコードでも動くと思います。

ざっと見て「呪文かよ…」と思う方もいるかもしれませんが一行ずつ解説していきましょう。
まず2行目、吹き出しは通常時は非表示なので一度隠します。
3行目から8行目が数字アイコンにマウスオーバー時の処理、9行目以下がマウスアウト時の処理です。
まずはマウスオーバー時の処理から。4行目で何番目のアイコンにマウスオーバーしたか数値を取得し変数num_linkに代入します。。
5行目、$(“.tooltip”).eq(num_link) で変数num_link番目の吹き出し(.tooltip)を取得しそれをフェードインで表示します。(例. 数字1のアイコンにマウスオーバーしたら1番目のクラス「tooltip」が表示される。)
さらにCSSメソッドでどの位置に吹き出しを表示するかを決定します。ここで使われている「this」は3行目の「a.mapIcon」でありpositionメソッドは「親要素からの相対的な距離」を取得します。

再度HTMLを見てみましょう。

「a.mapIcon」の親要素の親要素、ID「meguriMap」にposition: relative;、「a.mapIcon」にposition: absolute;を指定してアイコンの位置を決めてるため、「a.mapIcon」の親要素「.tooltipWrap」の位置は「a.mapIcon」と同じ位置になります。
すなわちjQueryコードの6行目から7行目は「アイコンの位置から相対的にどの位置に吹き出しを表示するか」ということになります。
それを踏まえた上で吹き出しの縦位置を「(アイコンの位置)- 55px」、横位置はアイコンの中央に表示するために多少ややこしいですが「(アイコンの位置) + (アイコンの幅の半分) – (吹き出しの幅の半分)」と指定します(画像参照)。

最後にマウスアウト時にはマウスオーバー時と同様の速度で吹き出しをフェードアウトさせます(9行目から11行目)。

制作を終えて

HTMLとCSSだけでも見栄えのいいサイトを作ることはできますがjQueryを使うと表現の幅が広がります。
今後も実際のサイト制作で使ったCSSやjQueryのテクニックを紹介していきますね。

The following two tabs change content below.

クロコのケン

株式会社クロコロールで主にコーディングを担当しています。 まだまだ見習いの身です…
内容がよかったら、シェアをお願いします!

サイドお問い合わせ
サイドお問い合わせ
サイドお問い合わせ

人気記事

カテゴリー