Loading…

Stinger6 Stinger7 WordPress カスタマイズ

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

本日の人気記事BEST10

所要時間目安:5


Stinger6 Stinger7 WordPress カスタマイズ

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

カエレバを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^^;ポリポリ)

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


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

おすすめの記事一部広告

    Multiplex 広告

Stinger6, Stinger7, WordPress, カスタマイズ」同じカテゴリーの記事一覧


関連記事

記事上に人気記事表示

WordPress カスタマイズ

記事タイトルにリンクを追加挿入する方法とリンク削除する方法

  WordPressでは、 多くのテーマで記事タイトルにリンクがされていません。 なので、 これまでのブログでは記事タイトルにリンクが挿入されていたので、 WordPressの無料テーマで…

もっと読む

AFFINGER4投稿テキストエディタ

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

AFFINGER4で初投稿とその機能豊富さを紹介しきれない…。

ふうε=(・ρ・*) フゥ、この度、やっとこさ~の思いでテーマをAFFINGER4に変更しました。 以前のSTINGER6で結構な割り合いでカスタマイズしまくっていたので、簡単にテーマの変更がなかなか…

もっと読む

カテゴリの人気記事イメージ画像アイキャッチ画像を丸くする

WordPress テーマ 伝えたいこと 備忘録

カテゴリの人気記事イメージ画像を丸くする方法

えーと…。 ここのところイメージ画像・アイキャッチ画像を丸くすることにこだわってしまっている私です…。 こんな感じで過去に3回もイメージ画像を丸くする方法を投稿しています。 関連記事のイメージ画像を丸…

もっと読む

人気記事ランキング表示

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

人気記事ランキングに順位を付けてCSSで丸く表示する方法

多くのサイトやブログにおいて人気のある記事は異なると思います。 また、 人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります…

もっと読む

目次に戻る

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

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る

目次に戻る


コメントを閉じる

comment

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

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