[有料] ホームページ広告のレスポンシブ対応

マーケットプレイス
1

何を求めていますか？
すべてのデバイスでレスポンシブに表示されるように、新しいテーマコンポーネントに House Ads のレスポンシブ CSS を追加する必要があります。

現在、モバイルでは House Ads がデスクトップと同じ表示になっており、ユーザー体験が劣っています。

また、House Ads を正しく表示するためのレスポンシブ HTML の追加についてもサポートが必要です。

このタスクに対して提示できる予算（米ドル）はいくらですか？
わかりませんか？

「いいね！」 2
3

ハウス広告の投稿をご覧いただければ、デスクトップ用とモバイル用の背景画像を設定する方法がわかります。

<a href="" class="banner-ad" target="_blank">
    <img class="desktop" src="">
    <img class="mobile" src="">
</a>

それぞれの画像を設定するだけです（モバイルは幅を狭く、デスクトップは幅を広く）。それだけで完了です！

私が実際に使用しているサイズは以下の通りです：

  • モバイル：1282x311
  • デスクトップ：755x90

次にコンポーネントを作成し、以下の CSS を追加してください：

$cta-background-color: #FE4644;
$cta-text-color: #FFFFFF;

.banner-ad {
    display: flex;
    clear: both;
    max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
    background-color: #FEF25E;
    border: 1px solid $primary;
    box-sizing: border-box;
    img {
        height: 90px;
        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
            width: 100%;
        }
    }
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        p {
            margin: 0;
            &.small {
                font-weight: bold;
                text-align: right;
                padding: 1px 5px;
                background-color: #000000;
                color: #FFFFFF;
            }
            &.big {
                font-size: 24px;
                line-height: normal;
                padding-bottom: 5px;
                color: #434343;
                font-weight: lighter;
            }
        }
        .cta {
            color: $cta-text-color;
            background-color: $cta-background-color;
            &:hover {
                background-color: darken($cta-background-color, 20%);
            }
        }
    }
}

@media only screen and (max-width: 672px) {
    .banner-ad {
        img.desktop, p {
            display: none;
        }
        img.mobile {
            display: block;
        }
        .container {
            justify-content: center;
            .cta {
                margin: 0 5px;
                font-size: 12px;
            }
        }
    }
}

奇妙なサイズですが、問題なく動作します！実際の動作はこちらでご確認いただけます。

これにお金を払う価値はないかもしれません…むしろ Discourse への寄付を検討した方が良いでしょう！

「いいね！」 5
FKB Pro - Social theme
4

状況によっては、これにお金を払う価値があるかもしれません。Web 開発のバックグラウンドを持つ人にとっては自明に思えることも、その知識がない人にとってはかなり複雑に思えることを忘れがちです。

「いいね！」 1
5

わかりますが、このコミュニティは素晴らしくて、ほとんどの人がこういったことの手助けをしてくれます :stuck_out_tongue:

「いいね！」 1
6

確かに！参考までに言うと、この作業の報酬は200〜500ドル程度になると思います。提供してくださったコードを適用するだけで済む可能性もありますが、作業が進むにつれて予期せぬ問題が発生するかもしれないため、思っていたよりも時間がかかるかもしれません。

「いいね！」 3
7

@Juan_Adamuz

ご協力ありがとうございます！House Ads に HTML を追加し、テーマに CSS を追加する方法は知っていましたが、正しく動作させるのに苦労していました。そのため、あなたのメッセージのおかげで、より良く対応できました。

ただし、問題があるようです。モバイルとデスクトップの両方で、アウトラインの周囲に別のバナーが背後に表示されているように見え、バナー広告の右側に余計な黄色いスペースがあります。モバイルでは表示されない同じ広告が「投稿ストリームの上」に表示されていますが、そこにはアウトラインや黄色い部分は見られません。何が起きているのかご存知でしょうか？

Unschooling(.).com のホームページで広告をご覧いただけます。下では両方とも正しく表示されているため、CSS の何かがアウトラインと黄色いスペースを引き起こしていると思われます。

以下は、House Ads ページから取得した CSS とともに使用した HTML です：

<center><a href="https://shareasale.com/r.cfm?b=839764&amp;u=2163380&amp;m=40843&amp;urllink=&amp;afftrack=" class="banner-ad" target="_blank">
<img class="desktop" src="https://static.shareasale.com/image/40843/Declan728X90.jpg">
<img class="mobile" src="https://static.shareasale.com/image/40843/2kids468x60.jpg">
</a></center>
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.