MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

A8.net・バリューコマースのテキスト広告の改行を削除する!

      2016/12/04

どうも、「あの人が怒ってるところ見たことない!」でおなじみのChef(@chef_moriawase)です。

みなさん、イライラしちゃダメですよ。僕は感情をコントロールしているので、聖人のような気持ちでブログを書いてますよ。

ほら、今日だって、アフィリエイト記事書いてますけど、全然イライラしな…イライラs…イライラ…

あー!もう!なんでテキスト広告が勝手に改行されるの?!

a8net-1

アフィリエイトのテキスト広告が勝手に改行される謎

す、すみません…つい取り乱してしまいました。記事の中にA8.net
のテキスト広告を入れてみたんですが、なぜか勝手に改行されてしまって…

みんな、どうやってあんなにネイティブに埋め込めてるんだろう…?コードの改変はできないし、何かカスタマイズしているんだろうか?

ちょっと覗いてみよう…って、えぇ!!コード改変されてるよ!これいいのか?

 

…あ、やっぱりコードの改変はダメなのね。一部の人や、許可を得ている人だけ認められているみたい。

でも、「改変していいですか?」っていちいち聞くのも面倒だな…簡単に誰でも使える方法があればいいのに。

うーん、自分で考えてみるか!

原因は?

謎の改行は、下記の2つが原因でした。

  1. 改行タグ(br)
  2. 目に見えない画像(img)

textad-kaigyou-delete-2

これをなんとかすれば良さそうですね!

カスタマイズ内容

今回のカスタマイズでやることは下記の3つ。

  1. A8.netのリンク(a要素)の親要素(p要素)にクラス(a8)をつける
  2. ブログやサイトで公開するとついてしまうbr(元のコードにはないタグ)を削除する
  3. 画像(img)を非表示にする(コードは改変しない)

気をつけるべきは、やはり「規約を守ること」です。これを無視しては意味がありません。

そして、誰でも簡単にカスタマイズできるように、コピペできるコードを最後にご紹介します。

ワードプレスでのカスタマイズ方法ですが、「はてな」でも問題なく使えるはずです。では、始めましょう。

クラスをつける

こちらのコードをjavascriptのファイル(.jsで終わるファイル)に追加します。

クラスをつける流れはこんな感じです。

  1. bodyの中のA8.netのコードを探す
  2. そのA8.netのコードを囲んでいるp要素に「a8」というクラスをつける

brを削除する

こちらのコードもjavascriptのファイル(.jsで終わるファイル)に追加します。

A8.netのリンクが入っているp要素の中にあるbrを見つけて削除するというコードです。

画像を非表示にする

こちらのコードをスタイルシート(.cssで終わりファイル)に追加します。

A8.netのリンクが入っているp要素の中にある幅「1」の画像を非表示にするというコードです。

コピペで簡単カスタマイズ!

さて、カスタマイズが終わったので、実際に見てみましょう!

a8net-2

うん!ちゃんと表示されてますね!いい感じ!まとめたコードはこちらです。

【jsファイル(.jsで終わるファイル)に追加するコード】

【スタイルシート(.cssで終わるファイル)に追加するコード】

アイコンフォントをつけない

そうそう、新規ウィンドウを開く時にアイコンフォントを使っている方もご安心ください。

a8net-3

A8.netのテキストリンクだけアイコンフォントをつけないようにすることができます。

↑おそらく、こんな感じのコードだと思いますが、属性セレクタを使って条件分岐すればOKです。

先ほどのjavascriptの時のような感じですね。:not()を使い、A8.netのリンクだけアイコンフォントをつけないようにしています。

デザインが微妙に違うと思いますので、参考までに。

バリューコマースやアクセストレードもカスタマイズ!

せっかくなので、バリューコマースアクセストレードのテキスト広告も改行させないようにしました。

先ほどのコードの応用ですね。改行タグはなかったので、brを削除するコードは必要ありませんでした。

【jsファイルに追加するコード】

【スタイルシートに追加するコード】

まとめたコード

まとめたコードがこちらです。コピペするだけでOKですよ。

【jsファイルに追加するコード】

【スタイルシートに追加するコード】

 

アイコンフォントを使っている方は、こちらのコードが参考になると思います。

 

※バックアップを取ってからお試しくださいね。

まとめ

このカスタマイズをしておけば、どのテキスト広告であろうと改行しなくなるので、かなりストレスフリーです。

いやー、これで再び聖人のような気持ちになることができます。イライラしててはいけませんよ、みなさん。

コードも改変しないし、余計な手間も一切なし!困っている方はぜひお試しあれ!

【こちらの記事もおすすめです】

カエレバ・ヨメレバ・ポチレバをコピペ一発でカスタマイズ!

 - WordPress・カスタマイズ