こんにちは。サイトを拝見しましたが、書かれた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>
もしそうであれば、このスタイルはちゃんと当たっているように見えます。
@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を書いた
- 何らかのプラグインでその機能を実現している
のどちらかかは分かりますでしょうか。
@wildworks さんありがとうございます。
確かにテーマ「Lightning」をダウンロードしたときに、プラグイン「VK All in One Expansion Unit」もダウンロードされており、有効にして使用しています。その機能の1つで編集画面に「カスタムCSS」があり、そこにCSSを追加していたようです。
外観>カスタマイズ>追加CSS に参考URLのCSSを貼り付けると少しだけ反映されましたが、見出しなどのデザインを希望のようにならなかったので、自分調整かけていい感じにできました。
ありがとうございます。