ピックアップコンテンツの表示位置



  • ピックアップコンテンツの表示位置の変更を行いたいと思っております。どの様なカスタム方法が考えられますか?


    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • ピックアップコンテンツの表示位置で@Appliedが発言 :

    ピックアップコンテンツ
    横から失礼します。
    まず、スマホで表示崩れがあると困るので
    /*
    Template: jin
    Theme Name: jin-child
    Author: CrossPiece
    Version: 1.00
    */
    @media (max-width: 767px) {
    .pickup-contents-box .pickup-contents:before {
    position: absolute;
    content: "";
    width: calc(100% + 15px);
    height: 100%;
    background: #ccc;
    top: 0px;
    left: -15px;
    opacity: 0.12;
    }

    }

    @media (min-width: 768px) {
    .pickup-contents-box .pickup-contents {
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    }
    }
    @media (min-width: 835px) and (max-width: 1199px) { #contents { width: 100%; }

    }

    @media (min-width: 1024px) { #contents { width: 1024px; }

    }

    @media (min-width: 1200px) {
    .pickup-contents-box .pickup-contents {
    width: 1140px;
    margin: 0 auto;
    padding: 0 0px;
    margin-top: -24.2em;
    }
    }
    の様な感じに スマホとIPADのコードを入れておきます。

    パソコン表示の部分をカスタマイズします。
    .pickup-contents-box .pickup-contents {
    width: 1140px;
    margin: 0 auto;
    padding: 0 0px;
    ☆ margin-top: -24.2em;
    }
    ☆部分が足したところです。
    これで
    http://icecream.me/7d685917aef048e253578b4da3c1caec

    の様な感じで ヘッダー画像の上に持っていけますよ。

    スマホ部分を変えたい場合は、該当のところにコードを足せばできます。