ブログで商品を紹介したときに重宝するのが、カエレバやヨメレバなど。
本の紹介にはヨメレバを使うこともありますが、紹介しているものによって、利用するASPを変えています。
私は絵本紹介をするときは、試し読みもできるサイトのほうが確実に親切かなと思って絵本ナビとも提携しています。
絵本ナビ
これは面白い、ぜひ紹介したい！という絵本があったときに記事を書こうとしたのですが、画像＋リンクをASPからコード生成して張り付けようとしたら、なぜか消えて張れませんでした。
コードとにらめっこして、ようやく解消したので、もしも困っている方がいたら利用してください。
絵本ナビのアフィリエイトコードの作り方
絵本ナビのアフィリエイト提供元はa8ネットです。
こちらは先に絵本ナビとサービスの提携を行ってからの話になります。
まずはa8ネットで絵本ナビの広告リンクを作成します。
あるページにリンクを付けたいので、「商品リンク」をクリックします。
次に、リンクしたいページのURLと表示させたい画像のURLをコピーして生成画面に入力します。
リンク先のURLと表示させたい画像でリンク生成されたものが画面に表示されます。
この時、実際にリンク先にジャンプできるかの確認を行うことができます。
画像をクリックして確認します。
これで、目的のページにきちんと画像リンクが脹れているか確認できました。
生成されたコードを使ってwordpressに入力したが、画像が表示されない
次は生成されたコードをwordpressにテキストエディタ上で入力します。
この時、記事を書こうとしてビジュアルエディタに切り替えてみると、以下のような表示になります。
何やらリンクが張ってあるようなものが見えますよね。
きちんと脹れたのか確認のために、プレビュー表示してみます。
何も表示されていません。
どこをどう見ても、先ほどのバナーが表示されていないんですね。
気になって、もう一度テキストエディタに戻すと、生成したコードに何やら変化が。(一部伏せています)
<script type="text/javascript" src="//statics.a8.net/ad/ad.js"></script><script type="text/javascript">a8adscript('body').showAd({"req": {"mat":"*************","alt":"商品リンク","id":"******************"},"goods": {"ejp":"h"+"ttps://www.ehonnavi.net/specialcontents/contents.asp?id=116&a8=*******************************************************************","imu":"h"+"ttps://www.ehonnavi.net/specialcontents/interview/img/0000116/nvCMS_nvsp_id0000116_103841.jpg"}});</script>
これよく見ると、spanタグが消えています。
なぜか勝手にspanタグを消しているんですね。
これをどうしたら勝手にspanタグを消さなくなるのか調べました。
そうすると、以下のような説明をしているサイトがいくつかあります。
【WordPress】ビジュアルモードでspanタグが消えたら、TinyMCEエディタの設定をしよう
TinyMCEについて触れているページがいくつかあるのですが、私の環境ではこのプラグインは外しています。
そのため、全く関係ありませんでした。
WordPressでビジュアルからテキストに切り替えるとタグが消える時の対処法！
またこちらは今利用しているテーマのCocoonを利用しているサイトなので、環境が同じです。
何かいい情報がないか探していましたが、「テキストモードからビジュアルモードに切り替えない」とあり、それは無理だと思って終わりました。
絵本ナビで生成されたspanタグはこのサイトで普通に使用している
実は、絵本ナビで生成されたコード以外に、このサイトの記事でspanタグを使用しているところがいくつかあります。
無料版はてなブログにアドセンスを追加したのに広告が表示されない！はあることを忘れていたから
例えばこの記事なんですけど、spanタグを使っています。
赤枠で囲ったところ。
文字装飾をしているのですが、これspanタグなんですね。
ということは、普通にspanタグが使えていて、しかも消えないんです。
不思議ですよね。
もう一つ他に何かないか探していたら、見つけたサイトの解決方法には、spanタグにclassを付けると提案されていました。
でも、これで解決できません。
実際に使用している絵本ナビで生成されたspanタグにもclass指定があるので、classがないわけではありません。
ということで、何度となくチャレンジしたり調べてみたりしたのですが、なかなか解決できませんでした。
絵本ナビで生成されたコードのspanタグをwordpress上で勝手に削除されないようにするには
絵本ナビを記事に張ろうとして、何度もチャレンジしていましたが、しばらく放置していました。
もうこのASP使わないでもいいやくらいのレベルで。
でも、どうしても使いたいなということで、再チャレンジ。
やっぱり同じ現象に陥り、調べてもプラグインの話やfunction.php書き換えの話ばかり。
またあきらめないといけないのかなと、心が折れそうになったときに気が付いたのが、spanタグが幾度となく消える現象。
プログラミングあるあるかもしれまんが、何度もコードを見て、現象を再現していると、間違いに気が付くことがあります。
もう一度生成されたコードをよく確認します。
<span class="a***********************"></span>
<script type="text/javascript" src="//statics.a8.net/ad/ad.js"></script>
<script type="text/javascript">a8adscript('body').showAd({"req": {"mat":"*********************","alt":"商品リンク","id":"*************************"},"goods": {"ejp":"h"+"ttps://www.ehonnavi.net/ehon/117263/%E3%83%89%E3%83%BC%E3%83%8A%E3%83%84%E3%82%84%E3%81%95%E3%82%93%E3%81%AE%E3%81%8A%E3%81%A6%E3%81%A4%E3%81%A0%E3%81%84/","imu":"h"+"ttps://www.ehonnavi.net/img/cover/350/350_Ehon_117263.jpg"}});</script>
おかしな部分を抜粋します。
このspanタグだけがおかしいんですね。
普通、htmlのタグというのは、特別なものを除き、タグの間に表記したいものを挟んで使うのが基本です。
でもこのspanタグには、何も入っていません。間が空です。
もしかしたら、このタグの間に何も入ってないことで、wordpressのほうで「いらないタグ」として認識されてしまい、テキストエディタからビジュアルエディタに切り替えたときに削除されてしまった可能性があります。
というわけで、以下のように修正しました。
<span class="*************************">
<script type="text/javascript" src="//statics.a8.net/ad/ad.js"></script>
<script type="text/javascript">a8adscript('body').showAd({"req": {"mat":"*************************","alt":"商品リンク","id":"*************************"},"goods": {"ejp":"h"+"ttps://www.ehonnavi.net/specialcontents/contents.asp?id=1*************************-CGCrM1RfoUrGo4oGplXNpht4tiGBMOpwAU5BXUIns00000016689001","imu":"h"+"ttps://www.ehonnavi.net/specialcontents/interview/img/0000116/nvCMS_nvsp_id0000116_103841.jpg"}});</script>
</span>
変更したのは、</span>を生成コードの最後に移動しただけです。
spanタグを最後に移動したおかげで、ビジュアルエディタ、テキストエディタの切り替えをしても消えることなく、画面にもリンク画像が脹れるようになりました。
もしも、絵本ナビを利用していて、なぜかspanタグが消えてしまう困っている場合には、参考にしてください。
コメント