サポート » 使い方全般 » WP Show Posts デザインカスタマイズ

  • 解決済 foodnet

    (@foodnet)


    WP Show Posts のデザインをURLリンクを参考にカスタマイズしようとし、CSSを固定ページのカスタム CSSに貼り付けたのですが全く反映されません。

    参考URL:https://mom-neuroscience.com/wp-show-post/

    #wpsp-6240

    “6240”の部分は、ショートコードで生成された数字”3062″を入力しましたが変化がありません。

    プログラムに関して無知なため、どこを変更すればよいのかわかりません。

    どうかお助けお願いいたします。

    • このトピックはfoodnetが1年、 1ヶ月前に変更しました。

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • こんにちは。サイトを拝見しましたが、書かれたCSSは以下で合っていますか?

    <style>
    .wp-show-posts-columns#wpsp-3062 {
      margin-left: -2em;
    }
    .wp-show-posts-columns#wpsp-3062 .wp-show-posts-inner {
      margin: 0 0 2em 2em;
    }
    </style>

    もしそうであれば、このスタイルはちゃんと当たっているように見えます。

    トピック投稿者 foodnet

    (@foodnet)

    @wildworks さん返信ありがとうございます。

    書いたCSSは参考サイトのCSSすべて書きました。現状下記のようにCSSには書いてます。

    /*固定ページの各投稿記事の枠線*/
    article.wp-show-posts-single.post{
    border: 2px solid #E6E6E6;
    border-radius: 10px;
    padding: 1em;
    }
    .wp-show-posts-columns#wpsp-3062 .wp-show-posts-inner {
    margin: 0;
    .wp-show-posts-columns#wpsp-3062 {
    margin-left: 0em;
    
    .blog .site-main>article, .archive .site-main>article, .search .site-main>article {
    padding: 1.5em;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 2em;
    }
    img, video {
    height: auto;
    max-width: 50%;
    }
    
    
    /*フロントページ用、固定ページ枠内スペース*/
    .wp-show-posts-single.post {padding:0.5; }
    .wp-show-posts-inner {
    margin: 0;
    }
    .single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {
    margin-left: 0;
    margin-right: 0;
    max-width: 1400px;
    }
    
    /** フロント枠内のスペース */
    .blog .site-main > article,
    .archive .site-main > article,
    .search .site-main > article {
    padding-left: 2em;
    padding-right: 2em;
    padding-top:1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 1em
    }
    
    .wp-show-posts-image {
        height: 0;
        padding-bottom: 33.33%;
        overflow: hidden;
    }
    
    
    .wp-show-posts-image {
        height: 0;
        padding-bottom: 33.33%;
        overflow: hidden;
        position: relative;
    }
    
    .wp-show-posts-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover !important;
    }

    固定ページ編集の下部のCSSカスタムに記載しました。

    しかし、記入前と後で変化がありません。サイトの例だと画像のように変化すると思っていたのですが何も変わらなかったです…。

    以下の情報を追加します。

    ■wordpress: バージョン 6.1.1

    ■テーマ:Lighting バージョン: 15.5.1

    書いたCSSは正しいはずですが、フロントエンド側でそのスタイルが出力されていないように見えます。

    固定ページ編集の下部のCSSカスタムに記載しました。

    WordPress のデフォルトの機能では、固定ページ個別にCSSを書ける機能はないはずですが、

    • カスタムHTMLブロックでCSSを書いた
    • 何らかのプラグインでその機能を実現している

    のどちらかかは分かりますでしょうか。

    トピック投稿者 foodnet

    (@foodnet)

    @wildworks さんありがとうございます。


    確かにテーマ「Lightning」をダウンロードしたときに、プラグイン「VK All in One Expansion Unit」もダウンロードされており、有効にして使用しています。その機能の1つで編集画面に「カスタムCSS」があり、そこにCSSを追加していたようです。


    外観>カスタマイズ>追加CSS に参考URLのCSSを貼り付けると少しだけ反映されましたが、見出しなどのデザインを希望のようにならなかったので、自分調整かけていい感じにできました。

    ありがとうございます。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「WP Show Posts デザインカスタマイズ」には新たに返信することはできません。