• SIMPLEとは

  • デモ

  • マニュアル

  • アップデート

  • ダウンロード

  • カスタマイズ

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

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

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

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

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

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

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

カエレバ

ヨメレバ

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;
}

カスタマイザーでCSSを追加でもOK

カスタマイザーからCSSを追加してもOKです。方法は下記記事をご覧ください。

【WordPress】テーマに独自のCSSを追加する方法【カスタマイザー】 WordPressでは、テーマに独自のCSSを簡単に追加することができます。 本記事では、テーマに独自のCSSを追加する方法を解説します。 具体…

WordPressテーマ「SIMPLE」

simple

「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。

RELATED POSTS

COMMENT FORM

メールアドレスが公開されることはありません。