素晴らしいプラグインです!
ただ一点、カテゴリページのみでハウス広告を非表示にする方法はありますか?あるいは、カテゴリボックスの下部のみに表示することは可能でしょうか?
素晴らしいプラグインです!
ただ一点、カテゴリページのみでハウス広告を非表示にする方法はありますか?あるいは、カテゴリボックスの下部のみに表示することは可能でしょうか?
こんにちは ![]()
最近、ハウス広告を表示することを目的としてサイトに広告プラグインを有効にしました。
ハウス広告テンプレートトピックで見つけた提案に従って、ハウス広告コードを追加しました。
しかし、モバイル/レスポンシブバージョンでサイトの他のテーマのCSSと競合してしまいます。
カテゴリボックスのコンテナの幅が、画面サイズを超えて広がっているようです。
使用しているCSSコードは次のとおりです。
.banner-ad {
display: flex;
justify-content: center; /* コンテンツを水平方向に中央揃え */
align-items: center; /* 広告内のコンテンツを垂直方向に中央揃え */
clear: both;
width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2)); /* 中央揃えのための明示的な幅 */
max-width: 100%; /* コンテナ幅を超えないようにする */
box-sizing: border-box;
margin: 15px auto; /* 広告を中央揃えし、上下に15pxのマージンを追加 */
text-align: center; /* インライン要素(画像など)を中央揃え */
img {
display: block;
margin: 0 auto; /* 広告内の画像を中央揃え */
max-width: 100%; /* 画像が広告幅に合わせてスケーリングされるようにする */
height: auto; /* アスペクト比を維持 */
max-height: 200px; /* 画像を制限するための最大高さを設定 */
object-fit: contain; /* 画像が比例してスケーリングされるようにする */
border-radius: 10px; /* 角を10pxで丸める */
&.desktop {
display: block;
}
&.mobile {
display: none;
}
}
}
@media only screen and (max-width: 100px) {
.banner-ad {
img.desktop, p {
display: none;
}
img.mobile {
display: block;
margin: 0 auto; /* モバイル画像のセンター揃え */
max-width: 80%; /* モバイル画像がコンテナ幅に合わせてスケーリングされるようにする */
height: auto; /* アスペクト比を維持 */
border-radius: 10px; /* モバイル画像も角を丸める */
}
}
}
これを修正するための提案はありますか?