« 俺流amazonの作り方 | トップページ | 楽天アフィリエイトの画像を左寄せ、右寄せにしたい »

2006年3月13日 (月曜日)

アフィリエイトリンクを右寄せ、左寄せにしたい

 アソシエイトリンク作成時に画像+テキストの情報をもっと自在にレイアウトしたい、ってときに使えるブックマークレット。右寄せ、左寄せが自由にできるっていうやつ。名前は「sel2lr」。ただし、IE専用。

 ブログでお気に入りの商品、自分が購入した商品のレビューを書くことはよくある。写真も載せたいな、とか、ついでにアフィリエイトもしておくか、これで儲かればラッキー、とかいろいろ思うわけで。

 で、よく使うのはAmazonアソシエイト。本家のツールは使いにくいからG-Tools使ってみたりするわけですが。このサービスを使ったブックマークレットなんかはとくに便利。amazletとかfun9.netでもいいんですが。

 で、両者のサービス。デザインが複数あるんだけど、どうも帯に短し、襷(たすき)に長し。だったりしませんか?

 たとえば、価格だとか、発売日はいらないんだよなあ。画像とタイトルだけでいいんだよなあ。とか。確かにそういうのはあるんだけど、本文とうまいことデザインしたいんだよなあ、とか。とくに、画像とデータの横が空きすぎちゃう、とか。たとえば、こんな感じ。

saku saku Ver.2.0 ヴィンの復習
木村カエラ
B000E1ZBZY

 うーん。惜しい。この無駄なスペースもったいない。とか。いかにもG-Toolsです! って感じとか。

 じゃあ、こういうのはどうかな?

 今日、こんなDVD買いました。このDVDはテレビ神奈川ことtvkで放送されている番組で。以下、いろいろ。  でもって、内容はこんな感じです。

 とか、そういうレビューを書く。どうだろう。これなら、無駄なスペースもないし、見た目もすっきり、とかそういう感じ。

 こういうのをやりたくって、毎回、CSS、というか、スタイルシートを書いてたんですが、それも面倒。こういうときこそ、ブックマークレットだ! ってことで、書いてみたのが、これ。回り込み(まわりこみ)を簡単に指定できます。

 「sel2l」ってのが左寄せで、「sel2r」ってのが右寄せ。

 sel2l | sel2r

 上記リンクをお気に入りにドラッグ、あるいは、右クリックで「お気に入りに追加」すれば準備OK。

 その後、いつもどおり、G-toolsブックマークレットその他でリンクをエントリ作成時に貼り付けたら、第一段階終了。でもって、そのコード全体を選択してから、ブックマークレットを実行すれば、右寄せあるいは左寄せのコードが追加されます。

 さらに。ブログのスタイルシート(CSS)が変更できるなら、さらなるカスタマイズが可能です。作成されるコードには、「sel2lr」っていうクラス(class)を当ててあるので、幅や背景、色、文字のサイズなども指定可能になります。

 上で示してある例にはこんなclassが指定してあります。

.sel2lr { line-height: 130%; font-size: xx-small; background-color: #eeffff; width:170px; }

 幅指定は「width:」って部分なんですが、これは利用する画面サイズによって変えればいいでしょう。また、CSSはいつも使うものにしておいて、一部のリンクには別の幅を指定したい、っていう場合には、ブックマークレットでコードを貼り付けたあとで、「style="float:right;"」を「style="float:right;width:○○px;"」って加えればいいと思います。どうでしょう? とりあえず、170ってのはCDやDVDなどの正方形で中サイズ用にほぼぴったり、ってことで。右側にタイトル回り込ませるやつとかの場合も具合がいいです。

 ついでに左寄せの例。こっちはamazletで作成したコードを、sel2lrで挟んでます。幅をなんとかしたかったので、これは「width」で240とかを指定してます。ブログのデザインによってはなんかおかしいかもしれないけど、まあ、そこはうまくやってくださいな。まわりこみを解除したい場合はclearとかを使うといいと思います。

 ブックマークレットの名称は適当。「amL-R」に準拠しようかと思ったけどやめた。とりあえず、短いほうがいいだろう、ってのは共通。それから、最初にWindowsのIE用に作って、FirefoxとかSafari用も作ろうと思ったけど、同じようにはいかないことが判明したので、気が向いたら作るかも、っていうくらいの方向で。それから、楽天広場の人は同じブックマークレットではうまくいかないので、あとで別エントリ設けます。「楽天アフィリエイトの画像を左寄せ、右寄せにしたい」が、それ。こちらも回り込みのためのやつ。

 ずっと使ってきたブックマークレット(Bookmarklet)ではありますが、コピペミスで動かない可能性もあります。「動かねーよ!」「思い通りにいかねーよ!」って方はコメントやトラックバックでお知らせください。「使ってるよ!」っていう報告もありがたいです。


|

« 俺流amazonの作り方 | トップページ | 楽天アフィリエイトの画像を左寄せ、右寄せにしたい »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/9075581

この記事へのトラックバック一覧です: アフィリエイトリンクを右寄せ、左寄せにしたい:

« 俺流amazonの作り方 | トップページ | 楽天アフィリエイトの画像を左寄せ、右寄せにしたい »