商品を紹介するツールとして有名な「ヨメレバ」「カエレバ」
これを導入するべきいろいろやりました。
ネットにいろいろカスタマイズするためのコードが載っていて、そこにある通りにやってみました。
でもなぜかレイアウトがくずれて、ボタンが互い違いになったり、ボタンが小さくて文字が全部入っていなかったり・・・。
スポンサーリンク
原因は「もしもアフィリエイト」を経由してることだった
管理人はアマゾンアソシエイトの審査に落ちたので（何度か挑戦したけどもう面倒くさくなった）
こちらのもしもアフィリエイトを使っています。
もしもアフィリエイトから「楽天」「アマゾン」の広告を取得することができるんです！！
楽天は申請したら即OK。
アマゾンは審査がありますが、本家の審査と比べたら楽なはずです。
管理人も申請して、すぐにOKが来ました。
その記事についてはこちら。
[blogcard url=”http://tennis-support.net/2017/10/21/%e3%80%8c%e3%82%82%e3%81%97%e3%82%82%e3%82%a2%e3%83%95%e3%82%a3%e3%83%aa%e3%82%a8%e3%82%a4%e3%83%88%e3%80%8d%e3%80%8c%e6%a5%bd%e5%a4%a9%e3%82%a2%e3%83%95%e3%82%a3%e3%83%aa%e3%82%a8%e3%82%a4%e3%83%88/″]
この「もしもアフェリエイト」を経由した時にレイアウトが崩れる原因は、「もしもアフィリエイト」の広告リンクに１ピクセル画像が挟まっているからだということが判明。
参照にしたサイトはこちら。
[blogcard url=”https://jyako10.com/web-customize/272″]
これでうまくいく～♪とウキウキしながら、ここのサイトのコードをを使ってやってみたけれど、なぜかうまくいかない・・・
またしばらく検索作業。。。。
この1行で解決！このコードでレイアウトのずれが直った！
ヨメレバを作った「かん吉」さんがこの１ピクセルをなおすコードを教えてくれてるサイトがありました。
[blogcard url=”http://www.wakatta-blog.com/yomereba-kaereba-users-customize.html″]
カスタマイズ方法のところを読んでください。
先頭にこの1行入れれば大丈夫らしい！！！
自分が使いたいヨメレバ、カエレバのデザインを変更するためのコードを探そう
ネットでさがせばいろいろ出てきます。
管理人はシンプルなボタンのCSSを参照しました。
[blogcard url=”http://www.yukihy.com/entry/kaereba-yomereba-custom″]
このサイトの「PC用」「スマホ用」コードを使いました。
WPのダッシュボードから、外観→テーマの編集→マテリアル２child→スタイルシートと進み、「選択」をクリックします。
入力は子シートに行います。
まず、バックアップをとります。
その後書き込んでいきます。
まずは「PC」用のコードをコピペします。
そしたら、先頭に１ピクセルを直すためのコードを挿入。
先頭ってどこよ？？って思いましたが、管理人は
/*————————————–
ヨメレバ・カエレバ（PC）
————————————–*/
.booklink-box, .kaerebalink-box{
このラインを入れたところに入れました。
とりあえずこれでうまくいきました。
同じように「スマホ用」のコードもコピペして挿入。
ここにも1ピクセルなくすコードを追加で入れました。
終わったら保存。
レイアウトがくずれずにできてるか確認してください。
この時に注意するのが、キャッシュが残ってると、CSSを変えても反映されないことが。
もし、CSSを変更したのに、レイアウトがまったく変わらずずれたままだったら、まずはキャッシュを消してください。
キャッシュを消すやり方は調べればすぐでてきますよ。
管理人はCSSの知識はほぼ無に等しくわからないので、このやり方をしましたが、どなたか違ってたら教えてください。
コメント
コメントはありません。