【WordPress】カエレバ/ヨメレバリンクのデザインをカスタマイズする方法【テーマ開発】

2022/06/07 2022/06/09

今回は、WordPressでカエレバ、ヨメレバリンクのデザインをカスタマイズする方法を解説します。

Contents

【WordPress】カエレバ/ヨメレバリンクのデザインをカスタマイズする方法【テーマ開発】

【WordPress】カエレバ/ヨメレバリンクのデザインをカスタマイズする方法【テーマ開発】

カエレバ、ヨメレバで商品リンクを作成する方法については、下記の記事をご覧ください。

【WordPress】カエレバで商品リンクを記事内に貼り付ける方法今回は、WordPressで記事内にカエレバで作成した商品リンクを挿入する方法を解説していきます。【WordPress】カエレバで商品リンクを…

【WordPress】ヨメレバで書籍のリンクを記事内に貼り付ける方法今回は、WordPressで記事内にヨメレバで作成した書籍のリンクを挿入する方法を解説していきます。【WordPress】ヨメレバで書籍のリン…

カスタマイズ後のデザインはこんな感じ

カスタマイズ後のカエレバ・ヨメレバリンクは下記のようになります。

カエレバ

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

posted with カエレバ

楽天市場

Amazon

ヨメレバ

CSS設計完全ガイド　〜詳細解説＋実践的モジュール集

posted with ヨメレバ

半田惇志技術評論社 2020年02月27日頃

楽天ブックス

Amazon

Kindle

style.cssにコードを追加する

カスタマイズする方法ですが、やることはstyle.cssに下記コードを追加するだけです。

.booklink-box,
.kaerebalink-box {
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	padding: 25px;
	margin-bottom: 20px;
	background: #fff;
}

.booklink-image,
.kaerebalink-image {
	float: left;
	width: 100px;
	margin: 0 20px 20px 0;
}

.booklink-image img,
.kaerebalink-image img {
	margin-bottom: 0;
}

.booklink-name a,
.kaerebalink-name a {
	text-decoration: underline !important;
}

.booklink-name p,
.kaerebalink-name p {
	margin: 10px !important;
}

.booklink-name > p,
.kaerebalink-name > p  {
	display: none;
}

.booklink-powered-date,
.booklink-detail,
.kaerebalink-powered-date,
.kaerebalink-detail {
	font-size: 14px;
	color: #808080;
}

.booklink-powered-date a,
.kaerebalink-powered-date a {
	color: #808080;
}

.booklink-link2,
.kaerebalink-link1 {
	clear: both;
	margin-top: 15px;
}

.shoplinkrakuten,
.shoplinkamazon,
.shoplinkkindle {
	margin: 0 auto;
	margin-bottom: 1px;
}

.shoplinkrakuten a,
.shoplinkamazon a,
.shoplinkkindle a {
	display: block;
	background: #bf0000;
	padding: 10px;
	text-decoration: none;
	color: #fff;
	text-align: center;
	border-radius: 3px;
	font-size: 14px;
}

.shoplinkamazon a {
	background: #FF9900;
}

.shoplinkkindle a {
	background: #146EB4;
}