AmazonJSカスタマイズ。リンクテキストの前後にテキストを付加する方法

このブログでは WordPress のプラグイン AmazonJS を使わせてもらっている。AmazonJS を使うと、次の画像のような本の紹介リンクがカンタンに作成できて便利である。

ところで、AmazonJS のリンクテキスト(上記の「確かな力が身につく~」の部分)は、商品のタイトルが表示されるのみとなっている。

これだけだと、このリンクが Amazon へのリンクであることが明確には分からないので、少し気になっていた。

明確でないほうがいいという人も勿論いると思うが、私は諸事情で Amazon へのリンクであることをもう少し分かりやすくしたくなった。

そこで、リンクテキストの末尾に [Amazon] と記すことにした。

そのカスタマイズ方法をまとめておく。ついでに、リンクテキストの前方に文字列を入れる方法も記した。

(参考にしてやってみようという方は、失敗したりうまくいかなかったりする可能性もあるので、気を付けてやってもらえればと思う。)

スポンサーリンク

リンクテキストのカスタマイズ方法

まずは編集する箇所を特定する。上の画像(クリックで拡大する)を参考に、次の順でクリックして進んでいく。

1.「プラグイン」

2.「プラグイン編集」

3.「編集するプラグインを選択」で「AmazonJS」を選択

4.「amazonjs/js/amazonjs.js」をクリック

5.次の部分を Ctrl + F で検索して探し出す

上記の部分を変更して「ファイルを更新」すればよい。

具体的な変更方法は以下にまとめた。

リンク内の先頭に文字列を挿入する場合

上の画像のようにリンクテキストの先頭に文字列を入れたい場合は、次のようにする。

リンク内の末尾に文字列を挿入する場合

上の画像のようにリンクテキストの末尾に文字列を入れたい場合は、次のようにする(今回私がやったのはこの変更である)。

なお、実際には [Amazon] の文字は少し小さめがよかったので、次のようにした。

リンク外の先頭に文字列を挿入する場合

上の画像のように、「文字列はリンクの外に出して先頭に置きたい」という場合は次のようにする。

リンク外の先頭に文字列を挿入する場合

上の画像のように、「文字列はリンクの外に出して末尾に置きたい」という場合は次のようにする。

おわりに

ごく簡単なカスタマイズだが、自分でできるようになるためには、HTML の知識以外に初歩的な JavaScript の知識が必要になる。

JavaScript の入門書は、次の記事で紹介した。ぜひ読んでいただければと思う。

JavaScriptを2週間で習得する方法と、初心者向けおすすめ入門書
ブログやウェブサイトを作成していると、「この部分でちょっと動き(アニメーション)をつけたいな」とか、「閲覧者からの入力に応じて表示を...

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク