アダルトアフィリエイト実践記

FC2ブログでのサンプル動画と画像のレスポンシブ対応をしよう

 


無料ブログでアダルトアフィリエイトを行う場合、ほとんどの方がFC2ブログを利用すると思います。

そして、DUGAのアダルト動画をアフィリエイトをする場合にサンプル動画を使用すると思います。

FC2ブログには通常のパソコン閲覧用のテンプレートの他にスマートフォン対応のテンプレートも設定することができます。

スマートフォン対応のテンプレートを設定すると、スマートフォンで閲覧した時に見やすい構成に自動で切り替わるようになります。

ここ最近、ワードプレスのレスポンシブ対応のテーマ「The world」でも、ただレスポンシブ対応のテーマを設定しただけでは、スマートフォンで閲覧した時に貼り付けたサンプル動画が画面からはみ出してしまうことがわかりました。

ワードプレスで作っているサイトのサンプル動画のレスポンシブ対応は完了したのですが、作業中にふと気になったことがあります。

「あれ?もしかしてFC2ブログのサンプル動画もはみ出してしまっているのでは??」と、、、。

そこでさっそくチェックしてみると、、、

あ~~~!!

やはり、思いっきりサンプル動画が切れてしまっています。

よく見ると、サンプル動画だけでなく、貼り付けた画像もはみ出てしまっているようです。

そこで、サンプル動画をスマートフォンとパソコンのどちらで見ても最適なサイズに設定する、レスポンシブ対応にする方法と、貼り付けた画像がはみ出ないようにする方法をご紹介します。

FC2ブログでのスマートフォン用テンプレートの設定

fc2 responsive

まず、スマートフォン用のテンプレートの設定方法からご紹介します。

■FC2ブログ 「設定」から「テンプレート設定」をクリック

■スマートフォン用テンプレートの「公式テンプレート追加」もしくは「共有テンプレート追加」から、お好みのテンプレートを選び追加する。

■「テンプレート管理」をクリックして、適用する。

これだけで一応のレスポンシブ対応は完了します。

FC2ブログでのサンプル動画のレスポンシブ対応の方法

続いて、こちらの記事でも紹介した方法で記事に貼り付けたサンプル動画をレスポンシブ対応にしていきます。

先ほど設定したスマートフォンテンプレートのスタイルシートに、こちらの記事のコードをコピペします。

CSSを使ってサンプル動画をレスポンシブ対応にする方法

これで貼り付けたDUGAのサンプル動画はレスポンシブ対応になりました。

FC2ブログに貼り付けた画像をレスポンシブ対応にする方法

FC2ブログで画像を挿入すると、このようなテキストが挿入されます。

・例

<img src="http://blog-imgs-00.fc2.com/adaruto01/adaruto.jpg" alt="adaruto 01" border="0" width="600" height="350" />

「width="600" height="350"」のように、高さや幅を指定しまうと、スマートフォンで閲覧した時にはみ出してしまいます。

そこで、そのテキストを、

<img src="http://blog-imgs-00.fc2.com/adaruto01/adaruto.jpg" alt="adaruto 01" border="0" width="100%" />

と、このように「width="100%"」と変えれば、パソコンで見てもスマートフォンで見ても、表示可能な横幅に合わせて画像を表示してくれます。

100%だと大きすぎる場合には90%や80%とパーセンテージを変えることで画像の幅を調節できます。

補足

■CSSやレスポンシブ対応にあまり詳しくないので、違っていたらごめんなさい^^;。

■スマートフォンの表示サイズは基本的に320pxらしいので、横幅が320pxを超える場合は気を付けた方が良さそうです。

まとめ

私はこれまでに3か月間、アダルトアフィリエイト教材の「点穴」を実践しています。

「点穴」は無料ブログで実施できるのが魅力で、私はFC2ブログを使って実践していますが、いまだにアクセスはほとんど0です。

これは、

  • 私が選んだジャンルが悪いのか
  • FC2ブログがグーグルにそっぽを向かれているのか
  • スマートフォンで閲覧した時に動画と画像がはみ出しまくっていたからか
  • まだサイト運営歴が短いからなのか

などの理由が考えられます。

しかしできれば、スマートフォンからの閲覧者も取りこぼさず、少しでもアクセスを増やして、グーグルの評価を上げていきたいので、しっかりとレスポンシブ対応をしていきたいと思います。

これまで投稿した約70記事を再設定しなければならないのでかなり面倒ですが、頑張ります、、、^^;。

 

点穴実践   0

この記事に関連する記事一覧

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: