AwaRyoコメントをどうぞはい、どうも。いうことでですね、今日は久々の失敗談ですよ。このブログを始めた頃からずっと、自分の著書も含めたセルパブ本を紹介してきました。最初は普通の文字リンクでAmazonのストアに飛ぶようにしていたのですが、他の方のブログを見ていたら、みなさんかっこいいAmazonの窓みたいなものが貼られてるんですよね。僕はそれをどうやってやるのか知らなくて、ずっとそのままでした。何だか広告っぽいし、自分の知らない世界なんだなあと思っていたのですね。皆さんのサイトを見ていると、あの書影が入ったリンクが羨ましくってたまらかったのですよ、実は。かっこいいなあと思って......。ある時ね、ある人に言われたんです。何でただのリンクなの?それ、コンバージョンに役立たないじゃない、って。こ、こ、こ、コンバージョンですって!?固まりましたね。知ってる振りをしましたよ、確か。──記憶は定かじゃありませんけどね。して、それがAmazonアソシエイトという仕組みであることを知ったんです。(多分、誰かに教わったのです)自分としてはそういうものでお小遣いを稼ぐとかって全く考えていなかったので、とにかくかっちょいいリンクが作れるっていうだけでAmazonアソシエイトに登録したわけです。日常必需品がたくさん候補に出てきてますふむふむなるほど、このページでリンクを生成して、ブログに埋込めばいいんだな。そこまではいいんですよ。⇒いちいちアソシエイトのページでリンクを生成するのは面倒くさい!⇒じゃ、コードをコピーしてASINだけ差し替えればいいんじゃね?コードをコピーしてASINだけを差し替えてみたところ、ちゃんと書影は変わるし、リンクも生きているようです。これでやれば楽だよな〜。思い、アソシエイトのページで生成したのは最初のやつだけ、あとはコピペで書き換えることにしました。ま、もしかしたらそこまでは問題がなかったのかもしれません。今となっては全て修正したので確かめる方法もないのですが(今さら戻るのも、ね)。それから1年が過ぎ、作家の方とたまたまAmazonアソシエイトの話になりました。「だって、私ちゃんと淡波さんのサイトからリンク踏んで本買ったよ。「え......」そこで僕は、ここ淡波ログ内に埋込んだアソシエイト・コードを調べたのです。見たところ、異常はなさそう(細かいことは分からないし)。書影も出てるしなあ......、と。ところが、クリックすると直接Amazonの販売ページに飛べないものがあったんですよね。念のため、それを再度Amazonアソシエイトのページで生成し直してみました。違うんですよ、コードが!一番大きいのは、改行を示すタグのアスキーコード(って言うんですか?)が随所に埋込まれていました。そのせいで、全体の長さが全然違う。アソシエイトのコードはスクリプト内にタグを埋込んでいるので、一見タグには見えない謎文字になるんですよね。改行がこれこれ......って表示されるやつです。僕はWordPressで記事を書く時、時々「ビジュアルモード」と「テキストモード」を切り替えるんですけれど、それをやるとWordPressの自動成型機能が働いて、勝手にコードが変わっちゃう場合が結構あるのです。(ちなみにこれを無効化するプラグインもあるそうなんですが、時々、この自動成型機能を使ってコードを整理してもらいたいことがあるんですよね。オンの方が恩恵を受けることもあって......)そのせいで、アソシエイトのコードも流用コピペを重ねるうちに汚いコードになってしまっていたんですね。あぁあ、楽しようとして間抜けなことを──。指摘をくださったその方がたまたま僕の本を買ってくださる予定があるというので、試しに新しく埋込み直したアソシエイトリンクの方を踏んでみてもらいました(買わせちゃって済みませんー)。翌日......Amazonアソシエイトの売上げレポートを見たら──、ちゃんと入ってましたよ!!スゲー!まあ、15円とかですけどねぇ。その他にもたまたまリンクを踏んでからAmazonで買い物をしてくださった方がいたようで、その分の売上げも入っていました。へええ、すごいなあ、Amazonアソシエイトって......。こんな簡単に売上げが入っちゃっていいのかなあ、って。(だって、本が一冊売れた時の印税より高かったりすることもあるんですよ!)リンクを踏んでから、僕の作品とは何の関係もない商品をすぐ買うと、その売上額の何パーセントかが紹介料として入る仕組みなんですねえ。これも全く知りませんでした。広告嫌いを公言している僕ですが、このお小遣いにはちょこっと目がくらみました......。基本的にはブログで紹介した本のリンクを貼るだけですが、ね。AwaRyoコメントをどうぞこれは今のところ、Retinaディスプレイを備えたMacにしか当てはまらないことなのかもしれないのだけれど、実はAndroidのスマホなんかでもRetinaディスプレイを超える解像度のものがあったりします。WindowsのノートPCなどでも、高解像度のものがどんどん出ていますよね。今後はもっともっと気にしておかなければいけないことなんだろうなと思い、ちょっと記事にしてみました。冒頭の画像は、ご存知この淡波ログのヘッダに使っているもの。「PNG」と書いてあるほうが先週までのヘッダで、「SVG」と書いてあるのが現在のもの。明らかに、シャープさが違いますよね。普通のWEBページだと、大きめの画像を用意しておけばそれなりにきれいに表示されるのですが、Wordpressだとそうはいかないんですよね。Wordpress上の画像管理システムである《メディアライブラリ》に画像を登録する際、自動的に何種類もの画像サイズが生成されて、その画像を表示する端末に最適なサイズのものを自動的に選択してくれるようになっているのですよね。これ、便利なようでいて、実はとてもおせっかいなくせ者。(もちろん、僕がWordpressの扱いを熟知していないから、という前提もありますが、ね)Retinaディスプレイは非常に解像度が高いため、画像表示の仕組みが通常とは違います。普通は1ピクセルを画面の1画素として表示しますが、Retinaでは縦横2ピクセル分(=4ピクセル)を1画素として表示します。画面上の1画素のサイズが細かいため、そうしないと表示する画像が小さくなりすぎてしまうのですよね。ならないようにcss上で指定してあれば問題なく、つまり画像を用意した人が思った通りの大きさに表示してくれるのですが、Wordpressのシステムでは前述のように扱うため、ページの作者が特別なcssを書かない限りそのまんまで表示しようとします。僕も難しいことは全然わからないのですが、なにしろ、Wordpress側が小さめの画像を用意し、それをMacが拡大して表示するという訳のわからない状態になるのです。自動的に変換、リサイズされた画像は、RetinaMacで見るといつもボケボケのものになってしまうのですよね。これは寂しい!そこで、ない頭を絞って考えました。Graphicsという言葉の略。解像度に縛られないベクター形式の画像フォーマットなのです。これが線画などだったら分かりやすいのですが、普通の画像でもその利点が生きるかどうか、試してみたのです。ベクターグラフィックを扱えるフリーのソフトといえば、Inkscapeです。これにヘッダの画像を読み込み、単純にSVGで保存してみました。すると、ちゃんとSVGとして解像度フリーになっていました。これまではボケボケだったヘッダ画像が、ついにきれいな画像になりました!やり方は簡単ですが、一つだけ、大事なコツがあります。ベクター画像を扱うソフトには《アートボード》という考え方があります。ビットマップ画像を扱うソフトで新たな画像を読み込むと、ドキュメントのサイズは《その画像のサイズ》になりますよね。ベクターのソフトでは、ドキュメントサイズはあくまでも起動した時に出る初期設定サイズのままです。A4サイズなどですね。Inkscape起動時のアートボードそこに画像を読み込んでSVGで書き出せば出せるのですが、アートボードごとの画像になってしまいます。これでは、白い画像の中に浮いている形になり、どうにもこうにも使えません。画像のサイズもきちんと調整しないと、アートボードの外にはみ出た部分は切り落とされてしまいます。