WordPress小技：アンカーテキストの色をカーソルオンで変える

カーソルオンでリンク部に表示されているアンカーテキストの色を変えるには、一般にCSSファイルでa:hoverの色を指定することでおこなわれるのですが、特定のエントリーの特定の箇所でのみこれを行うのはちょっと工夫が必要です。

今回は、CSSファイルをいじらず、個々のWordPressのエントリー記述のみでこれを実現する方法をご紹介いたします。

以前ご紹介しましたように、html5からはbody内にstyleタグを置くことができます。bodyとは、エントリーに表示される文字を記述する部分ですから、WordPressの記事の内部にstyleタグを記述することができるのですね。

styleタグは、クラスを指定して特定の要素のスタイルを指定することができます。そして、それぞれの要素を使う際はクラスを指定することができます。

これをaタグに利用すると、特定のリンク部のスタイルだけを変更することができます。

これを利用した最近のエントリーの一部を以下に示します。#211のところにカーソルを乗せていただくと動作が確認できます。

#211のタイトルは「【シロアリ】反社会極貧イケダハヤト211【18号】」ですが、これは18号物件がシロアリに食い荒らされているとの話がイケハヤボイシーでなされたことを受けてのものです。

この部分のhtml記述は以下の通りです。

＜style＞a.ah{color:blue;font-weight:bold;text-decoration:none;}
a:hover.ah{color:red;}＜/style＞
＜blockquote＞＜a href="https://medaka.5ch.net/test/read.cgi/employee/1563594748/l50"
class="ah"＞#211＜/a＞のタイトルは「＜b style="color:green;"＞【シロアリ】反社会極貧イケダハヤト211【18号】＜/b＞」ですが、これは18号物件がシロアリに食い荒らされているとの話がイケハヤボイシーでなされたことを受けてのものです。＜/blockquote＞

スタイルは、＜style＞～＜/style＞の間に、「適用対象{プロパティ:値; ...}」で構成されるスタイル定義を並べて記述します。ブレース（“{}”）内部のプロパティと値の組み合わせは、多数を並べて記述することができます。

WordPressのエディタは、改行を勝手にコントロールするのですが、styleタグの間に改行が入ると正常に動作しないことがあります。期待通りに動作しない場合は、html記述から改行（＜br＞）を除去することを試みてみましょう。

:hoverのように、“:”の後に指定されるものは疑似クラスと呼ばれいくつかが指定可能なのですが、この指定を複数おこなう場合は、以下の順序で行わなくてはいけません。

1. link：通常の状態。省略時はこれになる
2. visited：訪問済みのリンク
3. hover：マウスが上にある時
4. active：リンクの上でマウスがクリックされた時

この仕様は、多くの疑似クラスに対する設定を一つの記述で済ませることができるのですが、順序を意識した記述が必要になります。この順序は“LoVe & HAte”と覚えろと言うのですが、さて、どうでしょうか。まあ、ちょっとおしゃれではありますが、、、

サンプルコードで使用されたスタイル定義部分の意味は以下の通りです。

a.ah {color:blue;}：アンカーテキストの色を青にします
a:hover.ah{color:red;}：ホバー時（カーソルオンした時）の色を赤にします
a.ah{font-weight:bold;}：フォントの太さを太字（ボールド体）にします
a.ah{text-decoration:none;}：アンダーラインを消します

ここで「a.ah」はクラスah（名前“ah”は適当に決めています）のリンクタグ（＜a ... class="ah"＞）のアンカーテキスト部分に適用されるスタイルであることを示しています。また「a:hover.ah」は、このアンカーテキストにカーソルオンした時に適用されるスタイルであることを示します。

クラスは様々なタグで指定することができます。タグのないところでも、＜span＞や＜div＞タグで囲って、これらのタグにクラスを指定すれば、任意の箇所を特定のクラスとすることができます。

スタイルとクラスの組み合わせは、いろいろなところに活用できそうですね。

---

おまけ

上の引用部で#211が点滅しているのですが、これは、scriptタグを用いてJavaScriptで以下のように記述しています。

＜span id="blink_id"＞#211＜/span＞＜script type="text/javascript"＞＜!--
object = document.getElementById("blink_id");
object.style.opacity=1;
setInterval(function(){object.style.opacity^=1},1000);
// -->＜/script＞

このコードのそれぞれの働きは、以下の通りです。

• ＜span id="blink_id"＞#211＜/span＞は“#211”にblink_idというidを与える
• ＜script type="text/javascript"＞～＜/script＞：scriptタグによりJavaScriptを実行させる。以下はその内容。なお、typeはjavascriptがデフォルト値なので省略可能です
  • object = document.getElementById("blink_id");：blink_idというidの付いたエレメントを変数objectに獲得する
  • object.style.opacity=1;：このエレメントのスタイルの不透明度を1とする
  • setInterval(function(){object.style.opacity^=1},1000);：setIntervalを用いて1000ms毎に"object.style.opacity^=1"を実行する。この式は、object.style.opacityの値を反転（1なら0に、0なら1とする）させている

なお、“＜!--”と“// --＞”でjavascriptのコード部分をコメントアウトしておりますが、これは、javascriptの実行機能がない環境下でコードがそのまま表示されることを防ぐためのもので、今日の大多数のブラウザではjavascriptが正しく解釈されることから、このコメントアウトはなくても構いません。

hoverと同様の機能はjavascriptを用いても実現できそうです。もしかすると、こちらが王道、ということになるのかもしれません。この先、javascriptについてもトライしてみましょう。

javascript版hover

ここでは#211（←カーソルを乗せてみてください）のhoverと同様の処理をjavascriptのマウスオーバー割込みにより実現しています。

javascriptなら、マウスクリックでの動作も可能で、#211の部分でマウスクリックすると背景色が変化します。

この部分のhtmlソースコードは次の通りです。簡素化できるものは簡素化しました。青字がhover機能を実現する部分で、緑字はクリック、ダブルクリック、右クリックの際の動作を指定した部分です。

<h2>javascript版hover</h2>
<script>//<br />
var idx = 0;//<br />
var is_black = 0;//<br />
var was_hover = 0;//<br />
function over(x){   // マウスオーバー//<br />
   disp_text.innerHTML = "";//<br />
   x.style.color = "red";//<br />
   was_hover = 1;}//<br />
function leave(x){   // マウスリーブ//<br />
   if(was_hover){//<br />
      disp_text.innerHTML = ""; was_hover = 0;}//<br />
   x.style.color = "aqua";}//<br />
function uclick(x){   // 左クリック   var disp_text = document.getElementById('disp_here');//<br />

   const acolor=["white", "red", "orange", "yellow",//<br />
       "green", "blue", "darkblue". "purple"];//<br />
   x.style.backgroundColor = acolor[idx = (idx + 1) & 7];//<br />
   disp_text.innerHTML = "backgroundColor set to "+ acolor[idx];}//<br />
function dclick(x){   // 左ダブルクリック//<br />
   disp_text.innerHTML = "";//<br />
   was_hover = 0;//<br />
   x.style.backgroundColor = "white"; idx = 0;}//<br />
function rclick(x){   // 右クリック<br />
   var disp_text = document.getElementById('disp_here');//<br />
   var date = new Date();//<br />
   var hh = date.getHours();//<br />
   var mm = date.getMinutes();//<br />
   var ss = date.getSeconds();//<br />
   was_hover = 0;//<br />
   if(is_black){//<br />
       x.style.backgroundColor = "white";//<br />
       is_black = 0;//<br />
       disp_text.innerHTML = "";}//<br />
   else{//<br />
       x.style.backgroundColor = "black";//<br />
       is_black = 1;//<br />
       disp_text.innerHTML = //<br />
           "right button down at " + hh + ":" + mm + ":" + ss;}}//<br />
</script>

ここでは<b style="color:aqua;" onmouseover="over(this);" onmouseleave="leave(this);" onclick="uclick(this);" ondblclick="dclick(this); return false;" oncontextmenu="rclick(this); return false;" onselectstart="return false;">#211</b>（←カーソルを乗せてみてください）のhoverと同様の処理をjavascriptのマウスオーバー割込みにより実現しています。<span id="disp_here" style="color:gray;"></span>

（上記引用部は、コードが読みやすいように改行や字下げを行っていますが、少なくとも改行タグは“//”でjavascriptとしてはコメントアウトしておく必要があります。上記引用部では、コメントアウト部分の色を白色表示とすることで見えなくしています。）

ここで、onmouseoverとonmouseleaveという二つの割り込み処理を＜b＞タグに定義します。これらはマウスが乗った時と出ていったときに呼ばれる処理で、引数のthisはこの＜b＞タグそのものを意味します。

それぞれの割り込み処理は関数overとleaveとして定義されており、引数で与えられた要素のスタイルの色を、マウスオーバー時には赤、マウスリーブ時には水色に変更します。

styleに設定できる項目は多岐にわたりますので、ここでは他のページのご紹介にとどめておきます。

マウスクリックで起動される関数uclickは、配列acolorに格納された色名をidxの値に応じてstyle.backgroundColorに設定します。idxは各呼び出しを通して順に増加する値を保持するため、スタティック変数として、関数の外側で宣言しています。

上には二つの#211が表示されていますが、これらの間で変数idxは共有されています。双方でクリックすると、最後に変化した次の背景色に変化することから、この事情が分かっていただけると思います。もちろん、別関数を呼び出して、別のスタティック変数を用いれば、それぞれに独立した動きをさせることもできます。

マウスのダブルクリックで起動される関数dclickは、backgroundColorを白色に戻し、idxをリセットします。画面上のダブルクリックの機能が働いてその部分が反転表示になりますが、他の部分で左クリックすることで、正しく白色に戻っていることが確認できるはずです。（当初のコードでは、ダブルクリックで反転表示となっていましたが、現在は改良されています。この改良に関しては、次節をご覧ください。）

右クリックで起動される関数rclickは、backgroundColorを黒色とし、すでに黒色となっている場合は白色に戻します。また、文章の末尾に、黒色にした時刻を表示します。

時刻を含む文字を表示する部分は＜span＞タグで確保し、disp_hereというIDを与えています。こうしておけば、getElementByID関数により表示部のエレメントを獲得してinnerHTMLを扱うことで、html文書内の文字列を操作することが可能となります。

なおここでは、割り込み処理をbタグに与えていますけれど、他のタグに対して与えることも可能で、タグに囲まれていない部分に作用させる場合はspanタグやdivタグを用いて与えることもできます。

標準的な割込み処理の抑制

ダブルクリックによる反転表示は、割り込みによる関数呼び出しの次に、"return false;"を実行することで防止されます。WordPressでこれを行う際は、呼び出される関数の最後にreturn falseを書くのではなく、割り込みにアサインする際に“ondblclick = "dclick(this); return false;"" のような形で行う必要があります。また、確実な動作のためには“onselectstart="return false;"”を与える必要がありそうです。後者は選択開始を抑制するもので、選択部分が反転表示されますので、これによる反転表示が抑制されます。

右クリックも同様に、oncontextmenuに対する処理の最後にreturn false;を実行するようにしています。これを行わないと、ポップアップメニューが現れてしまいます。

メニューやマウスドラッグによる選択は、ウェブページのパーツを第三者が利用する際に利用される機能で、これを抑制することで権利侵害を防ぐうえでの多少の効果があります。しかしながら、これによる保護は完全ではなく、少々のプロテクトを掛けたところで簡単に破られてしまうということも、覚えておいた方がよさそうです。

たとえば、文書全体でメニューやマウスドラッグによる選択を禁止したければ、全体をdivタグで囲って、＜div onselectstart="return false;" oncontextmenu="return false;"＞～＜div＞として、“～”の部分に本文全部を記述すれば実現できます。

実はこのエントリーもそうしており、マウスドラッグによる選択や右クリックによるメニューの表示はできないようにしています。これは、コピペやソース表示を防止するために多少は役に立つのですが、相当にざるなやり方です。

といいますのは、Ctrl-Aにより全体を選択することは可能で、これをコピーして適当なところにペーストすることは可能です。また、右クリックによるポップアップメニューの表示も、抑制されるのは記事の表示部分のみですので、マウスカーソルを記事以外の部分において右クリックすればポップアップメニューが表示されます。

なお、コードを紹介した引用部では、マウスドラッグによる選択が可能となっています。これをどうやって実現しているかといいますと、＜div＞～＜/div＞のタグを複数準備して、それぞれで無視する割り込みを変える、簡単なやり方で実現しております。