アフィリエイトリンクを作成してくれるカエレバブックマークレットやヨメレバブックマークレットを使用している方々は多いと思います。
私は、
カエレバ。というサイト?を知りはじめは意味がわかりませんでした。^^;)
製作者ブログ
このような素晴らしいツールを作成してくれたかん吉さんに感謝ですね!!
しかし、
Loading…
Stinger6 Stinger7 WordPress カスタマイズ
Stinger6 Stinger7 WordPress カスタマイズ
アフィリエイトリンクを作成してくれるカエレバブックマークレットやヨメレバブックマークレットを使用している方々は多いと思います。
私は、
カエレバ。というサイト?を知りはじめは意味がわかりませんでした。^^;)
このような素晴らしいツールを作成してくれたかん吉さんに感謝ですね!!
しかし、
これまでは、
別にCSSでカスタマイズしなくても充分でしょう。
と思っていましたが、
WordPressでブログを初めてからいつかは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風(改)-3」に合わせたカスタマイズになります。
そして、
リンク先も以下の5つです。
です。
一応、他にも予備として7.netの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でカスタマイズして使用させて頂いています。
(ほとんどCom2Blogさんのコピペですが…。m(__)m^^;ポリポリ)
参考になりましたら幸いです。
世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録
前々から気にかけてどうにか出来たらいいなぁ…。なんて思っていたコメント欄です。 コメント欄を非表示にしてしまうというのもありかなぁ。と思ったこともありましたが、 いくつかのブログにてコメント欄が開閉式…
カエレバ・ヨメレバのサービス提供者であるかん吉さんより、正式にサービス提供方法?がAmazonから国内の市場に協力?することやAmazonのPA-APIの仕様変更?により、楽天(国内)メインに仕様変更…
約10年位前にブログ(ウェブログ:webのログ→通称ブログ)が流行り出しました。その頃から私は無料サービスのブログサイトでいくつかブログの運営をしてみました。 でも、 続いても1年もいかなかったように…
記事を読んで頂いていて該当記事を読み終わった後に、同じカテゴリーに属する人気記事を表示する方法です。 せっかく訪問して頂いて記事を読んでもらった後に同じカテゴリー内で人気のある記事が表示…
Stinger6 Stinger7 WordPress インターネット カスタマイズ テーマ 伝えたいこと 備忘録
ここ最近…。本当にサイトの高速化、サイトのページ表示速度を速くしなければ!!なんて思い過ぎている私です。 ない知識をフルに活用してみてはいるものの、うまくいったりいかなったり、トライ・アンド・エラーそ…
当ブログでは、 以前以下の記事を投稿しました。 attachmentIDというWordPressの仕様?による添付ファイルに画像のリンクをした場合の対処方法です。 が、…
よろしかったらシェアよろしくお願いします。
[…] https://infovarious.com/post-950/ […]