Loading…

Stinger6 Stinger7 WordPress カスタマイズ

カエレバ・ヨメレバをCSSでカスタマイズする方法

カエレバをCSSでカスタマイズ

所要時間目安:5

This session is using  IPv4  is established in

この記事は2016年2月21日のものです。現在は状況が異なる可能性がありますのでご注意ください。

Stinger6 Stinger7 WordPress カスタマイズ

目次に行く・戻る

メルカリ招待コード:

カエレバをCSSでカスタマイズ

 

アフィリエイトリンクを作成してくれるカエレバブックマークレットやヨメレバブックマークレットを使用している方々は多いと思います。

私は、
カエレバ。というサイト?を知りはじめは意味がわかりませんでした。^^;)

製作者ブログ

カエレバ。の製作者・作成者のかん吉さんのブログです。

 

このような素晴らしいツールを作成してくれたかん吉さんに感謝ですね!!

アドセンス336pxPC閲覧記事下表示1つ目コード

しかし、


この記事を読む方へのオススメ


ブログを少し続けているうちに内容と意味がわかってきました。

 

これまでは、
別にCSSでカスタマイズしなくても充分でしょう。

と思っていましたが、
WordPressでブログを初めてからいつかはCSSでカエレバ。のデザインをカスタマイズしてみてたいなぁ。

 

と思うようになり、
いくつかのサイトの方々の先駆者がカスタマイズされているものを元にほぼ同じなのですが若干だけカスタマイズしてみました。

その備忘録としておきたいと思います。

 

まず、デザインのCSSですが以下になります。

 

/*--ヨメレバ・カエレバ-----------------------------------------------------*/

 .booklink-box, .kaerebalink-box{
 margin: 16px auto;
 padding: 5%;
 width: 85%;
 overflow: hidden;
 border: solid 1px #ccc;
 font-size: 90%;
 }

 .booklink-image, .kaerebalink-image {
 margin: 0 0 16px 0;
 }

 .booklink-image img, .kaerebalink-image img {
 margin: 0 auto;
 display: block;
 text-align: center;
 }

 .booklink-info, .kaerebalink-info {
 overflow: hidden;
 line-height: 120%;
 text-align: center;
 }

 .booklink-name, .kaerebalink-name {
 margin-bottom: 16px;
 font-size: 100%;
 line-height: 120%;
 }

 .booklink-powered-date, .kaerebalink-powered-date {
 margin-top: 16px;
 font-family: verdana;
 font-size: 8pt;
 line-height: 120%;
 }

 .booklink-detail, .kaerebalink-detail {
 margin-bottom: 16px;
 }

 .booklink-link2, .kaerebalink-link1 {
 margin-top: 16px;
 }

 .shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkyahooAuc a, .shoplinkkakakucom a, .shoplinkseven a {
 margin: 10px auto 0 auto;
 padding: 4px;
 display: block;
 width: 90%;
 border-top: solid 1px #dadada;
 border-right: solid 1px #c7c8c8;
 border-bottom: solid 1px #949494;
 border-left: solid 1px #c7c8c8;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background-color: #bcbcbc;
 background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .98), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .98) 100%);
 background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .98), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .98) 100%);
 font-weight: 700;
 text-align: center;
 text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -0.5px 0 rgba(1, 1, 1, .6);
 }

 .shoplinkamazon a:hover, .shoplinkrakuten a:hover, .shoplinkyahoo a:hover, .shoplinkyahooAuc a:hover, .shoplinkkakakucom a:hover, .shoplinkseven a:hover {
 border-top: solid 1px #b4b4b4;
 border-right: solid 1px #a0a2a2;
 border-bottom: solid 1px #6e6e6e;
 border-left: solid 1px #a0a2a2;
 box-shadow: 0 1px 1px rgba(148,148,148,1);
 }

 .shoplinkamazon a:active, .shoplinkrakuten a:active, .shoplinkyahoo a:active, .shoplinkyahooAuc a:active, .shoplinkkakakucom a:active, .shoplinkseven a:active{
 position: relative;
 top: 1px;
 border-top: solid 1px #666;
 border-right: solid 1px #999;
 border-bottom: solid 1px #ccc;
 border-left: solid 1px #999;
 box-shadow: inset 0 1px 1px rgba(0,0,0,.3);
 background-color: #bcbcbc;
 background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .3) 100%);
 background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, .0) 100%);
 }

 .shoplinkamazon a {
 color: #fc9711;
 }

 .shoplinkrakuten a {
 color: #bd0000;
 }

.shoplinkyahoo a {
 color: bulue;
 }

.shoplinkyahooAuc a {
 color: #red;
 }

.shoplinkkakakucom a {
 color: #fc9711;
 }

 .shoplinkseven a {
 color: #23518f;
 }

 .booklink-footer{
 clear:left;
 }

 

そして、

メディアクエリは以下になります。

 

@media screen and (min-width : 500px){
 .booklink-box, .kaerebalink-box{
 padding: 32px;
 }
 .booklink-image, .kaerebalink-image {
 margin: 0 32px 0 0;
 float: left;
 }
 .booklink-info, .kaerebalink-info {
 margin: 0;
 text-align: left;
 }
 .booklink-link2, .kaerebalink-link1 {
 margin-top: 32px;
 }
 .shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a,.shoplinkyahooAuc a, .shoplinkkakakucom a,.shoplinkseven a {
 margin: 10px 8px 0 0;

 }
 }

 

これで、上記画像のようにカスタマイズされた表示になります。

カエレバ。で、

  • amazlet風
  • amazlet風(改)-1
  • amazlet風(改)-2
  • amazlet風(CSSカスタマイズ用)
  • amazlet風(改)-3

カエレバのデザイン選択画像

など、
上記画像のような感じでいくつかあります。

その中でおおむねamazlet風(改)であれば、
それなりに見栄えは変わります。

 

ですが、

私は昔からずっと「amazlet風(改)-3」というデザインを選んでいたので、

「amazlet風(改)-3」に合わせたカスタマイズになります。

そして、
リンク先も以下の5つです。

  • Amazon、
  • 楽天市場、
  • Yahoo!ショッピング、
  • ヤフオク、
  • 価格ドット.com

 

です。

 

一応、他にも予備として7.netのCSSも書いてあります。

追加したい場合や要らない場合は該当箇所を削除したり追加したりすればできます。

 

できあがり画像としてはこんな感じです。

カエレバCSSカスタマイズ画像

 

実際には以下のようになります。

 

ボタン部分を横にしたい場合は、

 

メディアクエリのコードの一番下に以下のコードを追加すると横にできますが、

 

.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a,.shoplinkyahooAuc a, .shoplinkkakakucom a,.shoplinkseven a {
 margin: 10px 8px 0 0;
 float: left;
 width: 45%;
 }
 }

 

私の場合は、
amzlet風(改)-3で縦表示に合わせてしまってあるので、
marginやwidthなどそれぞれで調整する必要があります。

※このまま横表示にするとボタン位置がズレますので気をつけてください。

最後に参考にさせていただいたサイト様です。(ありがとうございます。)

 

アフィリエイトリンク作成のブログパーツ「ヨメレバ」と「カエレバ」の表示をカスタマイズしたいんだけど、どうやるの? そんなあなたのために、CSSのカスタマイズについて初心者でも分かるように解説したいと思います。

みんな使ってるし!私もぜひ使ってみたいと思い(私はゆとり世代ではないですよ)カスタマイズに挑戦しました。

 

様々なデザインがあると思いますが、

今のところ私の場合・ブログでは上記コードにてカエレバ。をCSSでカスタマイズして使用させて頂いています。
(ほとんどCom2Blogさんのコピペですが…。m(__)m^^;ポリポリ)

参考になりましたら幸いです。

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめの記事一部広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

あなたにおすすめ

コメント欄を開閉式にする方法

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

Stinger6,Stinger5,StingerPLUS+コメント欄を開閉式スライドにする方法

前々から気にかけてどうにか出来たらいいなぁ…。なんて思っていたコメント欄です。 コメント欄を非表示にしてしまうというのもありかなぁ。と思ったこともありましたが、 いくつかのブログにてコメント欄が開閉式…

もっと読む

インフィード広告アドセンス

カエレバのデザイン選択画像

カスタマイズ カスタマイズ ツール 伝えたいこと

カエレバ・ヨメレバのカスタマイズCSS表示でズレないようにする方法

カエレバ・ヨメレバのサービス提供者であるかん吉さんより、正式にサービス提供方法?がAmazonから国内の市場に協力?することやAmazonのPA-APIの仕様変更?により、楽天(国内)メインに仕様変更…

もっと読む

インフィード広告アドセンス

記事上に人気記事表示

WordPress 備忘録

ブログを続ける意味と大切さ

約10年位前にブログ(ウェブログ:webのログ→通称ブログ)が流行り出しました。その頃から私は無料サービスのブログサイトでいくつかブログの運営をしてみました。 でも、 続いても1年もいかなかったように…

もっと読む

インフィード広告アドセンス

カテゴリの人気記事一覧画像

WordPress カスタマイズ 伝えたいこと 備忘録

カテゴリの人気記事を表示する方法

  記事を読んで頂いていて該当記事を読み終わった後に、同じカテゴリーに属する人気記事を表示する方法です。 せっかく訪問して頂いて記事を読んでもらった後に同じカテゴリー内で人気のある記事が表示…

もっと読む

インフィード広告アドセンス

ページ表示速度高速化

Stinger6 Stinger7 WordPress インターネット カスタマイズ テーマ 伝えたいこと 備忘録

ページ表示速度高速化レンダリングブロックを非同期にしてみる。

ここ最近…。本当にサイトの高速化、サイトのページ表示速度を速くしなければ!!なんて思い過ぎている私です。 ない知識をフルに活用してみてはいるものの、うまくいったりいかなったり、トライ・アンド・エラーそ…

もっと読む

インフィード広告アドセンス

SearchConsoleから404増加メール

カスタマイズ 伝えたいこと 備忘録

SearchConsoleから「404」ページの増加とメール

 当ブログでは、 以前以下の記事を投稿しました。 attachmentIDというWordPressの仕様?による添付ファイルに画像のリンクをした場合の対処方法です。 が、…

もっと読む

Total224


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-Stinger6, Stinger7, WordPress, カスタマイズ
-, , , , , ,

目次に戻る

目次に戻る


コメントを閉じる

ヨメレバ・カエレバのカスタマイズ参考ブログ7選!コピペソース公開で即流用できるありがたいサイト集 - 仙台Cafeでちょっと休憩。 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください