THIE THOR カスタマイズイメージ画像

THE THOR のブログカード・サイトカードの背景色をマウスホバー時に変えるカスタマイズの方法

THE THOR を使って少しずつ慣れてくるとだんだんと欲が出てきてもっと見栄えよくというように思い始めます。

ほんのちょっとしたことですが、ここがもっとこうなれば・・・いいのになぁ、なんてことがよくあります。私もすぐにそんな気分になったりしました。

『ブログカード』『サイトカード』というリンクカードは便利です。
ですが、マウスを乗せた時に(マウスホバー)時に、背景色が変化してくれたら、しかもカード全体的に、と思うようになりました。

【出来あがりイメージ】
下の図は上がブログカード、下がサイトカードです。

THE THOR カスタマイズイメージ画像
下が『マウスホバー』状態です。マウスが乗った時に変わるようにしています。

 
秋田秀一イメージ画像
サイト運営者
秋田秀一

 
背景色の色が #f8f8f8 で指定したので薄い感じですが、お好みの色でコードで指定してやれば雰囲気も変わります。

善は急げで早速カスタマイズすることにしました。

※ついでながら・・・ブログカードは、他のネット上のサイトへのリンクです。WPのプラグインでいうと、Pz-LinkCard の役割を果たしてくれます。

サイトカードが、同じブログ内の他の投稿記事にリンクするものです。(サイトとブログの名称から考えると逆のような気もするのですが・・・そう思うのは私だけかも知れません)
 
 

リンクカードの背景色を変える方法

『外観』⇒『Theme Editor』で『style-user.css』を開いてください。
そこに次の指示命令文を追記するだけです。コピペしてください。


/*ホバー時の背景色*/
.content .sitecard:hover {
background-color: #f8f8f8;
}

/*ホバー時の背景色*/
.content .blogcard:hover {
background-color: #f8f8f8;
}


 
 
ついでにマウスが乗っかっていない時の(通常のノーマル時の)背景色を変えるには『hover』を外したコードを入れ込んでおくと背景色が変わります。
 
 


/*背景色の変更*/
.content .sitecard {
background-color: #ffffff;
}

/*背景色の変更*/
.content .blogcard {
background-color: #ffffff;
}


サンプルは白色(色コード #ffffff )にしてあります。お好みの色を指定してください。

簡単ですね。

まとめ

この手のカスタマイズをやりだすと・・・しかも『この色コードだとどんな感じかな』『もっと目立つ色はないものか?」なんてことを実験的にやりだすと、すぐに時間が経過します。

余計な時間とエネルギーはもったいないです。
私たちは『仕掛ける側と仕掛けられる側』でいうと、仕掛ける側なのですから横道にそれてもすぐに戻るようにしたいものです。

特にアフィリエイト初心者の方は注意してください。
本来のやるべきことは、記事作成、投稿、チェック・分析、リライト・・・記事作成、投稿・・・の繰り返しですから。

 
 
以前、この手の『わき道に逸れる』ことの失敗談を記事にしたことがあります。
その記事へのリンクを今回カスタマイズしたカードで表示してみました。

関連記事

実は、下図のような gif 画像に偶然にも出会ったことがあります。 その時は(変な話ですが)、『おっ、これ良くない?』でした。 一時期は当サイトのトップページにも、この手紙が走り続けるダッシュメールの画像(gif画像)を掲載していま[…]

アフィリエイト失敗の理由イメージ画像
 
 

ここまで本当にありがとうございました。

 
 

毎月毎月『ほったらかし』での副収入 割引券アフィリエイト