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

INDEX

WordPressテーマ THE THOR（ザ・トール）
最後に

WordPressテーマ THE THOR（ザ・トール）

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

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

ガジェット好きの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（リンカー）」のスタイルは次の様になっています。

そこで今回改めて「商品リンク管理プラグイン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; /*アニメーション*/
}