テニスサポート情報局

硬式テニスを頑張る子とその保護者のためのサイト

マテリアル2「カエレバ」の設置方法。レイアウトがくずれる原因は「もしもアフィリエイト」にあった。

calendar

reload

マテリアル2「カエレバ」の設置方法。レイアウトがくずれる原因は「もしもアフィリエイト」にあった。

商品を紹介するツールとして有名な「ヨメレバ」「カエレバ」

これを導入するべきいろいろやりました。
ネットにいろいろカスタマイズするためのコードが載っていて、そこにある通りにやってみました。
でもなぜかレイアウトがくずれて、ボタンが互い違いになったり、ボタンが小さくて文字が全部入っていなかったり・・・。

スポンサーリンク

原因は「もしもアフィリエイト」を経由してることだった

管理人はアマゾンアソシエイトの審査に落ちたので(何度か挑戦したけどもう面倒くさくなった)

こちらのもしもアフィリエイトを使っています。

もしもアフィリエイトから「楽天」「アマゾン」の広告を取得することができるんです!!
楽天は申請したら即OK。
アマゾンは審査がありますが、本家の審査と比べたら楽なはずです。
管理人も申請して、すぐにOKが来ました。
その記事についてはこちら。

この「もしもアフェリエイト」を経由した時にレイアウトが崩れる原因は、「もしもアフィリエイト」の広告リンクに1ピクセル画像が挟まっているからだということが判明。
参照にしたサイトはこちら。


これでうまくいく~♪とウキウキしながら、ここのサイトのコードをを使ってやってみたけれど、なぜかうまくいかない・・・

またしばらく検索作業。。。。

この1行で解決!このコードでレイアウトのずれが直った!

ヨメレバを作った「かん吉」さんがこの1ピクセルをなおすコードを教えてくれてるサイトがありました。


カスタマイズ方法のところを読んでください。

先頭にこの1行入れれば大丈夫らしい!!!

自分が使いたいヨメレバ、カエレバのデザインを変更するためのコードを探そう

ネットでさがせばいろいろ出てきます。
管理人はシンプルなボタンのCSSを参照しました。

このサイトの「PC用」「スマホ用」コードを使いました。

WPのダッシュボードから、外観→テーマの編集→マテリアル2child→スタイルシートと進み、「選択」をクリックします。
入力は子シートに行います。
まず、バックアップをとります。
その後書き込んでいきます。

まずは「PC」用のコードをコピペします。
そしたら、先頭に1ピクセルを直すためのコードを挿入。

先頭ってどこよ??って思いましたが、管理人は

/*————————————–
ヨメレバ・カエレバ(PC)
————————————–*/
                      
.booklink-box, .kaerebalink-box{

このラインを入れたところに入れました。

とりあえずこれでうまくいきました。

同じように「スマホ用」のコードもコピペして挿入。
ここにも1ピクセルなくすコードを追加で入れました。
終わったら保存。
レイアウトがくずれずにできてるか確認してください。

この時に注意するのが、キャッシュが残ってると、CSSを変えても反映されないことが。
もし、CSSを変更したのに、レイアウトがまったく変わらずずれたままだったら、まずはキャッシュを消してください。
キャッシュを消すやり方は調べればすぐでてきますよ。

管理人はCSSの知識はほぼ無に等しくわからないので、このやり方をしましたが、どなたか違ってたら教えてください。

folder 管理人・このサイトについて

管理人について
more...