おおまめとまめ育児日記

2017年女児出産 育児中の記録 絵日記 料理

【小さい】楽天モーションウィジェットをスマホでも適正なサイズで表示【レスポンシブ】

【スポンサーリンク】

楽天の広告モーションウィジェットが小さく表示されるのを改善する方法

ブログやサイト運営をされている方は楽天の広告を付けている方が多いかと思います。
楽天モーションウィジェット(楽天の動く広告)を当ブログにも貼り付けているのですが...
PCから見るとちょうどいい大きさなのにスマホから見ると...
※赤枠内

サイトに貼られた楽天モーションウィジェット


なんだこれは??
誰がこんな小さな広告見るんだ?
サイズをかえてもPCしか変わらず、スマホでは常に写真のように横に細長い広告が表示されるのです。
かれこれ2ヶ月は悩み続けました。

皆どうやって大きくしているのか?
使っているテーマが悪いのか?
はてなブログだからか?
元々のHTMLソースが原因?

CSSやhtmlを使って色々な方法も試しましたが全く効果なし。
さすがに1ヶ月を過ぎたあたりから諦めムードでした。
しかしやっと改善方法がわかったのです!
スマホから見てもPCから見てもちょうど良い大きさの楽天モーションウィジェットになる方法をご紹介します。

原因は「もしもアフィリエイト」だった!

同じ状況で悩んでいる方はもしもアフィリエイトで楽天と提携しているはずです。
もしも経由で楽天のアフィリエイトリンクを貼っている状態ですね。

問題はそれです。

楽天アフィリエイトから直にHTMLソースをとりましょう。

楽天アフィリエイトは楽天会員では審査なく使用できます。
楽天でお買い物をしたことがある方ならば登録作業も一切ないのです。

楽天アフィリエイト

楽天アフィリエイトから直にとったコードを貼り付ければスマホから見た時にモーション広告が小さくなることはありません。

サイトに貼られた楽天モーションウィジェット


大きくなりました!
あっけなく解決しました。
2ヶ月長かった...でも本当に良かったー!

PCとスマホで楽天モーション広告を違うサイズにする方法

スマホで広告が小さく表示されることは解決しましたが、
PCとスマホに一緒のサイズの広告を貼るとPCでは小さくなるか、スマホでは見切れてしまう問題が発生します。

こちらのサイトが非常にわかりやすく、参考になりました。

lahatnggusto.com


CSSに掲載されているコードをコピペして、広告を掲載したい場所にPC用、スマホ用2種類のアフィリエイトリンクを貼るだけでできます。

毎日たくさんのブログを読ませて頂いていますが、小さな楽天モーションウィジェットを貼られている方をたくさんお見かけします。
皆様がそれを小さいと思っているかはわかりませんが、簡単に出来ますので、是非試して下さいね。

【悩み】目次のリンクが反応しない!

私ブログを始めて3カ月目なのですが、ブログのことで本当に困っていることが2つありまして、1つは今回の記事に書いた件で無事解決致しました。

もう1つ、はてなブログの大見出しがh3から始まることは有名ですが、その対策として、h3をh2に書き換えています。
そうするとはてな記法の目次[:contents]が使用できないのです。
目次自体は表示されるのですが、リンクが反応しません。
書き換えているので当たり前といえば当たり前です。
ネットで検索したところ、私が探した限りでは、同じ症状で困っている方を1人しか見つけることができませんでした。
しかも解決した方法は書かれていません。
どちらかというと目次のリンクが反応しないのは見出しコードを書き換えていたから!というような記事でした。
HTMLとCSSでどうにかできるかと試しましたが目次すら表示されなかったです・・・
どなたか解決法をご存知ではないでしょうか?
このままでは一生目次を使えません!ドヤァ( ・´ー・`)
これは試してみた?等でもコメント頂けるととても嬉しいです。

以上すごく困っているおおまめでした。

【追記】無事解決いたしました。
同じ症状で悩んでいる方はこちらをお読みください。
解決できます。
www.oomametomame.com



にほんブログ村 子育てブログへ