カエレバのリンクをレスポンシブで貼った感想☆SimplicityとSANGOの場合

こんにちはビデトです☆

この記事では、Amazonや楽天、Yahoo!ショッピング等のアフィリエイトリンクを貼る手順を、２つの環境で導入した際の備忘録になっています。

環境はワードプレスブログで、テーマは「Simplicity」と「SANGO]を使用している一例なのでよろしくお願いします。

カエレバのリンクを貼るには

カエレバのリンクをブログに貼るには、各種ASPさんとの広告提携を済ませ、アフィリエイトIDが必要になります。

そのIDを使ってリンクコードを生成するので、まだの方は下の記事を参考にしてカエレバの設定を完了させて下さい↓

カエレバともしもアフィリエイトの連携方法☆まとめてリンク作成で効率アップ

結論から言うと、思ったより大変だった！

「SANGO」の方は、テーマの方で予めCSSが指定されているのですんなり。さすが有料のテーマって感じでコードを入力したら、そのままボタンまで表示されました。スゴイ！

ところが意外に苦戦したのがSimplicityの方で、情報も豊富なテーマだからすぐ出来るだろって思ってたのが嘘のよう、かなり時間がかかってしまいました。

試してダメ→試してダメ→トラブル

ブログの作成って、他の人がウマくいっててもいざ自分がやったらダメだったパターンってけっこうあるんですよね～

今回はそのパターンだったので、似たような症状の人の参考になったら幸いです。

SANGOの場合

カエレバなら挿入時にamazlet風-2(cssカスタマイズ用)にするだけと書いてありますね。

やってみると～

マジだったｗスゴイよSANGOさん、こういうところが有料テーマのいいとこでもありますよね☆

Simplicityの場合

SANGOがそのまま利用できることを知り、すぐに「カエレバ　Simplicity」で検索。

トップの記事が参考になりそうだったので、CSSをコピーさせてもらい、SimplicityのCSSに貼り付けてみました。

参考にした記事↓

検索トップの記事を参考にした

「テーマ編集」からのスタイルシートとmobileの二ヵ所に追記する方法で、すぐに終わると思いきや・・・

→CSSの中間あたりの一行が、エラーで更新したらダメな雰囲気。

その時×の付いた行を、とりあえずbackspaceを２回ほど押して、左に詰めたら大丈夫だったので更新。

おっ！PCの方はイイ感じ☆スマホの方は・・・ダメだボタンになってない。

調べてみると、スマホは完全レスポンシブじゃないとダメとのこと。

レスポンシブ用のCSSを貼ってみる

気を取り直して次は「カエレバ　レスポンシブ」などで検索して、良さげなデザインのCSSを実行。

「外観」→「テーマの編集」→responsive.cssから一ヵ所のみに挿入しました。

参考にした記事↓

するとボタンは出るけど、一個ズレている状態に。惜しい！

ここからまた、ズレを直すために戦いが始まるのですが、けっこう同じ状況の人が多く、何個か見ているうちにしっくりきそうな記事を発見。

参考にした記事↓

読んだ感じだと、CSSに抜けてる部分があるからズレてしまうとのこと。

その足りない部分というのが下の２行になります。

.shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}

早速該当部分に、２行を挿入してみました。

「外観」→「テーマの編集」→responsive.cssから下の方にスクロールして「ボタンを変えるときはここから」のちょっと下。

この部分ですね！これを足したらズレは解消して、綺麗なボタン配置になりました。

スマホの方も確認したところ、ばっちりだったのでコレで終りかと思ってたんですけどね～

表示が崩れるトラブル

安心したのも束の間、記事を書いてアップしたところ、PC表示もスマホの方も何か色々不具合が出ているようでした。

• PC表示のサイドバーが下にいっちゃった。
• 関連記事が横一杯に表示。
• スマホの方はスワイプすると画面が揺れる。
• フッターが倍の太さで表示されている

もうボロッボロｗとても見せれる状態ではありませんでした。

でも幸いなことに、カエレバを貼ったページ以外は平気だったんですよね。

なので、問題は新しく書いた記事にしか問題がないと予想。

原因

普段と違った作業としては、記事を書き終えた後、見慣れない空白を消したような・・・

そこで、一度カエレバで作成したリンクを貼り直したところ、戻った！

無事カエレバのリンクも綺麗に貼れて、スマホの方もちゃんと表示され記事をアップすることができました☆

今までも、文章と画像の間を詰めすぎると、表示崩れが起きていたので、そこに問題があったようです。

もし同じように崩れたら、上記の事を試して表示が直るかもしれませんね。

思ったこと、伝えたいこと

いや～今回はホントに最後はできてよかった。

実際は文以上に時間かかったし、めっちゃ焦りましたｗ

でも、同じような悩の人達のおかげで、解決策が見つかり凄く助かってます。

悩みも乗り越えれば経験なので、トラブルが起きてもしっかり向き合って解決したいですね！

難しいのはカンベンｗ