【THE THOR】商品リンク管理プラグインRinkerのカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。

今回は、WordPressテーマ THE THOR(ザ・トール)での「商品リンク管理プラグインRinker(リンカー)」のカスタマイズについてまとめてみました。

商品リンク管理プラグインRinker(リンカー)

これまでAmazon商品リンク作成ツールとして使ってきたAmazonアソシエイト・プログラムのオフィシャルプラグイン「Amazon公式リンク作成ツール(Amazon Associates Link Builder)」が、2020年3月9日をもって機能を停止すると言うことで、ZMASAa.blogでは新たに「商品リンク管理プラグインRinker(リンカー)」を導入しました。

【THE THOR】商品リンク管理プラグインRinkerに切り替える
WordPressテーマ THE THOR(ザ・トール)で使っている「Amazon公式リンク作成ツールAmazon Associates Link Builder」が2020年3月9日で停止する為「商品リンク管理プラグインRinker」に変更します。

「商品リンク管理プラグインRinker(リンカー)」導入時は、枠のみしかカスタマイズを行っていませんでした。

現在の「商品リンク管理プラグインRinker(リンカー)」のスタイルは次の様になっています。

【THE THOR】商品リンク管理プラグインRinkerのカスタマイズ

そこで今回改めて「商品リンク管理プラグインRinker(リンカー)」をカスタマイズしてみたいと思います。

商品リンク管理プラグインRinker(リンカー)のカスタマイズ

「商品リンク管理プラグインRinker(リンカー)」のカスタマイズを行います。

カスタマイズ内容

「商品リンク管理プラグインRinker(リンカー)」のカスタマイズの内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

.yyi-rinker-title a {
	display: block;
	position: relative;
	background-color: #ffeef7; /*タイトル 背景色*/
	padding: 4px 10px; /*内側余白設定*/
	font-weight: 700!important; /*タイトル フォント太さ*/
	line-height: 24px; /*高さ*/
	border-radius: 3px; /*角丸コーナー*/
	border-left: 8px solid #fe619a!important; /*左ラインの太さとカラー*/
}
.yyi-rinker-title a:hover{ /*タイトル ホバー時*/
	box-shadow: 0px 0px 3px 3px rgba(254,97,154,1); /*枠設定*/
	transition-duration: 0.6s; /*アニメーション*/
}
.yyi-rinker-image img {
	margin-right: 10px; /*右マージン設定*/
}
.yyi-rinker-image img:hover {
	opacity: 0.6; /*不透明度*/
	transition: all 0.8s ease; /*アニメーション*/
}
.yyi-rinker-box {
	margin-bottom: 0!important; /*下マージン削除*/
}
.yyi-rinker-links .amazonlink, /*Amazonリンクボタン*/
.yyi-rinker-links .rakutenlink, /*楽天リンクボタン*/
.yyi-rinker-links .yahoolink { /*Yahoo!ショッピングリンクボタン*/
	border-radius: 3px!important; /*角丸コーナー*/
	box-shadow: 3px 3px 2px rgba(0,0,0,0.3)!important; /*シャドー(影)*/
}
.yyi-rinker-links .amazonlink:hover, /*Amazonリンクボタン ホバー時*/
.yyi-rinker-links .rakutenlink:hover, /*楽天リンクボタン ホバー時*/
.yyi-rinker-links .yahoolink:hover { /*Yahoo!ショッピングリンクボタン ホバー時*/
	opacity: 0.6; /*不透明度*/
	transition: all 0.4s ease; /*アニメーション*/
}

カスタマイズ後の商品リンク管理プラグインRinker(リンカー)

今回のカスタマイズによって、「商品リンク管理プラグインRinker(リンカー)」のスタイルは次の様になりました。

  • 通常表示
    【THE THOR】商品リンク管理プラグインRinkerのカスタマイズ
  • タイトルにホバーした時
    【THE THOR】商品リンク管理プラグインRinkerのカスタマイズ
  • 商品画像にホバーした時
    【THE THOR】商品リンク管理プラグインRinkerのカスタマイズ
  • ECモールボタンにホバーした時
    【THE THOR】商品リンク管理プラグインRinkerのカスタマイズ

今回のカスタマイズでは、下記について行っています。

  1. タイトルのスタイルをサイトカラーに合わせて変更し、商品名を目立つようにしました。
  2. タイトルのホバー状態時に枠線を付けて、ホバー状態を分かりやすくしました。
  3. 商品画像のホバー状態時に不透明度を付けて、ホバー状態を分かりやすくしました。
  4. ECモールボタンにシャドー(影)を付けて、より立体化し押しやすくしました。
  5. ECモールボタンのホバー状態時に不透明度を付けて、ホバー状態を分かりやすくしました。
  6. 余白(マージン)を調整しバランスの良い表示を目指しました。

最後に

今回のカスタマイズで、「商品リンク管理プラグインRinker(リンカー)」が更にサイトカラーにあったスタイルとなり、サイトに溶け込みつつも目立つようになりました。

当面はこのスタイルで様子を見ていきたいと思います。

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール