月別アーカイブ: 2013年12月

Webサイトに広告を表示

「レセールライトアソシエイツ」に広告を表示してみました。
ひとつは、Google AdSenseです。
そしてもうひとつは、Amazonアソシエイトです。

Google AdSenseに関してはアカウントを持っており、
既に他のサイトでやった経験があるので、
広告を表示するサイトのURLを管理画面から追加すれば良いだけです。

AdSenseは最初のサイトで承認されれば、あとは承認なしに自由にサイトを追加できるので楽です。

ということは、人のコードを勝手に自分のサイトに貼りつけることもできるので、悪意のある人に利用されないように、管理画面から「自分のアカウントで特定のサイトの広告表示のみを許可する」にチェックを付け、サイトのURLを登録しておくことが必要です。

AdSenseでは、サイトを訪問したユーザーに適した広告が自動で配信されますので、こちらとしては表示設定さえすればあとは何もする必要がありません。

広告のサイズは色々ありますが、Googleで効果が高いと推奨している次のサイズを表示させました。
・レクタングル(中) 300×250
・レクタングル(大) 336×280
・ビッグバナー 728×90
・ワイドスカイスクレイパー 160×600

サイトのレイアウトを決める際、Google AdSenseや他の広告のサイズを念頭に入れてありましたので問題はありません。

Amazonアソシエイトは今回初めて申請しました。
夜に申請したら、次の日の午前中には、承認のメールが届き、広告を表示することが可能になりました。

なお、Amazonの場合はサイトを追加する際、追加申請をして承認が必要になりますので注意しましょう。

Amazonアソシエイトに関しては初めてだったので、どういうものを表示させればいいのか全く分かりませんでした。
調べてみると、ページ内容に合った商品を自動的に表示する「Amazonおまかせリンク」というものがあったので、これを表示させてみました。
ただ実際に表示された商品を見ると、どうもページ内容に合っているとは思えませんでした。
「ベータ版」ということなので、まだちゃんと機能していないのかもしれません。

そこで、サブページではそのページに合った商品を自分で選び、表示するようにしました。
これは「お気に入りウィジェット」という中に複数の商品を並べて表示するようにしました。

Amazonの場合は色んなやり方があり、まだまだ研究の余地がありそうです。

「リセールライトアソシエイツ」モバイルサイトオープン

PCサイトは出来ていたし、モバイル用のデザインも昨日済んでいましたので、あとはグリグリとコーディングしました。

制作中のデバッグは、SafariとChromeのユーザーエージェントをモバイルに切替えて行いました。
また、iPhoneの画面がそのまま表示されシミュレートできる「Mobilizer」というソフトもデバッグに使っています。

ブラウザや専用ソフトでシミュレートできるのは非常に便利なのですが、それぞれ表示が微妙に違うこともあります。
従って最後は実機で確認しないと安心はできません。
しかし、私はAndroid端末は持っているのですが、iPhoneは持っていないので、どうしてもシミュレーターに頼ってしまいます。

また、実機は何百種類とあるのですから、確認にも自ずと限界があり、ある程度の「表示不具合」は勘弁してもらわないとやってられないのが実情です。

今回は自分のサイトですので、コーディングおよび確認作業は1日と決めており、何とかその時間で終えました。
WordPressで制作したサイトですので、モバイルサイトはPCサイトの子テーマにして、ユーザーエージェントで切り替えるようにしました。
URLはPCサイトもモバイルサイトも変わりません。
http://resaleinfo.net

これで、リセールライトアソシエイツのドメインには、PCサイト、モバイルサイト、ブログサイトと3つのサイトが同居することになりました。

モバイルサイトの制作

リセールライトアソシエイツ(resaleinfo.net)を12月1日にオープンしましたが、
PCサイトしかできていなかったので、モバイルサイトの制作を行いました。

モバイルといっても、スマホの他、タブレットやフィーチャーフォンもありますが、今回はスマホのみの対応としました。

「タブレットはPCサイトを表示すれば良い」というのが私の考えです。
私自身、タブレットを操作していて、スマホ向けに作られた画面を表示したいと思ったことはありません。
ご丁寧に、スマホ向け、タブレット向けと分けてページを作っているサイトもありますが、タブレットでPC用に表示を切り替えることができないサイトは最悪です。

ということで、画面解像度でいうと、320px~640pxくらいの対応としました。
7インチを超えるサイズのデバイスは、PCサイトを表示させればいいのです。

しかしいつも思うのですが、スマホの機種の多さ、というよりスペックの多さは何とかならないでしょうか。
Web制作者にとっては、昔のIE対応のような煩雑さだと実感しています。

PCの場合は、Windowのサイズを変更できるため、ディスプレイサイズは問題になりません。
しかし、モバイルデバイスの場合は基本的に、ブラウザは画面一杯に表示されサイズ変更できませんので、物理的なディスプレイサイズを”相当”考慮に入れなければなりません。
しかもそのサイズに統一性はなく、各メーカーが勝手に決めているのです。

おそらくあと数年は、モバイルデバイスについてのChaosは続くでしょう。
そしてWeb制作者は色んな技を駆使しながら、何とか対応をしていくのです。

さて、モバイルサイトのデザインですが、横幅320pxを基準に考えますが、それ以上になった場合も見苦しくならないようにレイアウトします。
また、画像もかなりファイルサイズに注意しながら作成しました。

レスポンシブWebデザインだと、PCサイトのコンテンツをそのまますべてレイアウトを変えて表示するのですが、
モバイル専用にせっかくデザインするのですから、PCサイトにある冗長なコンテンツを省き最適化を図りました。
何たって、画面サイズが小さいのと、回線速度の遅さを考えるとコンテンツ量も適切に制御しなければなりません。

PCサイトでは、これでもかってくらいに散らばせておいたナビゲーションも絞り込みましたし、
コンテンツとコンテンツの間にある空白は少なくしました。

というわけで、とりあえず1日で出来る範囲でモバイルサイトのデザインを完成させました。
明日はコーディングして、何とかリリースまでこぎつける予定です。

「リセールライトアソシエイツ」オープン

やっと、サイトをオープンする日になりました。

サイト名は、「リセールライトアソシエイツ(Resale Rights Associates)」
http://resaleinfo.net

ちゃんとアクセスできることは昨日確認できていたので、
Google AdSense広告のコードを組込みました。
※表示枠は空けておいてあります。

それから、Googleアナリティクスで新規プロパティを作成し、解析コードを組み込みました。

最後にGoogleウェブマスターツールで所有サイトに追加し、インデックス登録のリクエストをしました。

夜、検索エンジンで調べて見たら、ちゃんとインデックス登録されていましたので、無事ネット上へのオープンとなりました。