Simplicityを少し改造してみた 番外編 part10 外部リンクのアドレスをhoverした要素の付近に表示する

なんでしょうな、毎回毎回パッと見ただけで意味がわかるようなタイトルが付けられないのは(笑)
しかしまぁ、大まかな意味合いはタイトル通りなんです。

既にこのサイトに実装してあるので、気づいた方もおられるのではないかと思うんですが、外部リンク(当サイトでは がついているリンク)をマウスオーバー(hover)すると、そのアドレスが表示されるというものを作ってみました。

気づいてなかった人に向けて: 管理人のGoogle+ ←をマウスオーバー

別に必要な機能ではないんですけれども、どこに飛ばされるのかわからないよりは多少わかったほうが良いかなぁと思ったので付けてみた次第です。

実装するにあたって、テーマ本体のPHPは何もいじりません。jQuery(javascript.js)とcss(style.css、共に子テーマ)に追記するだけです。

こういったものを実装するにあたって、表示はcssでやればいいけどどうやって良い感じの位置にそれを表示させるのかがわからなかったりしますよね。
hoverさせた、そのマウスの位置ってどうやって取得するんだ?って事なんですけども、実はそんなに難しいことをしているわけではないのです。これを応用すれば独自にTipsみたいのを表示するスクリプトもかけたりするかも知れません。
そのあたりをちょっとばかり説明していこうかと思います。

jQueryのhoverを知る

まず、外部リンクであるかどうかを調べるのに最も簡単な方法でよく言われるのは「http」がついているか否かというのが言われます。言われるんですけれども、それって必ずしも自分のサイトのアドレスを相対アドレスで書いているかどうかは不明ですよね?
必ず外部へのリンクをする場合はどうするとわかりやすいかですけれども、ひとつは外部のリンクですと言うclassをつけておくと言うのと、target=”_blank”を入れて、外部リンクは必ず別のウィンドウを開くと言うふうにしておくと言うのをパッと思いつきます。

たいてい外部リンクを付ける時というのは、何かしらの文章の説明であったり、百聞は一見に如かずと言うように、文字で書くのが面倒なので見てくれよって言う場合が多いように思います。なので、今回は外部リンクですと言うclassをつけて、そのclassがある時は外部リンクとせずに、target=”_blank”が入っているかどうかで判断させます。

wordpressで言うと、編集画面でlinkをクリックし、アドレスやら入れた後に「リンクを新ウィンドウまたはタブで開く」にチェックを入れるだけなので、たいていはそのような設定(外部リンクはtarget=”_blank”)にされている方も多いかと思います。

では、外部リンクはどのように取得するかなんですが、これもとても簡単です。jQueryでもcssでもたいてい、

こんな感じで拾えます。意味合い的には、「.articleの中にあるa要素でtarget=”_blank”がついてる要素」と言うことです。しかしながら、これだけだと、場合によってはこれからする処理を適用したくない場合や、外部リンクには何かしら画像なりアイコンをつけるというような処理をされている場合に、そのアイコン等を付けたくない箇所があるかもしれません。例えば、記事の中の画像とかです。

そういった場合には、jQueryに.not()と言うTraversing Methodsがあります。traverseとは、横切るとか(光が)通過すると言うような意味です。ジグザクに走ることもtraverseと言うらしく、スキーの斜滑降とかもトラバースって言うみたいですね。あちこちを転々と移動するというような意味もあって、jQueryのTraversingと言うのは、各要素を検索すると言うような意味合いで使われるメソッドです。

.not()、もう見た目からに否定してますよね(笑)
そう、つまりは、

とすることで、target=”_blank”は持っていても、.not()で否定されたセレクタには適用されません。なのでこんなふうに書いておくことができます。

.not()の中に直接書いても良いのですが、上記ではnoUseSelectorと言う変数を用意して、そこに適用させたくない要素を書いておくことでわかりやすくしています。※ 使わないだったらUnusedだろう?とかというツッコミは各々胸にしまっておくように。

はい、長かったですが、これは前置きです。ひとまず、このようにしてtarget=”_blank”がついているリンクには外部リンクですよとわからせるためのアイコンを付けると言う状態があると言う前提にしておきます(これから説明するスクリプトはアイコンがあってもなかっても動作します。必要なものはtarget=”_blank”のみ)。

上記のスクリプトは、適用したくない要素を除くtarget=”_blank”を持っているa要素の最後尾(append)にfont Awesomeのアイコンを追加すると言う意味合いです。これをうまく流用もできると思うんですが、わかりやすいように別でスクリプトを書いていきます。
上記のスクリプトで既に「適用したくない要素を除くtarget=”_blank”を持っているa要素」と言うのが確定してますので、その部分は流用しますがその前に、該当部をホバーした時に表示させるメッセージ部分を先にhtmlに挿入しておくことにします。

これは、#containerの先頭に.showExUrlを挿入するという意味です。今後はこの.showExUrlに対して色々としていくことになります。

さて本題に戻りまして、hover()なんですが、いわゆるマウスオーバーと、マウスアウトをどのようにすればよいかからまず説明します。と言っても説明するほどのものでもなく、単純に、

と言う事をします。functionが2つ出てきます。まぁ例外があったり、一部それでは動かないという場合もありますが、スイッチオンとオフがあるようなメソッドでは、たいてい最初がtrue(スイッチオン)で後のがfalse(スイッチオフ)の場合が多いです。例外がある場合もあるので必ずそうだと言う感じではなく、ゆるーく、最初がtrueだろ?ぐらいな感じで覚えておいてください。

続きまして、今度はhoverしている時のマウスの位置はどのようにして取得するんだ?と言う所なんですが、これもまたそんなに難しいものではなく、

こんな感じで、最初のマウスオーバー(hover)の時にfunction(e)とeを入れます。eはeventのeでここは何でも構いませんが、その後のpageXやpageYは、何の?と言うことになるのでfunction()の中に入れた文字がその「何の?」に当たるというわけです。
マウスを何かの要素にhoverした時の座標がわかれば、先ほど#containerの先頭に用意しておいた.showExUrlの位置をcssで動かせば良いわけで、以下のように書けます。

意味合いとしては、hoverしている時の座標が判明したので(x,y)、.showExUrlのcssでtopの値を、その座標から-80pxして決めると言うようなことをしています。ここで-80pxとしたのは、.showExUrlのcssの都合なのですが、カーソルのある位置を0とした時に、仮に16pxのフォントサイズで5列分確保しようと言う計算です。5列の内1列は余白分です。
4行分も必要なほど長いurlはまぁ無いかと思うわけですが、paddingやmarginの余白も考えて80px分確保しています。ここらはお好きに設定できる感じです。

だいたいの流れがつかめてきたと思うので、次にcssを説明します。

cssはどう書く?

cssは本当、こればかりは好きにデザインしても良い部分なので、特別説明は不必要かと思うんですが、必要な要素として、

  • マウスオーバー(hover)するまでは非表示にしておく
  • マウスオーバーしたら表示
  • できたら、こうフワッとした感じがいいじゃん

というような意味合いで、以下のようになっています。

ちなみに.showExUrlを#containerの中に入れているわけですけれども、.showExUrlにabsoluteを利用しているので、#containerには、position: relative;を入れておく必要があります。まぁなくても大丈夫な感じかなと思ったりも(笑)

#containerの中にある.showExUrlはそれに合わせて、top,left共に初期値を0にしてあります。で、transition: 0.3s ease;を入れることにより、topやleftの値が変わった際には、アニメーションするというような仕組みです。またマウスオーバー(hover)するまでは非表示なので、opacity:0;が入っています。

としておくのが本来はベターな方法かと思います。もちろん表示するときには、

と言う感じにする必要がありますので注意です。

.showExUrl.showは、jQueryでhoverした際に.showと言うclassを追加するので、これが入った時に表示させるための仕組みです。.showExUrlの時にbackground: #fff;で、.showExUrl.showになると、background: #000;となっているのも、フワッと表示させるための要素です。

.exUrl-inAddressは、.showExUrlで作ったボックスの中に入る、いわゆるアドレスが入る要素になります。ここで注目は、display: table;です。もし仮にここをdisplay: block;とすると、要素は左側に寄ってしまいます。tableを設定するとその幅は中身の要素によって決定されるのです。これにより、.showExUrl.showのmargin:2px auto;が効果を発揮し、最大90%までで、その中身の要素は中央に位置するようになります。

これらは、例えば短縮アドレスや、既に短いアドレスだった場合でも、うまく中央に寄せるためのアイデアです。

さて、これらcssを踏まえて完成形のスクリプトを書いておきます。

このようにすることで、指定した外部リンクのちょっと上あたりにそのリンクのアドレスが表示されると言う事ができるようになるわけです。もし仮に誰かにハッキングされたりとかして、あやしいアドレスを入れたられたとしたら…まぁそんなもん入れられたら、アドレスが表示されていてもわからないことも多いですけども、例えばアドレスの中に、javascript:…というような、見るからに怪しい記述があったりした時などに「おや?」と気づけるようになるかも知れません。

まぁ気が付かないだろうなぁとは思うんですけどね(笑)
外部リンクをclickする前の1クッション…いや、0.5クッションぐらいですけど、何かの足しにしてください。

スポンサーリンク

シェアする

フォローする