ヨメレバ＆カエレバ ちゅんこさんのカスタマイズを、Gush2でやってみました。
目次
ヨメレバ・カエレバは、WinWinなブログパーツ(^^)
アフィリとか少しも興味ないときから、見たことはあって、これはいいねと思っていました。そこに「アフィリエイトの取りこぼしを無くす」なんて目的があるとも知らず、ただ素直に「自分の好きなほうのショップに行けるのは便利だな」って思っていました。
これがブログパーツというもので、個人で提供してて、私も使えるって知ったのは最近のことです。こんなWinWinなパーツを使わない手はないってことで、登録しました。
ちゅんこさんのカスタマイズはデザインが素敵(^.^)
ヨメレバ・カエレバの利用上の注意に「ロゴアイコンは商標的に問題かもしれないから自己責任で」って書いてあって、どうしようかなぁとうろうろしてたら、ちゅんこさんが、すごくいい感じのカスタマイズを公開してくださっていました。
コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ – Shufulife
「このコード、Gush2でも使えるんじゃない？」と思ってやってみたわけです。
ちょこちょこと修正が必要でしたが、こんな風になりました。
ほんと、デザインがとても素敵です。
ちゅんこさんのコードからの変更点
セブンネット用の記述を追加
「アマゾン、キンドル、楽天ブックス、楽天市場、Yahooショッピング、価格.comの6種類のみ」だったので、セブンネットを追加しました。
セブンネットには、価格コムの青色を割り当ててます。私は価格コム使いそうもなかったので(^^ゞ
Gush2向けに修正
ボタンが大きくなってしまったから修正
Stinger5用コードのままだと、こんな風にボタンが大きくなっちゃいました。
原因は、アフィリリンクに隠れている１ピクセルのimgでした。
Gush2は、記事本文のimgに24pxの下マージンが設定されているので、ボタンが24px大きくなってしまったのです。
display:noneにすることで対応しました。 （スマホ用記述の116行目）
外枠も大きくなってしまってるから修正
ボタンの大きさを直しても外枠は大きいままです。表紙画像の下にも１ピクセルimgが隠れているからです。
こちらは、display:noneにすると表紙画像も消えちゃうので、!important付きmarginで下マージンを0pxにしました。（スマホ用記述の18行目）
スマホ画面のボタンがずれちゃってたから修正
スマホ画面でボタンが微妙にずれています。
display:inline-blockをdisplay:blockに変更するとずれが解消します。（スマホ用コード62行目）
Stinger5ではinline-blockで大丈夫だったのに、何がどう影響しあってGush2ではずれてしまうのか、わかりません。つまり原因をはっきり特定できていないです。でも、直るからいいやってことで。
Gush2へのコード追加方法
コードを入れる位置
カスタマイズCSSコードはスマホ用とPC用と２つあります。
Gush2の Style.css の記述は、こんな順序になっています。
|
1 2 3 4 5 6 7 8 9 10 |
【スマホ・タブレット・PCの記述】 @media screen and (min-width : 768px){ 【タブレット・PCの記述】 } @media screen and (min-width : 1024px) { 【PCの記述】 } |
スマホ用コードを【スマホ・タブレット・PCの記述】のどこかに、PC用コードを【PCの記述】のどこかに入れます。
Gush2のCSSの構造について、詳しくはGush2説明書をご覧ください。
基本的なCSSカスタマイズ方法｜レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ｜Gush2説明書
スマホ用コード
style.css のスマホ用の位置に入れるコードです。
色つきの行は、Gush2での表示ずれを直すために変更した行です。参考までに色をつけときました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
/*-------------------------------------- ヨメレバ・カエレバ スマホ --------------------------------------*/ .booklink-box, .kaerebalink-box{ width:85%; margin: 1em auto 1em auto; padding: 5%; border:double #CCC; overflow: hidden; font-size:small; } .booklink-image, .kaerebalink-image{ margin:0 0 15px 0; } .booklink-image img, .kaerebalink-image img{ display:block; margin:0 auto 0 !important; 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; font-family:verdana; line-height:120%; } .booklink-powered-date, .kaerebalink-detail{ margin-bottom:15px; } .booklink-link2, .kaerebalink-link1{ margin-top:20px; } .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven, .shoplinkkakakucom { width:90%; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6)); background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%); background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0); background-color:#ffffff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:block; margin:0 auto 5px auto; padding:10px 2px; text-align:center; } .shoplinkamazon:hover, .shoplinkrakuten:hover, .shoplinkkindle:hover, .shoplinkyahoo:hover, .shoplinkseven:hover, .shoplinkkakakucom:hover{ background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff)); background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%); background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0); background-color:#f6f6f6; } .shoplinkamazon:active, .shoplinkrakuten:active, .shoplinkkindle:active, .shoplinkyahoo:active, .shoplinkseven:active, .shoplinkkakakucom:active { position:relative; top:1px; } .shoplinkamazon a, .shoplinkrakuten a, .shoplinkkindle a, .shoplinkyahoo a, .shoplinkseven a, .shoplinkkakakucom a{ text-decoration:none; font-weight:800; text-shadow:1px 1px 1px #dcdcdc; font-size:12px; display:block; } .shoplinkamazon a{ color:#FF9901; } .shoplinkrakuten a{ color:#c20004; } .shoplinkkindle a{ color:#007dcd; } .shoplinkseven a{ color:#314995; } .shoplinkkakakucom a{ color:#314995; } .shoplinkyahoo a{ color:#7b0099; } .shoplinkamazon img, .shoplinkrakuten img, .shoplinkkindle img, .shoplinkyahoo img, .shoplinkseven img, .shoplinkkakakucom img{ display:none; } .booklink-footer{ clear:left; } /*-------------------------------------- ヨメレバ・カエレバ ここまで --------------------------------------*/ |
PC用コード
style.css のPC用の位置に入れるコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/*-------------------------------------- ヨメレバ・カエレバ PC --------------------------------------*/ .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.5em; } .booklink-link2, .kaerebalink-link1{ margin-top:10px; } .shoplinkamazon, .shoplinkrakuten, .shoplinkkindle, .shoplinkyahoo, .shoplinkseven, .shoplinkkakakucom { float:left; width:30%; margin:15px 2px 0 auto; padding:8px 1px; } .shoplinkyahoo a{ font-size:10px; } /*-------------------------------------- ヨメレバ・カエレバ ここまで --------------------------------------*/ |
@importは使わないほうがいいみたい
これだけ長いコードなら別ファイルで置いたほうがいいかな？と思ったのだけど、速度がそうとう遅くなるようなのでやめました。
@importでcssを読み込む方法と、そうしない方がいい理由 | WEBに関するあれこれ解決！
CSS @import を使用しない Google PageSpeed Insights
こんな方法だと、むしろ早くなるみたいだけど、私には難しそうなので却下です。
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる ｜ Developers.IO
ヨメレバ・カエレバでのデザインの選択方法
デザインは「amazlet風-2(cssカスタマイズ用)」アイコンは「なし」を選びます。
ボタンは３個がよいようです。
ヨメレバ・カエレバでのデザイン選択｜コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ – Shufulife
かん吉さんとちゅんこさんに感謝です(^o^)
Gush2用の修正は、終わってみれば簡単な変更（３行だけじゃん）なんだけど、修正すべき箇所を特定するのはなかなか大変だったので、シェアする価値があると思って、記事を書いてみました。
この記事に載せているコードはちゅんこさんが作ったのをちょこっと変えただけってことを、強調しておきたいと思います。
ちゅんこさんのページには「ボタンのカスタマイズ方法」も載っています。
ボタンを自分好みにカスタマイズするには｜コピペで完了！STINGER5でヨメレバ・カエレバのカスタマイズ – Shufulife
かん吉さんとちゅんこさんに、感謝です。
いっぱい商品紹介して、稼いじゃうぞ。＼(^o^)／
かん吉さんが最近出版された本です。
Kindle版しかないから、ヨメレバの価値がイマイチ発揮されませんね(^_^;)
[…] そして、その情報はググッて10分ほどで見つかった。 さらさらぶろぐ 1 userヨメレバ＆カエレバ ちゅんこさんのカスタマイズを、Gush2でやってみました。http://wpblog.sara2jp.com/ […]