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^^;ポリポリ)

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

あなたにおすすめ

アイキャッチ画像自動設定

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

アイキャッチ画像を設定し忘れないように自動で設定する方法

WordPressやFC2ブログなどで、アイキャッチ画像を設定しなければならないのは意外と手間ですよね。 以前に、アイキャッチ画像を設定し忘れた時にランダムに表示させる方法を記事として紹介しました。 …

もっと読む

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

googleカラーコード検索結果カラーピッカー

インターネット カスタマイズ カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ

カラーコード検索をGoogleで簡単に確認する方法

ホームページやブログなどサイトのデザインには画像はもちろんですが、 その他にCSSやHTML(HTML5も含む)で色の付け方?などでカラーコードと呼ばれるものを使用すると思います。 (他にもRGBなど…

もっと読む

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

ショートコード

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

ショートコード作り方テンプレートから呼び出す方法などいろいろ

ショートコードって学べば学ぶほど色々な活用方法があるんだなぁ。と実感している毎日です。 もちろん、他にも様々な関数を使ってもっともっと多くのカスタマイズなどができると思います。 今の私には、 そこまで…

もっと読む

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

WordPressFTPダウンロードエラー設定変更

WordPress アップグレード 伝えたいこと 備忘録

WordPressFTPソフトでダウンロード出来ない場合の対処方法

WordPressのアップデート・アップグレードには必須と言っていいFTPソフト(FFFTPなど)でのサーバー上の大事なフォルダ類のバックアップです。一応、バックアップ対象フォルダはwp-conten…

もっと読む

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

AMP画像

AFFINGER4Pro WordPress カスタマイズ 備忘録

AMP化したページでカエレバ・ヨメレバ・アプリーチを表示する方法

もうAMP化が騒がれて2年くらいになるのでしょうか・・・。それぞれのテーマによっては標準で対応しているものもありますね。ですが、対応していてもカエレバヨメレバのアフィリエイトコードの変換にはうまくでき…

もっと読む

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

Facebook携帯番号対処方法

WordPress カスタマイズ 備忘録

WordPressでOGP設定方法。プラグイン使わない。

多くのブログやサイトで今ではFacebookやTwitterのOGP設定がされています。 なので、 OGP設定はある意味SEO的にもFacebookなどのSNSを使用している人にとっては、 必須の設定…

もっと読む

おすすめの記事一部広告

おすすめ!!

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

おすすめ2

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

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

Multiplex 広告

Total230


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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