コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ

 2014/08/20

yomekae

こんにちはちゅんこ@shufulifeです!

WordPressのテーマをSTINGER5に変更してみました。メモ的な意味も込めて、これからカスタマイズした箇所ををブログに書いていこうと思いますのでよろしくお願いします。

まず、第一弾はこちら。

スポンサーリンク

ヨメレバとカエレバのカスタマイズ

すっかりおなじみ!わかったブログのかん吉さんが運営なさってるブログパーツ、ヨメレバカエレバ

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

ヨメレバカエレバの具体的な使用方法はサイトで確認してくださいねー。

ヨメレバのデフォルトはこんな感じですね。画像は【amazlet風-1(改) amazlet風-1[ロゴ無し]】です。

chap1

みんな大好きイケハヤさん

アマゾンや楽天などのショップのテキスト部分をCSSでボタン化にします

カスタマイズ後はこうなります

あまり買って!買って!!!と主張しすぎないよう、ボタンの色は控えめにし、ボタンの文字色で差別化しています。ボタンの色はそれぞれのショップのロゴの色を使いました。キンドルは黒だったので、ペーパーホワイトのロゴ色を使ってみました。

モバイルにも対応していますので、PCで見ていただいている方はウィンドウの幅を狭くして確認みてください。

STINGER5へのコード記述方法

STINGER5はレスポンシブになっていますので、2ヶ所に記載する必要があります。場所は【style.css】ですよー。

まずひとつめのコード記載

STINGER5の【style.css】に、下記の記載を探します。

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
aside {
clear: both;
float: none;
width: auto;
position: static !important;
;
}
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
#wrapper {
padding: 0 20px;
}
header {
text-align: left;
}
.sitename img {
max-width: 300px;
margin: 0;
}

この部分より上に記載します。上ですよ上。

2015.2.17追記 コメントをいただきまして、 .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom部分のcursor:pointerを削除、.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom aへdisplay:block;を追加しました。コメントをくださったkomatsu様、ありがとうございます!!!

2015.6.29 webkit系の記述を削除。その他若干のコードを修正しました。

ヨメレバ・カエレバのcssカスタマイズ記事紹介 | Com2 Blog

/*--------------------------------------
ヨメレバ・カエレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
width:85%;
margin: 1em 0 1em;
padding: 5%;
border:double #d2d7e6;
overflow: hidden;
font-size:small;
border-radius:2px;
}
.booklink-image, .kaerebalink-image{
margin:0 0 15px 0;
}
.booklink-image img, .kaerebalink-image img{
display:block;
margin:0 auto;
text-align:center;
}
.booklink-info, .kaerebalink-info{
text-align:center;
line-height:120%;
overflow: hidden;
}
.booklink-name, .kaerebalink-name{
font-size:16px;
margin-bottom:14px;
line-height:1.2em;
}
.booklink-powered-date, .kaerebalink-powered-date{
font-size:8pt;
     margin-top:10px;
line-height:120%;
}
.booklink-powered-date, .kaerebalink-detail{
margin-bottom:15px;
}
.booklink-link2, .kaerebalink-link1{
margin-top:20px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom{
width:90%;
height:15px;
overflow:hidden;
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
background-color:#ffffff;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
margin:0  auto 5px auto;
padding:10px 0px;
text-align:center;
}
.shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover{
background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
background-color:#f6f6f6;
}
.shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active{
position:relative;
top:1px;
}
.shoplinkamazon a, .shoplinkrakuten a, .shoplinkyahoo a, .shoplinkkindle a, .shoplinkkakakucom a{
display:block;
cursor:pointer;
text-decoration:none;
font-weight:800;
text-shadow:1px 1px 1px #dcdcdc;
font-size:12px;
}
.shoplinkamazon a{
color:#FF9901;
}
.shoplinkrakuten a{
color:#c20004;
}
.shoplinkkindle a{
color:#007dcd;	
}
.shoplinkyahoo a{
color:#7b0099;
} 
.booklink-footer{
clear:left;
}

これをコピペしてください。上にね。

2か所目の記載コード

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {

次はこれより下コピペします。@media only screen and (min-width: 780px)は2個ありますが、2番目の(PCサイズ)の方の下の方にコピペです。

/*--------------------------------------
780px ヨメレバ・カエレバ
--------------------------------------*/
.booklink-box, .kaerebalink-box{
width: 90%;
margin:20px auto;
padding:20px;
}
.booklink-image, .kaerebalink-image{
margin:0 15px 0 0;
float:left;
}
.booklink-info, .kaerebalink-info{
margin:0;
text-align:left;
}
.booklink-name, .kaerebalink-name{
margin-bottom:24px;
line-height:1.5;
}
.booklink-link2, .kaerebalink-link1{
margin-top:10px;
}
.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
float:left;
width:30%;
margin:15px 1% 0 auto;
padding:10px 0px;
}
.shoplinkyahoo a{
font-size:10px;
} 

Yahooショッピングは文字数が多いのでfontサイズを小さくしています。

ヨメレバ・カエレバでのデザイン選択

cap2

PCの画面ではボタンの数を3つにすると横にキレイに並びます。

POINT

図のようにヨメレバ・カエレバでは【amazlet風-2(cssカスタマイズ用)】を選択してください。

上記のコードでは、ヨメレバ、カエレバ、どちらのコードにも使えます。また、ショップはアマゾン、キンドル、楽天ブックス、楽天市場、Yahooショッピング、価格.comの6種類のみ(楽天市場と楽天ブックスのクラス名は同じ)です。ご自身でいらないのは消したり、必要なものを付け足したり調整してください。

ボタンの数を変えたいときは、

ボタンを4つ表示してしまうと…

PCで見てみると、ひとつ下の方にはみ出す感じになります。(スマホ上では上手く並んで見えると思います)ボタンを4つ並べたい、または2つだけにしたい方は2番目にコピペした media Queries PCサイズ780px 以下の下記のところを、

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
float:left;
width:48%;
margin:3px 2px 0 auto;
padding:8px 1px;
}

このようにwitdthとmarginの値を変え、

.shoplinkyahoo a{
font-size:10px;
} 

この部分を削除。これでボタンが並ぶかと思います。

ボタンを自分好みにカスタマイズするには

ボタンのカスタマイズはこちらのサイトがおススメです。

左上の【Show Button Libraly】から好きな形状のボタンを選択します。

次にボタンの下の所から色を決め、好みのボタンを作ります。

作ったボタンをクリックすると右側にコードが出来てきます。これをコピペしていきます。

chap3

コピペの場所は 1番目にコピペしたmedia Queries タブレットサイズ780pxよりの部分。

.myButton(デフォルトの状態)  ⇒.hoplinkamazon, .shoplinkrakuten,~ 以下略の部分。

ATTENTION

レイアウトが崩れてしまうので、コピーしてきた方のフォントサイズとパディングは削除してください。

.shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkkakakucom {
width:90%;
margin:0  auto 5px auto;
padding:5px 2px;
text-align:center;
    ここにコピペ
}

上記の部分はそのまま、パディングとフォントサイズを削除したコードをコピペしてください。
ホバー、アクティブ部分はそのままコピペでOKです。class名は当サイトのコードのままです。

これでボタン部分も自分好みにすることが出来ます。PCで上手く並ばないときはwidth:30%の所やフォントサイズ、マージンなどで調整してみてくださいね!

まとめ

こんなすごいシステムを無料で提供してくださっているかん吉さん感謝です!

それでは、ちゅんこ@shufulifeがお送りしました。

STNGER5 WordPress

Please comment!

  

7件のコメント

  • うみにん 2016年2月9日 23:16

    ちゅんこ様

    はじめまして、うみにんと申します。
    カエレバを導入するためにネットをグルグルしているうちにこのサイトへ
    たどり着きました。「なんて綺麗に情報がまとまっているんだ!」と、
    驚きました。まだ導入はしていませんが、先んじて感謝の気持ちを伝えたく
    コメントしました。何か困った際には相談させてください。
    私もちゅんこ様のサイトのように、人に喜ばれる物を作っていこうと思います!

    (まだまだ立ち上げ段階のブログですが)お時間ある時にでも遊びに来て下さいね。
    今後とも宜しくお願い致します。

  • ライトニング2014 2015年6月9日 1:59

    こんにちは!
    記事参考にさせて頂きました。
    使ってみて思ったのですが
    カエレバの際、ヤフオクのボタンが表示が崩れていました。
    よく見ると記述がなかったので私は自力で追加できましたが
    コード修正されれば皆さん助かるかと思います。

    ご報告まで

    • ちゅんこ 2015年6月9日 11:47

      ライトニング2014様

      コメントありがとうございます。
      こちらの記事で紹介していますコードは、記事中にも説明がありますがアマゾン、キンドル、楽天ブックス、楽天市場、Yahooショッピング、価格.comの6種類のみ(楽天市場と楽天ブックスのクラス名は同じ)です。
      その他のボタンに関してましてはサイトの軽量化と、利用頻度から見ても不要かと思いますので追加の予定はございません。

      説明がわかりにくくて申し訳ありませんでした。

  • さらさらり 2015年5月7日 13:53

    はじめまして。こんにちわ。
    ヨメレバ・カエレバのカスタマイズCSSを使わせていただきました。
    テーマはStinger5ではないので、少し修正をしました。
    そのことを記事に書いて、コードも載せています。
    元のコードはちゅんこさんのものなので、コードをまるまる載せるのは、まずいかも?と思い、ご連絡しました。
    ちゅんこさんのものであると明記してはあります。
    問題でしたら、その旨ご連絡くださいませ。
    記事はこちらです↓
    http://wpblog.sara2jp.com/2015/yomereba-kaereba-customcss/

    お問い合わせから送ろうとしたのですが、文字列が表示されなくて送れませんでした。
    プラグインをインストールするようメッセージが出てます。

    • ちゅんこ 2015年5月7日 16:08

      さらさらり様

      コメントありがとうございます!
      お問い合わせフォームの件、申し訳ございませんでした。

      お問い合わせいただいた記事の件ですが、とくに問題ありません。記事をご紹介いただきましてありがとうございます!

      今後ともよろしくお願いいたします。

  • yasushi komatsu 2015年2月16日 23:12

    「.shoplinkamazon」をdisplay:inline-block;にし、cursor:pointer;とされていますが、クリックできるように見えて、「Amazon」などのテキスト上にしかリンクがない状態となっています。ボタンの端っこの辺りをクリックすると分かります。

    「.shoplinkamazon a」に対してdisplay:inline-block;やdisplay:block;にすることで解消されると思います。またcursor:pointer;の記述は不要になると思いますよ。

    • ちゅんこ 2015年2月17日 16:10

      yasushi komatsu様
      ご指摘ありがとうございます!
      さっそく修正させていただきました< (_ _)>

Messege




現在トラックバックはありません。