前略、Amy さん

添付いただいた広告の貼ってある実際のページのURLをご提示いただくと確認したり調べたりできるかと思いますが、そうでない場合は推測だけの回答になってしまいます。

テストページなどでもよいので、実際に添付いただいた広告を貼ったページをご提示いただくのが一番よいと思います。

ただ、ASPのアフィリエイトリンクには、インプレッション計測用の１ピクセル×１ピクセルの画像が含まれている場合が多いように思います。

過去のトピックで、そのインプレッション計測用の画像がCSS等で拡大表示されていた、ということもあったような気がします。

画像を拝見した感じ、広告に使われているimgタグにもCSSのborderが反応してしまっているように見えます。

表示回数などの計測用に1pxの大きさの、実際には画面に表示されない画像を一緒に埋め込むことがあるのですが、その画像に対して枠線のみ表示してしまってる感じです。

広告タグのimgだけ枠線から除外できるような気がしますが、実際に広告が表示されているページのURLをいただいてもよろしいでしょうか。

追記：書き込み被りました。

リフィトリーさま、はるさま

　早速のご返信まことにありがとうございます。

　恥ずかしい限りです。肝心の当該サイトのＵＲＬをはり忘れておりました。

https://globalkidsmedia.com/entry/what-to-bring

　こちらでございます。取り急ぎの返信で失礼いたします。

@amy さん

やはり、インプレッション計測用の画像に、Cocoonの画像の囲み効果が適用されているだけだと思います。

この広告がどれぐらい表示されたか等を計測している画像だろうと推測します。

@amy さん

リストの中にあることを利用すれば、応急的ではありますが、以下のようなコードで白色にして、目立たないというか見えないようにすることも可能と言えば可能です。

.article .iwe-border-bold ul li img,
.article .iwe-border-bold ul li amp-img {
    border-color: #fff;
}

ただ、テーマの不具合とかではないことは確かです。

@leafytreeさま

　ご返信ありがとうございます。

　ご紹介いただいたコードをどのようにすればよいものでしょうか。試しにテーマエディターstyle.cssにはりつけてみても特に変化はないようでしたので、別の場所にはりつけるものと思われます。基本的なことも分からず、失礼しました。

　また、ＡＳＰ側の機能の問題ではなく、テーマの不具合でもないとすると、わたしのソースのはりつけ方に問題があるのでしょうか。使用しているＡＳＰはもしもさんとかバリュコマさんとか一般的な会社ばかりでして、テーマもCocoonという広く使われているテーマですので、素人的な考えでは、普通の方法ではりつけてさえいれば特段問題が生じる可能性は低いように思われるのですが。

@amy さん

私の環境から@amy さんのサイトを拝見しますと、ちゃんと効いているようです。

CSSのコードが反映されているかどうかを確認するには、コードを追記したり、変更したりしたあとに、Ctrl +F5 キーでWebサイトを再読み込みする、あるいは、ブラウザのキャッシュをクリアする、などの作業が必要です。

あとは、Cocoon設定の画像タブで、「画像の囲み効果」を「なし」にして、ご自身で同様の効果が得られるようにカスタマイズする、などになってしまうかもしれません。

@amy さん

投稿者:: @amy

ＡＳＰ側の機能の問題ではなく、テーマの不具合でもないとすると、わたしのソースのはりつけ方に問題があるのでしょうか。使用しているＡＳＰはもしもさんとかバリュコマさんとか一般的な会社ばかりでして、テーマもCocoonという広く使われているテーマですので、素人的な考えでは、普通の方法ではりつけてさえいれば特段問題が生じる可能性は低いように思われるのですが。

これだけ至れり尽くせりの機能が満載のCocoonのテーマなので「テーマ側でこのインプレッション計測用の画像で画像の囲み効果で影響が出ないようにすることは可能でしょうか？」というのでしたら共感できるところはありますが、「不具合」のジャンルにトピックを立てて、「普通に貼り付けているのに、テーマがおかしいんじゃないですか？」的なことを書かれても、私は共感しかねます。

テーマ作者様のお気持ちを察すれば、他のテーマをお使いいただいても良いですよ。となるような気がします。

@amy さん

「インプレッション計測用の画像だけに画像の囲み効果が及ばないようにする方法」を@amy さんが詳しく調べて、わいひらさんにご案内差し上げてもいいのです。

すでに、Cocoonのテーマで多くの恩恵を受けているcocoonを、たった一人で、身体にハンディがありながら、これだけのサービスを無償で提供している一人の人間のことを考えてみてください。

いつも要求するばかりではなく、こちらが何かして差し上げられることを考えても良いのです。

@amy さん

もしもアフィリエイトのインプレッション計測用の画像のURLは、以下のような感じになっていて、「impression」という文字列が含まれているようなので、

src="//i.moshimo.com/af/i/impression?a_id=0000000&p_id=000&pc_id=000&pl_id=0000"

以下のような指定をしたら、もしかしたら、もしもアフィリエイトのインプレッション計測用の画像だけは、画像の囲み効果が除外できるかもしれませんね。

.article .iwe-border-bold img[src*="impression"] {
    border-color: transparent;
}

ただ、画像の囲み効果は、４種類あるので、全部を賄うには、以下のように全部指定しなくてはならないかもしれません。

.article .iwe-border img[src*="impression"],
.article .iwe-border-bold img[src*="impression"],
.article .iwe-shadow img[src*="impression"],
.article .iwe-shadow-paper img[src*="impression"] {
    border-color: transparent;
}

さらにまた、主要なASPのアフィリエイトリンクを取得して、調査し、インプレッション計測用の画像のURLに共通する文字列等で、共通点があるかどうかを調べて、指定をする必要があるかもしれません。

@amy さんが、主要なASPのインプレッション計測用の画像のURLを詳しく調べていただいても、一向にかまわないと思います。

それらのデータが揃えば、テーマ作者様としても、対策をとりやすくなるかもしれません。

さらにまた、主要なASPが、インプレッション計測用の画像のURLを変更してしまった場合には、また、CSSの記述を変更するか、別の対策が必要になることも十分に予想できます。

ちょっと考えたら、 border: none; でもいいんですよね。

.article .iwe-border img[src*="impression"],
.article .iwe-border-bold img[src*="impression"],
.article .iwe-shadow img[src*="impression"],
.article .iwe-shadow-paper img[src*="impression"] {
    border: none;
}

box-shadow の打ち消しも必要でした。

.article .iwe-border img[src*="impression"],
.article .iwe-border-bold img[src*="impression"],
.article .iwe-shadow img[src*="impression"],
.article .iwe-shadow-paper img[src*="impression"] {
    border: none;
    box-shadow: none;
}

画像の囲み効果はCSSの記述方法がわからないと、設定が難しい。

なので、テーマ作者様は、Cocoon設定で誰でも簡単に画像の囲み効果がつけられるように設定項目を作成された。

ところが、広告コードに、インプレッション計測用の小さな画像が含まれているものを貼り付けたユーザーから、これはテーマの不具合なんじゃないかと言われる。

テーマ作者様側に立ってみると、何とも切ない話だと思いませんか。

ただCocoonはさまざまな用途で利用されているため、src＝ に「impression」という文字列を含んでいるソースを他の用途で指定されている方がいらした場合は、以下のコードで、画像の囲み効果が得られなくなってしまうため、その方にとっては、「画像の囲み効果の不具合」になってしまう可能性もないとは言えないかと思います。

.article .iwe-border-bold img[src*="impression"] {
    border: none;
}

やはり、ユーザーが個別に対応するのが無難なのかもしれません。

もっとも、一番手っ取り早い方法は、「画像の囲み効果」を「なし」にすることかと思いす。

@amy さん

今回の件も、デベロッパーツールで、どのような指定が適用されているのかを見極めることができれば、どこかに問い合わせることもなく数分で解決する場合も有り得ます。

CSSの指定がどのように指定されているのかがわかれば、それを打ち消したり、上書きしたりするコードを書けば、すぐに解決することが多いです。

デベロッパーツールの使い方は、数年前のものですが、テーマ作者様が記事にしてくださっています。（Google Chromeの仕様がちょっと古いので、現在のものと少し違っていますが、おおむね、使い方は変わっていません）

WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

https://nelog.jp/how-to-use-developer-tools-for-wp-beginner

また、HTML、CSSについては、さる子さんが、とても有用で素敵なトピックを立ててくださっています。

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

https://wp-cocoon.com/community/postid/31048/

デベロッパーツールの使い方と、CSSの書き方がわかれば、今回のような場合でも、ご自身で短時間で解決できるかと思います。

@leafytreesさま、みなさま

　まずは私の書き込みでご不快な思いをされたことに深くおわび申し上げます。

　「ＡＳＰ側の機能の問題ではなく、テーマの不具合でもないとすると、わたしのソースのはりつけ方に問題があるのでしょうか。使用しているＡＳＰはもしもさんとかバリュコマさんとか一般的な会社ばかりでして、テーマもCocoonという広く使われているテーマですので、素人的な考えでは、普通の方法ではりつけてさえいれば特段問題が生じる可能性は低いように思われるのですが。」

　こちらの私のコメントで、「テーマもCocoonという広く使われているテーマですので、素人的な考えでは、普通の方法ではりつけてさえいれば特段問題が生じる可能性は低いように思われるのですが」と書きましたのは、「普通の方法でやっていれば問題はないはず」、つまり「テーマ自体に問題はないはず」、裏を返せば「私が素人であるばかりにleafytreesさまのような上級者の方々が行っているような『普通の方法』ではりつけることができていない可能性が高い」というのが本来の意図でした。

　「普通に貼り付けているのに、テーマがおかしいんじゃないですか？」という意味では決してなく、むしろ正反対の意味合いのつもりで書き込んだものでした。

　「不具合報告」のジャンルにトピックを立てたことにつきましては、「不具合」というのが「状態・調子がよくないこと」（大辞泉）という意味ですので、「テーマ自体に起因する不具合」に限らず、「私の方の不手際で結果的に生じる不具合」もこのジャンルに含まれるのかと勝手に判断したものです。もし「認識が違っている」とのことでしたら別のジャンルにトピックを立てるべきでした。かさねておわび申し上げます。

　適切なジャンルをご教示いただけましたら幸いです。

　「これだけ至れり尽くせりの機能が満載のCocoon」ということも重々承知しております。こちらとしても常日頃から何らかの恩返しをしたいという思いでおりますが、なにぶんブログ運営を始めたばかりの素人なものでして、ブログ・アフィリエイト運営の点でお役に立てることは残念ながらないのが現状です。素人の立場でも何かお役に立てることがあれば、積極的に努めてまいりたいと思っております。

　長文となりましたが、重ねておわび申し上げます。

　このトピックの本題につきましては、@leafytreesさまのご助言を理解するのに時間がかかるかもしれませんが、少しずつ実践していきたいと思っております。この件、貴重なご助言をありがとうございました。心より感謝申し上げます。

@amy さん

きっと私が誤解をしていたものと思います。

テーマ作者様は、お怪我をされてから、横になっていなければならないご様子なので、仕事もあまり捗らないのかもしれません。

今後も引き続き、テーマ作者様を応援くださるとありがたいです。

とりあえず、もしもアフィリエイトだけでしたら、以下のコードで賄えるかもしれません。

.article .iwe-border-bold img[src*="impression"] {
    border: none;
}

@leafytreeさま

　わいひらさまには心より感謝しております。

　当初は「ブログを始めるけれどいつまで続くか分からない」という不純な動機でCocoonを選びましたが、使えば使うほど、このテーマのすばらしさを実感し、いまでは「無料であることが心苦しい」と思うに至っております。

　ご助言ありがとうございます。初めて聞く用語もいくつかありましたので、時間がかかるかもしれませんが、一つずつ消化して向上していきたいと思っております。

　改めまして、心より感謝申し上げます。ありがとうございました。

@leafytreeさま

　返信された内容を何度も読み返し、ようやくご指摘されている内容が（おおよそ）理解できました。ありがとうございました。

　どうやら過去にもほぼ同じ内容の質問がフォーラムに提示され（下記ＵＲＬ）、その際にも@leafytreeさまがご対応されていたようでした。

　ただ、今回ご紹介いただいたコード、前回ご紹介されていたコード、いずれも試してみましたが、なぜかうまく四角が消えないようでした。

　そこで、「画像の囲み効果」の設定を「なし」にするのは都合が悪いと思われましたので、ためしに「シャドー（薄い影）」を選んでみたところ、少なくとも私の肉眼では四角は視認できない状態となりました。とりあえずはこの状態で様子をみたいと思います。

　当初は「囲み効果」の存在すら知らない状況だったもので、理解が追いついておりませんでした．大変失礼いたしました。

https://wp-cocoon.com/community/cocoon-theme/%E5%95%86%E5%93%81%E3%83%AA%E3%83%B3%E3%82%AF%E6%A9%9F%E8%83%BD%E3%81%A7%E3%81%AEyahoo%E3%82%B7%E3%83%A7%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0%E3%81%AE%E3%83%9C%E3%82%BF%E3%83%B3%E8%A1%A8%E7%A4%BA/

@amy さん

投稿者:: @amy

ただ、今回ご紹介いただいたコード、前回ご紹介されていたコード、いずれも試してみましたが、なぜかうまく四角が消えないようでした。

下に貼り付けたGIF画像は私のPCで@amy さんの実際のWebサイトのキャプチャ動画を撮ったものです。

私の環境から@amy さんのWebサイトを閲覧した限りでは、CSSのコードは、ちゃんと効いていて、四角も消えていたようです。

コードを設定してから、Ctrl + F5 キーのショートカットキーでサイトを再読み込みする、または、ブラウザのオプション機能等で、ブラウザのキャッシュをクリアする、などの作業をコードの内容を変更する度に、その都度 行わないと、コードが効いているか、いないかの判断はできないかと思います。

先ず、そういった基本的なことをご理解いただくとよろしいかと思います。

@amy さん

投稿者:: @leafytree

CSSのコードが反映されているかどうかを確認するには、コードを追記したり、変更したりしたあとに、Ctrl +F5 キーでWebサイトを再読み込みする、あるいは、ブラウザのキャッシュをクリアする、などの作業が必要です。

また、既に、上記のご案内をさせていただいていたと思います。

この作業を行っても、なお、コードが「効かない」ということでしょうか？

そのあたりのことを何も記載せずに、ただ「効かなかった」とお書きいただいても、では、なぜ私の環境から閲覧すると効いていたのでしょうか？という疑問が沸くことになってしまいます。

@amy さん

ブラウザのキャッシュをクリアする方法の参考ページのリンクを貼っておきます。

ブラウザのキャッシュをクリアする方法

https://helpx.adobe.com/jp/legacy/kb/222659.html

@amy さん

CSSファイルののコードを編集した後に、そのコードが効いているかどうかを確認するときは、上記のようにブラウザのキャッシュの消去を行ってみてください。

投稿者:: @leafytree

@amy さん

投稿者:: @amy

ただ、今回ご紹介いただいたコード、前回ご紹介されていたコード、いずれも試してみましたが、なぜかうまく四角が消えないようでした。

下に貼り付けたGIF画像は私のPCで@amy さんの実際のWebサイトのキャプチャ動画を撮ったものです。

 

私の環境から@amy さんのWebサイトを閲覧した限りでは、CSSのコードは、ちゃんと効いていて、四角も消えていたようです。

 

コードを設定してから、Ctrl + F5 キーのショートカットキーでサイトを再読み込みする、または、ブラウザのオプション機能等で、ブラウザのキャッシュをクリアする、などの作業をコードの内容を変更する度に、その都度 行わないと、コードが効いているか、いないかの判断はできないかと思います。

 

先ず、そういった基本的なことをご理解いただくとよろしいかと思います。

 

@leafytreeさま

「コードを設定してから、Ctrl + F5 キーのショートカットキーでサイトを再読み込みする、または、ブラウザのオプション機能等で、ブラウザのキャッシュをクリアする、などの作業をコードの内容を変更する度に、その都度 行わないと、コードが効いているか、いないかの判断はできないかと思います。」

　これまで提示された全てのコードを設定し、それぞれについて二つの作業を行ったつもりですが、わたしが見た限りにおいては反映されておりませんでした。

「そのあたりのことを何も記載せずに、ただ「効かなかった」とお書きいただいても、では、なぜ私の環境から閲覧すると効いていたのでしょうか？という疑問が沸くことになってしまいます。」

　記載しなかったことにつきましては、おわび申し上げます。なぜ反映されなかったのかは、残念ながら私にはわかりません。

@leafytreeさま

　ご指摘を受け、いまいちどこちらのソースをはって保存し、「画像の囲み効果」を「ボーダー（薄い太線）」に戻して保存したうえ、あらためてご教示いただいた方法でGoogle Chromeのキャッシュを２度クリアし、Ctrl +F5 キーによる再読み込みも２度繰り返しましたが、やはり四角は残っているようでした。

投稿者:: @leafytree

.article .iwe-border-bold img[src*="impression"] { border: none; }

　以上、今回は疑問を残さぬよう、すべての作業経過と結果をお伝えさせていただきました。

@amy さん

コード設定したままにしていただけますでしょうか？

@amy さん

コードを消されてしまうと、効いているかどうかの確認ができません。

@amy さん

あと、フォーラムにお問い合わせの際は、フォーラム冒頭の案内にありますとおり、Cocoonの高速化設定を無効にしてくださるようお願いいたします。

高速化設定を無効にするには

https://wp-cocoon.com/theme-trouble/

@leafytreeさま

　いずれのご指示にも従いました。

@amy さん

高速化設定の無効化が反映されないようですので、もしかしたら、どこかにキャッシュされているのかもしれません。

プラグインのWP Fastest Cache も停止していただけますでしょうか？

@amy さん

あと、サーバーのキャッシュも削除してみてください。

Xサーバー サーバーキャッシュ設定

https://www.xserver.ne.jp/manual/man_server_cache.php

@amy さん

あと、Cocoonの高速化設定の上の方にある、「ブラウザキャッシュの有効化」のチェックも外してみてください。

@amy さん

環境情報をいただいていたのに、他のキャッシュについてご案内していなかったようで、申し訳けありません。

おそらく、あちこちで、キャッシュの設定がされていたため、ブラウザキャッシュを消去しただけでは、反映されなかったのだろうと推測します。

今現在、私の環境からは、反映されていないようですが、私のローカルサイトでも同様のテストを行ったところ、反映されるので、コード自体の問題ではないようです。

どこかのキャッシュを読み込んでいるため、即時反映されないのだと推測します。

なお、「画像の囲み効果」を「ボーダー（薄い太線）」以外に変更した場合は、以下のコードが必要になるかと思います。

.article .iwe-border img[src*="impression"],
.article .iwe-border-bold img[src*="impression"],
.article .iwe-shadow img[src*="impression"],
.article .iwe-shadow-paper img[src*="impression"] {
    border: none;
    box-shadow: none;
}

@amy さん

夜分にお付き合いくださり、ありがとうございました。（時差があるので・・）

起床されたときに、反映されていると良いのですが・・

@amy さん

ローカルのテストサイトでのコードのテストの様子も貼っておきます。

@amy さん

順序としては、先ず、プラグインのWP Fastest Cache の停止からやってみて、表示を確認してみてください。

@leafytreeさま

　ご親切にありがとうございます。仰るとおり、時差もあり、力尽きて寝落ちしてしまいました。子どもを学校に送り届けた後、さっそくトライしてみたいと思います。心より感謝いたします！

@leafytreeさま

　あらためまして、ご助言ありがとうございました。

　結果をご報告します。

　上記のご指示に基づいて作業をしたところ、結論から申しますと、もしもアフィリエイトのソースをはりつけた部分については四角がなくなり、バリューコマースのソースをはりつけた部分については四角が残っている状態です。

　ご提供いただいた修正用のソースはもしもアフィリエイトへの対応ということでしたでしょうか（誤解を招かぬよう念を押しますが、こちらは今現在、技術的にどのような修正措置が行われているか全く理解できていない素人による単純かつ素朴な質問でして、仮にバリューコマースへの対応が別途必要な状態だったとしても、leafytreeさまにバリューコマースへの対応まで求めているわけではございません）。

　一方、昨夜の段階では「囲み効果」の設定を「シャドー」にしたところ、ＰＣ画面では四角が消えたものの、スマホ画面ではなぜか四角が残ったままで、個人的にますます混乱しておりましたが、ご助言にもとづきサーバーも含めてキャッシュを消すという一連の作業を行ったところ、「シャドー」設定であればスマホ画面でも四角が消えたことを確認できました。

　もしＡＳＰのソースごとに修正が必要という物理的な状況なのであれば（素人なので状況は全く分かりませんが）、「囲み効果」を「シャドー」設定にしてもブログ運営上は特段問題はないと思われますので、この方法で「四角が出現する現象」を回避できるのかなと思っているところです。

@leafytreeさま

　サイトは今現在、上記の各ご指示に従った状態のままとなっております。

　ちなみに、バリューコマースのソースを使った箇所というのは、「お茶わん、おわん、おはし」の見出しのもとにある「無印良品でさがす」という囲みボタンです。文字列の前方に四角い形が残っております。

　ご検証をされる可能性があるかと思いまして、当初の状態のままとしてあります。

　こちら所用がございまして、いったん席を外させていただきます。

　取り急ぎの報告でした。

@amyさん

以下のコードは、インプレッション計測用の画像のソース（src）に、特定の文字列が含まれている場合に適用するものです。

ですので、画像のソース（src）に、特定の文字列が含まれていない場合は適用されません。

上手くいくかどうか、以下のコードに差し替えて、試してみてください。

.article .iwe-border img[src*="moshimo"],
.article .iwe-border img[src*="valuecommerce"],
.article .iwe-border-bold img[src*="moshimo"],
.article .iwe-border-bold img[src*="valuecommerce"],
.article .iwe-shadow img[src*="moshimo"],
.article .iwe-shadow img[src*="valuecommerce"],
.article .iwe-shadow-paper img[src*="moshimo"],
.article .iwe-shadow-paper img[src*="valuecommerce"] {
    border: none;
    box-shadow: none;
}

特定の文字列が何であるか、は、コードを見ればわかりますよね。

@amyさん

スマホの場合もブラウザでサイトを閲覧していることに変わりはないので、PCのブラウザと同様にブラウザのキャッシュを、その都度、消去する必要があります。

@leafytreeさま

　あらたなご助言に基づいて作業をしたところ、おかげさまで四角はすべて消えました。まことにありがとうございます。

　ご教示いただいたコードですが、例示された２つのＡＳＰ以外のＡＳＰのソースを今後新たに利用する場合は、そのＡＳＰのソースに含まれている文字列を抽出し、同じ形式のコードを新たに４行分作成して追加すればよろしいということでしょうか。

@amy さん

Cocoonの画像の囲み効果の仕組みは至ってシンプルで、以下のようにCSSのコードで、Classに対応する指定がなされているだけです。

/************************************
** 画像の囲み効果
************************************/
/*ボーダー*/
.iwe-border img,
.iwe-border amp-img {
  border: 1px solid #ccc;
}

/*ボーダー（太線）*/
.iwe-border-bold img,
.iwe-border-bold amp-img {
  border: 4px solid #eee;
}

/*シャドー*/
.iwe-shadow img,
.iwe-shadow amp-img {
  box-shadow: 5px 5px 15px #eee;
}

/*シャドーペーパー*/
.iwe-shadow-paper img,
.iwe-shadow-paper amp-img {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

画像の囲み効果を、１種類しか使わない場合は、使う効果のセレクタだけで、残りの３つは要らないということになります。

インプレッション計測用の画像は、1ピクセル四方のサイズを使っていることが多いようなので、１ピクセルの画像のソース（src）に含まれる、ASPの名称等でイケそうな気がします。

@leafytreeさま

　コードの内容そのものはまだまだ全く理解できませんが、大まかな構造や仕組みは何となく理解できました。この度は根気よくご対応いただきまして誠に有り難うございました。心より感謝いたします。また、いくつか言葉足らずの表現でご不快な思いをさせてしまったこと、こちらはおわび申し上げます。今後ともご指導、ご鞭撻のほど宜しくお願い申し上げます。