こんにちは、わたあめです。ASPは【A8.net
】を利用しています。
A8.netの広告を掲載しようと、いつも通りにコードを貼り付けしようとしたところ、以下のような表示になってしまいました。
広告のバナー画像が表示されるはずが、動画再生マーク？のような形に変換されてしまいました。これを解決して広告を表示するにはどうしたか、説明していきたいと思います。それでは、いってみましょう！
事象詳細
事象の詳細です。いつもは問題なく表示されるバナー広告ですが、今回はなぜか表示されませんでした。コードの方を観察してみると以下の事に気付きました。
- コードが私がいつも使っている「a href」のリンクではない
- 「script language='javascript'」とJavaScriptが使われている広告
- コメントアウト分「<!-- ～～ -->」の部分がある
- テキストエディタで貼りつけたあと、勝手に改行部分が消えている
確かに広告の貼り付け方について、コメントアウト分「<!-- ～」を改行せずに貼り付けしてしまうと「brandsafe_js_async ****」部分がコメントとして扱われうまく表示されないと、注意事項が記載されていました。
具体的にはコメントアウト部分の改行が消えてしまっていたのです。Wordpressには自動整形機能という機能があるようで、良きに図らってコードを書き替えてしまうようなのです。ということで、コードを改変せずに貼り付ける方法で広告を挿入していく方法を紹介します。
Gutenberg（グーテンベルク）を利用している場合
WordPressのブロックエディタ、Gutenberg（グーテンベルク）を利用している場合は「カスタムHTML」ブロックを利用します。
- ブロックを追加
- 「HTML」というキーワードで検索
- 「カスタムHTML」ブロックを追加
- 「HTMLを入力…」のところに広告リンクを貼り付け
これで、バナーがうまく表示されたのではないでしょうか？
Classic Editorを利用している場合
クラシックエディタを利用している場合は、一時的にClassic Editorのプラグインを無効化にして、Gutenberg（グーテンベルク）で広告部分のみ編集するという方法で乗り切れました。
編集が終わったら、またClassic Editorを有効化すると編集画面は戻ります。ただし、必ず最後はグーテンベルクで保存することがポイントです。更新時にClassic Editorで内容更新して保存してしまうと、また自動整形機能で改行が良きに消えてしまうので…（また表示が崩れてしまうという。）
私の場合、クラシックエディタメインでまだグーテンベルクへ移行できていないので、、、無理やりこの方法を採用しました（笑）phpなどで自動整形を無効化する方法もあるようなのですが、この方法が手っ取り早かったです。
さいごに
いかがだったでしょうか。同じような悩みをもった方の参考になれば幸いです。それではまた次の記事でお会いしましょう！
