アフィリエイトリンクを右寄せ、左寄せにしたい
アソシエイトリンク作成時に画像+テキストの情報をもっと自在にレイアウトしたい、ってときに使えるブックマークレット。右寄せ、左寄せが自由にできるっていうやつ。名前は「sel2lr」。ただし、IE専用。
ブログでお気に入りの商品、自分が購入した商品のレビューを書くことはよくある。写真も載せたいな、とか、ついでにアフィリエイトもしておくか、これで儲かればラッキー、とかいろいろ思うわけで。
で、よく使うのはAmazonアソシエイト。本家のツールは使いにくいからG-Tools使ってみたりするわけですが。このサービスを使ったブックマークレットなんかはとくに便利。amazletとかfun9.netでもいいんですが。
で、両者のサービス。デザインが複数あるんだけど、どうも帯に短し、襷(たすき)に長し。だったりしませんか?
たとえば、価格だとか、発売日はいらないんだよなあ。画像とタイトルだけでいいんだよなあ。とか。確かにそういうのはあるんだけど、本文とうまいことデザインしたいんだよなあ、とか。とくに、画像とデータの横が空きすぎちゃう、とか。たとえば、こんな感じ。
saku saku Ver.2.0 ヴィンの復習
木村カエラ
うーん。惜しい。この無駄なスペースもったいない。とか。いかにも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などの正方形で中サイズ用にほぼぴったり、ってことで。右側にタイトル回り込ませるやつとかの場合も具合がいいです。
ついでに左寄せの例。こっちはamazletで作成したコードを、sel2lrで挟んでます。幅をなんとかしたかったので、これは「width」で240とかを指定してます。ブログのデザインによってはなんかおかしいかもしれないけど、まあ、そこはうまくやってくださいな。まわりこみを解除したい場合はclearとかを使うといいと思います。
ブックマークレットの名称は適当。「amL-R」に準拠しようかと思ったけどやめた。とりあえず、短いほうがいいだろう、ってのは共通。それから、最初にWindowsのIE用に作って、FirefoxとかSafari用も作ろうと思ったけど、同じようにはいかないことが判明したので、気が向いたら作るかも、っていうくらいの方向で。それから、楽天広場の人は同じブックマークレットではうまくいかないので、あとで別エントリ設けます。「楽天アフィリエイトの画像を左寄せ、右寄せにしたい」が、それ。こちらも回り込みのためのやつ。
ずっと使ってきたブックマークレット(Bookmarklet)ではありますが、コピペミスで動かない可能性もあります。「動かねーよ!」「思い通りにいかねーよ!」って方はコメントやトラックバックでお知らせください。「使ってるよ!」っていう報告もありがたいです。
コメント