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

 アソシエイトリンク作成時に画像+テキストの情報をもっと自在にレイアウトしたい、ってときに使えるブックマークレット。右寄せ、左寄せが自由にできるっていうやつ。名前は「sel2lr」。ただし、IE専用。
 ブログでお気に入りの商品、自分が購入した商品のレビューを書くことはよくある。写真も載せたいな、とか、ついでにアフィリエイトもしておくか、これで儲かればラッキー、とかいろいろ思うわけで。
 で、よく使うのはAmazonアソシエイト。本家のツールは使いにくいからG-Tools使ってみたりするわけですが。このサービスを使ったブックマークレットなんかはとくに便利。amazletとかfun9.netでもいいんですが。
 で、両者のサービス。デザインが複数あるんだけど、どうも帯に短し、襷(たすき)に長し。だったりしませんか?
 たとえば、価格だとか、発売日はいらないんだよなあ。画像とタイトルだけでいいんだよなあ。とか。確かにそういうのはあるんだけど、本文とうまいことデザインしたいんだよなあ、とか。とくに、画像とデータの横が空きすぎちゃう、とか。たとえば、こんな感じ。
saku saku Ver.2.0 ヴィンの復習
木村カエラ
B000E1ZBZY
 うーん。惜しい。この無駄なスペースもったいない。とか。いかにもG-Toolsです! って感じとか。
 じゃあ、こういうのはどうかな?

 今日、こんなDVD買いました。このDVDはテレビ神奈川ことtvkで放送されている番組で。以下、いろいろ。
 でもって、内容はこんな感じです。
 とか、そういうレビューを書く。どうだろう。これなら、無駄なスペースもないし、見た目もすっきり、とかそういう感じ。
 こういうのをやりたくって、毎回、CSS、というか、スタイルシートを書いてたんですが、それも面倒。こういうときこそ、ブックマークレットだ! ってことで、書いてみたのが、これ。回り込み(まわりこみ)を簡単に指定できます。
 「sel2l」ってのが左寄せで、「sel2r」ってのが右寄せ。
 ‘ + s_word +’

‘;void(s_range.text=r_word);”>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などの正方形で中サイズ用にほぼぴったり、ってことで。右側にタイトル回り込ませるやつとかの場合も具合がいいです。

ウェブ進化論 本当の大変化はこれから始まる
梅田 望夫
筑摩書房 (2006/02/07)

 ついでに左寄せの例。こっちはamazletで作成したコードを、sel2lrで挟んでます。幅をなんとかしたかったので、これは「width」で240とかを指定してます。ブログのデザインによってはなんかおかしいかもしれないけど、まあ、そこはうまくやってくださいな。まわりこみを解除したい場合はclearとかを使うといいと思います。
 ブックマークレットの名称は適当。「amL-R」に準拠しようかと思ったけどやめた。とりあえず、短いほうがいいだろう、ってのは共通。それから、最初にWindowsのIE用に作って、FirefoxとかSafari用も作ろうと思ったけど、同じようにはいかないことが判明したので、気が向いたら作るかも、っていうくらいの方向で。それから、楽天広場の人は同じブックマークレットではうまくいかないので、あとで別エントリ設けます。「楽天アフィリエイトの画像を左寄せ、右寄せにしたい」が、それ。こちらも回り込みのためのやつ。
 ずっと使ってきたブックマークレット(Bookmarklet)ではありますが、コピペミスで動かない可能性もあります。「動かねーよ!」「思い通りにいかねーよ!」って方はコメントやトラックバックでお知らせください。「使ってるよ!」っていう報告もありがたいです。

コメント