(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約5分で読めます。

【広告】

※ 本ページには【広告】が含まれています

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

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、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 .amazonkindlelink, /*Kindleリンクボタン*/
.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 .amazonkindlelink, /*Kindleリンクボタン*/
.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(リンカー)」が更にサイトカラーにあったスタイルとなり、サイトに溶け込みつつも目立つようになりました。

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 記事内には【広告】が含まれています

コメント

【広告】