ブログ

Bloggerへの楽天モーションウィジェットの貼付け方法（自己責任）

以前自分のブログについて考えるで書きましたが

スマホをからの閲覧を第一に作成することの重要性がやっとわかった

と書きました、私のブログを見て頂いていお分かりになるかと思いますが、全然変わっていませんでした<(_ _)>

自身のブログを昨晩布団の中で確認していると・・・

「何じゃコリャ！？」楽天アフィリエイトが画面からはみ出しているじゃないですか？？？

てっきりスマホ用に自動で変換されているもんだと思っておりました。はっきり言って他人まかせ、自分の良いように解釈をしておりました。

上段パソコン用アフィリエイト、下段スマホ用アフィリエイト

上記画像は楽天アフィリエイトの楽天モーションウィジェットを貼った画像です、見ての通りはみ出しちゃっています（大変みっともないです）。

下段はスマホ用として用意されている画像です

楽天モーションウィジェット　サイズの選択画面

スマホ用を貼れば良いのかもしれないのですが、そうするとPCで見るときに画像が小さすぎます。

いくら

スマホをからの閲覧を第一に作成することの重要性がやっとわかった

とはいえ出来れば何とかしたいと思い解決策を・・・
（ただし自己責任でお願い致します）

CSSを使うと無事に解決出来るようです。
さっそく挑戦してみました。

私は通常パソコンでサイズ600×200、スマホ用は320×48を使用しているのでこれを基本にお話ししたいと思います。

実際にどうするかというと今回私はディスプレイが480より大きい場合は600×200を表示し、ディスプレイが480以下の時は600×200を表示するように変更したいと思います。

しかしCSSの本を読んで昨日より挑戦をしているのですがなかなか上手くいきません・・・
やっぱりgoogle先生の登場です検索してみると出てきました
下記画像が「ラハト・ナン・グスト」さんの「楽天モーションウィジェットをPC・スマホで切替＆その他の裏技」より一部引用させて頂いた記事となります。

まさしく、私が行いたいことが解説されています、ラハト・ナン・グストさん有難うございます<(_ _)>

しかし、まだブログを始めたばかりの私には記載されている通りに行ているつもりなのですが。思うようにいきません。

本を読んで1日、ラハト・ナン・グストさんのページを読んでさらに半日ほどすったもんだしている状況です・・・
が何とか出来ました。

そこで、忘備録兼私と同じ初心者の方のためにもっと細かく書いていきたいと思います。

どこが悪かったのか？：CSSの記載場所を理解出来ておらず、間違った場所に記載していた。

これさえクリアできればこの先もCSSを用いて色々出来ると思います。

ではさっそく

• CSSの記載場所を開く：Bloggerにログイン→更新するブログを選択→「テーマ」→「カスタマイズ」→「上級者向け」→「CSSを追加」

• 上記「カスタムCSSを追加」に記載コードの記載をします（ここに気が付く迄１日半かかりました）記載をしたら「ブログに追加」を忘れずに行ってください。

私が記載したコード（ラハト・ナン・グストさんの記載をちょいと私ように変更したものですが・・・。ラハト・ナン・グストさん有難うございます<(_ _)>）下記赤字をそのままコピペもしくは数値を自分好みに変更してください。

「

/* rakuten motion---------------------------- */

@media only screen and (min-width: 481px){

#rakuten320 {       display:none;}

}

@media screen and (max-width: 480px){

#rakuten600 {       display:none;}

}

」

• 次に実際のブログに戻り実際の記事を書きます、そしていよいよ「楽天アフィリエイトのモーションウィジェット」を貼りつける時が来ました！！

まずは楽天アフィリエイトのモーションウィジェットを表示させたい場所に下記コードを記載しちゃいましょう、先程と同じように赤字をコピペです

「

<div id="rakuten600">600×200のコード</div>
<div id="rakuten320">320×48のコード</div>

」

• 次につまづいたのがここです、上記赤字コードの太字の所にそれぞれの大きさの「楽天アフィリエイトのモーションウィジェット」を上書きします。

これで保存を行い無事にパソコンとスマホで表示が切り替わったか確認をしてみて下さい。

表示が切り替わっていればOK、ダメならきちんと出来ているか確認してみましょう。