その広告が、例えば画像付のものだった場合。バナーリンクです。
なぜか私の環境では、投稿の横幅いっぱいまでクリック範囲がありました。
どう考えてもポリシー違反になると思いましたので、すぐ修正。
クリック領域が勝手に広くなっていたのを修正する
文字リンク等のクリック領域は、通常下線つきの文字リンクの上のみです。
これをリスト表示にして、
クリック領域を広げるとクリックしやすくなりますね。
その話は今は置いておいて。
クリック領域の時に出てくるCSSがこちらです。
display: block;
お使いのテーマのCSSに、
「 img 」を指定する箇所がいくつかあると思います。
その中に、このdisplay: block;
がある事も多いと思います。
要はブロックとしてひとつの単位に表され、前後に改行を入れます。
で、冒頭の広告等の画像つきのリンク・バナーリンクを貼り付けた時。
ここで問題が起こります。
広告等の画像付・バナーリンク内に改行を入れてはいけない
お使いのアフィリエイトやモニターサイト等によりますが、
通常、バナーやコードの中には改行等余計なものは入れてはいけません。
これは一般的な事ですね。
もちろん、
display: block;
をimg内に指定したからと言って、広告のコード内に
改行が入る事は通常ありません。（多分）
しかし、問題が他にあります。
広告の前後に改行がつくのです。
これはdisplay: block;を指定しているせいです。
他の画像等は問題が起こらないのでそのままでも良いのですが、
広告に関しては前後に改行が入ってしまうと、
クリック領域が横幅いっぱいに広がってしまうバグが起こりました。
これはWordPressの仕様ではなく、
おそらくお使いのテーマの仕様によるものです。
なぜそうなるのか原因追求するより、対処法を考える事としました。
ここで私のテーマ名は載せませんが（私だけの事象かもしれないので）
こういう事が起こったという方は、以下をご覧ください。
広告画像バナーのクリック領域を画像内だけにする
何をしたいかと言うと、
投稿記事内に貼り付けた画像付リンク・バナーリンクのクリック領域を、
画像の上のみにする事です。
そうと分かれば簡単ですね。
display: inline;
を、投稿の画像CSSに追加すれば良いのです。
私のテーマCSSには
.post img {
border-radius: 10px; (これは画像の四隅を丸くする指定です)
}
があるので、こちらを
.post img {
border-radius: 10px;
display: inline;
}
このようにしました。
結果、クリック領域は画像バナーリンクの上のみなりました。
ご覧の通り、元々
display: block;
は載っていなかったのに、今回のような事象が発生していました。
ちなみに、
.post img が無い場合は、
他に投稿内の記事を指定するCSSを探して下さい。
何かしらあると思います。
全く無ければ作って下さい。
作り方は長くなるので割愛。
簡単に言うとブラウザで要素を見て、
投稿を示すclassかidを探す。
そしてその要素のimgのCSSを作るという事です。
imgのCSSからdisplay: block;を探す
display: block;
が指定されていなかったのに、なぜクリック領域が広くなっていたのか？
謎ですね。
というか、早い段階で気がついて良かったです。
考えられる原因を探るため
テーマCSSの他のimgを見てみました。
img, video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
display: block;
}
img.alignnone {
display: block;
margin: 0 10px 0 0;
border-radius: 10px;
}
img.aligncenter { （他、rightとleftもある）
display: block;
margin: 0 10px;
border-radius: 10px;
}
これらが影響しているようですね。
今回、広告バナーを貼付けた時、配置の指定はしていませんでした。
実際にブラウザで表示させて見てみると、
alignnone も、要素に含まれていませんでした。
どう影響したかは分かりませんが、
まぁこのあたりが原因ではないかと思います。
ちなみに、今回あえて
.post img {
}
のみ、display: inline;を追加しました。
では固定ページはどうかと言うと、
固定ページでは何もトラブルが起こっていなかったのです。
つまり、広告バナー等を載せても、クリック領域はバナーリンク上のみ。
なぜか投稿内でのみ起こる事象でした。
なので、
.post img
のみ、display: inline;を追加したわけです。
WordPressはまだまだ分からない事が沢山あります。
もっと勉強していきたいです。
とりあえず、display: inline;を追加した事で
今回の問題は解決しました。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク