質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

1回答

1652閲覧

WordPressで固定ページの複製を行うためにコピペするとcssが効かなくなる

wacky1224

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2022/01/07 06:28

WordPressで作ったLPでABテストを行いたいです。

そのため固定ページの複製を行いたいのですが、固定ページの編集画面からすべてのコードをコピペするとコピー先のページにcssが効きません。(コピー元のページはちゃんと表示されています)

固定ページを複製するプラグインなども使ってみたのですが、同じ状況でした。

考えられる原因がございましたらご教授いただけますと幸いです。
何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

実際のHTMLやCSSが不明なため、的外れかもしれませんが
「考えられる原因」とのことですので回答します。


固定ページのページidまたはslugの値を、bodyタグなどにclassやidとして出力していませんか?

代表的なものでは、このような感じでclass名を付ける方法があります。

例:

HTML

1<body class="page-template-default page page-id-11 company">

参考:【WordPress】bodyタグに異なるclassを付与してくれる[body_class]の便利な使い方。

例の場合だと、page-id-11company は、固定ページごとに自動で違うclass名になります。

このような、固定ページごとに自動で付与されるclass名またはid名を利用したCSSを使用している場合
固定ページごとにhtml上のclass名が変わるため、CSSが効かなくなります。

投稿2022/01/07 06:43

AsukaKobayashi

総合スコア296

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wacky1224

2022/01/11 01:04

ありがとうございます。 固定ページごとに自動で違うclass名で指定していた場合、そのページの複製を作るのは、cssを転記するするしかないということで間違いないでしょうか?
AsukaKobayashi

2022/01/11 03:12

具体的な状況がわからない状態では、方法はいくつか考えられます。 仮に .page-id-11 .title{ font-weight:bold; } というCSSをもとのページで使っていた場合、方法はおおよそ下記の3つになるのではないでしょうか。 ■方法1:CSSを複製してから、複製したほうは固定ページごとに自動生成されるclass名の部分を書き換える .page-id-11 .title{ font-weight:bold; } .page-id-12 .title{ font-weight:bold; } ■方法2:複製したページ用の指定を併記する .page-id-11 .title, .page-id-12 .title{ font-weight:bold; } ■方法3:固定ページごとに自動生成されるclass名を使わないように変更する 固定ページのエディタ内に記述しているHTML全体を <div class="lp"></div> で囲み、CSSを変更 .lp .title{ font-weight:bold; }
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問