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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1855閲覧

ワードプレスでオリジナルテーマでブログ機能を実装しているのですが、カテゴリ一覧ぺージのレイアウトが崩れます。

shunsaku87

総合スコア39

WordPress

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/27 06:27

ワードプレスでオリジナルテーマでブログ機能を実装しているのですが、アーカイブぺージの表示はおかしくないのですが、
カテゴリごとの一覧ページのみレイアウトが崩れてしまいます。

現状の表示

↑こんな感じで、10件表示される記事の部分が重なって上にずれてしまいます。ほかにもヘッダー、フッター部分の表示もくずれています。

もともと普通のhtmlページだったのをワードプレス化して、ブログ機能を実装しようとしています。
ワードプレス自体を扱うのは初めてでして、ネットで検索しながら試行錯誤して作っています。
ネット上にあるphpをコピペしたりしてphpを記述しているのでひょっとしたらphpのバージョンが古いとかいう問題はあるかもしれません。

プラグインは有効化しているものを無効化して表示を確認してみましたが、何も変わりませんでした。

cssのコードをいろいろ確認してみましたが、特に変わったことはありませんでした。

カテゴリごとの一覧ページはアーカイブページのコードをもとに生成されるんじゃないですか?
アーカイブページの表示が問題ないということはどこがおかしいのでしょうか。
(アーカイブページは上記リンクのページのヘッダーのCOLUMNというところをクリックすると出てきます。)

どなたか何かわかることがあれば教えてください。よろしくお願いします。

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

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

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

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

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

guest

回答2

0

category a によりposition:absolute で画像にnewマークを重ねたいのだと思いますが、
body_classによりbodyにcategoryクラスが付与されています。
body_classの設定を変更するか、categoryのクラス名を変更してください。

投稿2020/10/27 06:41

gogoweb_ikeda

総合スコア1426

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

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

gogoweb_ikeda

2020/10/27 06:45

不具合の温床になりそうなのでcategoryというクラス名事態を変更したほうが無難だと思いますが、 とりあえず修正するだけなら .category aを.category > a に変更してcategoryクラス直下のaタグにのみ効くようにする手もあります。 (body直下にaタグがあった場合そちらにも反映してしまいますが)
shunsaku87

2020/10/27 06:47

丁寧な回答ありがとうございました。
guest

0

ベストアンサー

こんにちは。

アーカイブページのbodyタグは以下のようでした。

HTML

1<body class="archive post-type-archive post-type-archive-post" class="is-hide">

カテゴリページは、以下の通りでした。

HTML

1<body class="archive category category-news category-2" class="is-hide">

このcategoryクラスを削除したところ、レイアウト崩れが解消されたように見えました。
おそらく、アーカイブページにもcategoryクラスが使われていて、その影響が出ているのではないかと思います。

投稿2020/10/27 06:43

Lhankor_Mhy

総合スコア36960

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

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

shunsaku87

2020/10/27 06:47

丁寧な回答ありがとうございます。 理解できて、解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問