☆便利なサービスをチェック☆

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

カエレバ、ボタンとズレ

こんにちはビデトです☆

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

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

 

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

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

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

 

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

 

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

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

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

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

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

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

SANGOの場合

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

やってみると~

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

Simplicityの場合

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

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

参考にした記事↓

参考

Simplicityでヨメレバ・カエレバを綺麗に貼るCSSカスタマイズ4mirai

 

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

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

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

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

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

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

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

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

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

参考にした記事↓

参考

メレバ・カエレバのデザインをCSSで変更するカスタマイズ!<br /> Yukihy Life

 

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

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

参考にした記事↓

参考

カエレバをカスタマイズしてみたらリンクのボタンがずれた時の一つの解決法慢性胃炎克服ブログ

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

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

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

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

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

 

/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkrakuten img{display:none;}
.shoplinkamazon img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

 

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

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

表示が崩れるトラブル

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

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

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

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

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

原因

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

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

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

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

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

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

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

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

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

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

難しいのはカンベンw

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)