ヨメレバ&カエレバ ちゅんこさんのカスタマイズを、Gush2でやってみました。

 

ヨメレバ・カエレバは、WinWinなブログパーツ(^^)

みんな知ってるブログパーツヨメレバカエレバ

アフィリとか少しも興味ないときから、見たことはあって、これはいいねと思っていました。そこに「アフィリエイトの取りこぼしを無くす」なんて目的があるとも知らず、ただ素直に「自分の好きなほうのショップに行けるのは便利だな」って思っていました。
これがブログパーツというもので、個人で提供してて、私も使えるって知ったのは最近のことです。こんなWinWinなパーツを使わない手はないってことで、登録しました。

運営なさっているのは、わかったブログかん吉さんです。

ちゅんこさんのカスタマイズはデザインが素敵(^.^)

ヨメレバ・カエレバの利用上の注意に「ロゴアイコンは商標的に問題かもしれないから自己責任で」って書いてあって、どうしようかなぁとうろうろしてたら、ちゅんこさんが、すごくいい感じのカスタマイズを公開してくださっていました。
コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ – Shufulife

「このコード、Gush2でも使えるんじゃない?」と思ってやってみたわけです。
ちょこちょこと修正が必要でしたが、こんな風になりました。
ほんと、デザインがとても素敵です。

ちゅんこさんのコードからの変更点

セブンネット用の記述を追加

「アマゾン、キンドル、楽天ブックス、楽天市場、Yahooショッピング、価格.comの6種類のみ」だったので、セブンネットを追加しました。
セブンネットには、価格コムの青色を割り当ててます。私は価格コム使いそうもなかったので(^^ゞ

Gush2向けに修正

ボタンが大きくなってしまったから修正

Stinger5用コードのままだと、こんな風にボタンが大きくなっちゃいました。
ヨメレバ ボタンが大きくなっている原因は、アフィリリンクに隠れている1ピクセルのimgでした。
Gush2は、記事本文のimgに24pxの下マージンが設定されているので、ボタンが24px大きくなってしまったのです。
display:noneにすることで対応しました。 (スマホ用記述の116行目)

外枠も大きくなってしまってるから修正

ボタンの大きさを直しても外枠は大きいままです。表紙画像の下にも1ピクセルimgが隠れているからです。
ヨメレバ 枠が大きいままこちらは、display:noneにすると表紙画像も消えちゃうので、!important付きmarginで下マージンを0pxにしました。(スマホ用記述の18行目)

スマホ画面のボタンがずれちゃってたから修正

スマホ画面でボタンが微妙にずれています。
ヨメレバ スマホ画面でボタンがずれてるdisplay:inline-blockをdisplay:blockに変更するとずれが解消します。(スマホ用コード62行目)
Stinger5ではinline-blockで大丈夫だったのに、何がどう影響しあってGush2ではずれてしまうのか、わかりません。つまり原因をはっきり特定できていないです。でも、直るからいいやってことで。

Gush2へのコード追加方法

コードを入れる位置

カスタマイズCSSコードはスマホ用とPC用と2つあります。
Gush2の Style.css の記述は、こんな順序になっています。

スマホ用コードを【スマホ・タブレット・PCの記述】のどこかに、PC用コードを【PCの記述】のどこかに入れます。

Gush2のCSSの構造について、詳しくはGush2説明書をご覧ください。
基本的なCSSカスタマイズ方法|レスポンシブWebデザイン用CSSの基本構成と条件分岐タグ|Gush2説明書

スマホ用コード

style.css のスマホ用の位置に入れるコードです。
色つきの行は、Gush2での表示ずれを直すために変更した行です。参考までに色をつけときました。

PC用コード

style.css のPC用の位置に入れるコードです。

@importは使わないほうがいいみたい

これだけ長いコードなら別ファイルで置いたほうがいいかな?と思ったのだけど、速度がそうとう遅くなるようなのでやめました。
@importでcssを読み込む方法と、そうしない方がいい理由 | WEBに関するあれこれ解決!
CSS @import を使用しない Google PageSpeed Insights

こんな方法だと、むしろ早くなるみたいだけど、私には難しそうなので却下です。
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | Developers.IO

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

デザインは「amazlet風-2(cssカスタマイズ用)」アイコンは「なし」を選びます。

ヨメレバ ブログパーツ生成画面 デザイン選択

ボタンは3個がよいようです。
ヨメレバ・カエレバでのデザイン選択|コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ – Shufulife

かん吉さんとちゅんこさんに感謝です(^o^)

Gush2用の修正は、終わってみれば簡単な変更(3行だけじゃん)なんだけど、修正すべき箇所を特定するのはなかなか大変だったので、シェアする価値があると思って、記事を書いてみました。

この記事に載せているコードはちゅんこさんが作ったのをちょこっと変えただけってことを、強調しておきたいと思います。
ちゅんこさんのページには「ボタンのカスタマイズ方法」も載っています。
ボタンを自分好みにカスタマイズするには|コピペで完了!STINGER5でヨメレバ・カエレバのカスタマイズ – Shufulife

かん吉さんとちゅんこさんに、感謝です。
いっぱい商品紹介して、稼いじゃうぞ。\(^o^)/

かん吉さんが最近出版された本です。

Kindle版しかないから、ヨメレバの価値がイマイチ発揮されませんね(^_^;)

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

コメント一覧

  1. […] そして、その情報はググッて10分ほどで見つかった。  さらさらぶろぐ  1 userヨメレバ&カエレバ ちゅんこさんのカスタマイズを、Gush2でやってみました。http://wpblog.sara2jp.com/ […]

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。