2018.05.13WordPressのプラグイン「AmazonJS」、とても便利ですよね。リンクを生成するために別のサイトを開いたりすることがないので(開いたとしてもAmazonぐらい)、これまでずっとAmazonJSを使ってAmazonのリンクを作成してきました。AmazonJSはAmazon以外の商品に対応しておらず、たとえば楽天やYahooショッピングのリンクを貼りたい場合は別途作成する必要があり、ちょっと面倒だったんですよね。今回、AmazonJSの基本機能を使って、Amazonのリンクボタンに並べる形で、楽天やYahooショッピングのリンクボタンを「それなりの見栄えで」作成することが出来たので、その内容を書いてみようと思います。現在私は「AmazonJS」を使っていません。プラグインも停止しています。その理由は、現在使っているWordPressのテーマ「Cocoon」に、Amazonや楽天の商品リンクを作成する機能が搭載されたからです。Cocoonの商品リンクはテーマに機能が搭載されていてシンプルなのと、今後もブラッシュアップされる可能性が高いということで、AmazonJSからCocoonの商品リンク機能に乗り換えることにしました。今回のカスタマイズの概要カスタマイズしたファイルカスタマイズの結果(外観)注意事項その1:テンプレートの選択その2:7netのリンクその他の注意点amazonjs.jsのカスタマイズamazonjs.cssのカスタマイズAmazonJSの外観と動作を確認してみる謝辞おわりに今回のカスタマイズの概要カスタマイズしたファイルAmazonJSのカスタマイズとして、具体的には以下の2つのファイルを編集しました。私の場合、ファイルの操作と編集にFFFTPとTeraPadを使いました。FFFTPを使ってサーバからダウンロードしたファイルを、ローカル環境でTeraPadを使って編集し、編集したファイルをFFFTPを使ってサーバにアップロードしました。カスタマイズの結果(外観)カスタマイズしたことで、以下のような外観になりました。最初にお伝えしておかないといけないのですが、今回のカスタマイズは完全なものではなく、よく使う外観(画像やボタン配置)と、よく使うサイト(Amazonや楽天)のみを変更しています。(以下の注意点)完全にカスタマイズしようとすると私の力量では無理なので、今回は現実的なところでカスタマイズしました。注意点の1つ目として、まずテンプレートの選択です。以下のようなリンクを作成する画面で、動的なテンプレートとして「デフォルト」と「小」のどちらかを選択可能になっていますが、今回のカスタマイズにより、「小」を選択しても画像のサイズは変わらなくなっています。自分で言うのも何ですが、普通は「デフォルト」しか使わないので特に問題ないような気がします。その2:7netのリンク注意点の2つ目として、7netのリンクです。リンクボタンは当初、Amazon、楽天、Yahooの3つで作っていたのですが、デザイン的に座りが悪いので7netを入れることにしました。AmazonJSが生成する7netのリンクは、URLエンコードされたものになり、商品名(検索ワード)に2バイト文字が含まれると、正常に7netで検索してくれません。あれこれ試してみたのですが、私の力量では改善できなかったので、現状では7netのボタンを押すと検索ワードなしでページを開くようにしています。解決方法をご存知の方がいましたら、お問い合わせフォームでもTwitterでも結構ですので是非教えてください。その他の注意点CSSやプログラムについてあまり詳しくないので、色々と変なところもあると思いますので、必ず元の「amazonjs.js」と「amazonjs.css」をバックアップしておいてください。以上の注意点を踏まえて、私が行ったカスタマイズを紹介したいと思います。amazonjs.jsのカスタマイズではまず、amazonjs.jsのカスタマイズ内容を説明します。以下のような記述がある場所を探します。target="_blank">';この部分に、以下の黄色で示す部分を追加します。白抜きの部分には自分のIDを入れます。>';次に、以下のような記述がある場所を探します。'${Title}</a>';この部分に、以下の黄色で示す部分を追加します。白抜きの部分には自分のIDを入れます。width="1"></a></div>';次に、以下のような記述がある場所を探します。class="amazonjs_footer"></div>','</div>']};この部分を、以下の黄色の内容に差し替えます。eBooksのいずれかに当てはまる場合に、実際にhtmlタグを生成する部分です。(当てはまらない場合はSmallになるようです)オリジナルのコードの<ul>~</ul>の部分は、各行が表示項目に対応しています。私の場合は、価格や会社の情報はアフィリエイトリンクには不要だと思ったので削除して必要最小限の表示にしています。上のコードでは、amazonjs_infoのmargin-leftを170pxに固定していますが、この部分はオリジナルのコードだと動的に生成するようになっています。動的にmargin-leftが生成されると意図せずレイアウトが崩れるため、このように「固定」としています。(この辺りも、もう少し良い方法があるかもしれません。)また、スマホなど横幅の小さい端末で商品画像の下にボタンを表示させるために、この後のcssファイルに掲載するようにamazonjs-nameというセレクタを新設しています。amazonjs.cssのカスタマイズ続いて、amazonjs.cssのカスタマイズ内容を説明します。amazonjs.cssの変更箇所は複雑で多いため、全く整理されていない状態でお恥ずかしいですが丸々掲載することにします。0.9em;}}amazonjs.cssのカスタマイズは、既存のamazonjs.cssに上記内容をコピーして保存すれば終了です。AmazonJSの外観と動作を確認してみるカスタマイズしたamazonjs.jsとamazonjs.cssをサーバにアップロードできたら、外観と動作を確認してみます。PCやスマートフォンで表示させて、上の「カスタマイズの結果(外観)」に掲載した画像のようになったでしょうか?外観を確認しつつ各ボタンの動作を確認して、問題がなければ終了です。今回のカスタマイズは、以下のブログとサービスを参考にしました。カエレバamazonjs.jsのカスタマイズは、主にhazilogさんを参考にしました。ありがとうございます。hazilogさんのブログがなければ、初心者の私がカスタマイズするなんてことはなかったと思います。アフィリエイトIDの調べ方と、外観の方向性やamazonjs.cssの作成内容については、カエレバさんを参考にしました。ありがとうございます。おわりに普段、私はネット通販のほとんどをAmazonで済ませてるため、楽天やYahooショッピングの有用性がいまひとつわかりませんでした。実際にこのカスタマイズをした後で、楽天やYahooショッピングから商品が購入されたようで、カスタマイズした甲斐がありました。AmazonJSをカスタマイズの参考になれば幸いです。【2018年12月版】Google広告に登録してキーワードプランナーを使ってみたども!あき山です。ブログを運営している人で、Google広告のキーワードプランナーをまだ使っていないという人はいないでしょうか?検索需要を調査するときに便利なんですよね。実は私、遅ればせながら先日(2018年秋)登録してよう...2018.12.22ブログ作成ブログの収益を公開!あき山はどれくらい儲かっているのか?ども!あき山です。このブログ(最高峰にゆっくりと)は2016年11月に始めたので、そろそろ3年を迎えようとしています。【ブログの作り方】どうやって作る?あき山の手順を紹介しますども!あき山です。私は普段こんな感じでブログを書いているわけですが、見てる人の中には「このブログのここはどうやって作ってるんだろう?」とか「そもそもブログってどうやって作るの?」と疑問を持ってる人もいると思います。...2018.10.14ブログ作成ブログを始めた動機を2000字程度でまとめてみたども!あき山です。このブログは2016年の11月から開始したので、公開してから現時点で約2ヶ月半ほど経過したことになります。今ちょうど記事数が40本なので、1ヶ月に16本、2日に1本ほどの記事...2017.02.13ブログ作成WordPressのブログカードを調整してみたども!あき山です。記事の作成画面で直接URLを書くと、下のように表示される機能があります。これは「ブログカード」「Embed」などと呼ばれる機能らしいですね。いう記事表示が存在するのは知っていました。はてなブログなどでよく...2017.02.11ブログ作成さくらインターネットでサブドメインを利用してWordPressブログを追加するときの設定をまとめてみたども!あき山です。このブログは現在(2018/05/13)、「さくらインターネット」で開設しています。SwitchのProコントローラーを修理に出してみたさくらインターネットでサブドメインを利用してWordPressブログを追加するときの設定をまとめてみたホームブログ作成スポンサーリンクプロフィールども!「あき山」といいます。デジタルライフをおもしろく!をモットーに、身の回りの雑記を中心に書いてます。おじさんになって趣味で始めたデジタルイラストをどこまで極められるかにチャレンジしています。ツインテールが大好きです。最高峰にゆっくりと.メニューあき山とはあき山とは?使っているもの紹介お問い合わせサイトマップアニメ・コミックゲームPC・インターネットブログ作成ホーム検索トップサイドバースポンサーリンクプロフィールども!「あき山」といいます。デジタルライフをおもしろく!をモットーに、身の回りの雑記を中心に書いてます。おじさんになって趣味で始めたデジタルイラストをどこまで極められるかにチャレンジしています。ツインテールが大好きです。今回のカスタマイズの概要カスタマイズしたファイルカスタマイズの結果(外観)注意事項その1:テンプレートの選択その2:7netのリンクその他の注意点amazonjs.jsのカスタマイズamazonjs.cssのカスタマイズAmazonJSの外観と動作を確認してみる謝辞おわりにタイトルとURLをコピーしました。