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

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

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

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

CSS

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

Q&A

解決済

2回答

1850閲覧

CSSで自動連番を設定したが、数字が1つ飛ばしになってしまう

manchan

総合スコア24

WordPress

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

CSS

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

1グッド

1クリップ

投稿2020/04/14 01:21

下記のページです。
理由の連番についてです。
http://edogawa-office.uh-oh.jp/wp/moving/

counter-incrementを使って自動連番の設定をしています。
各項目一つの画像で右に表示すると、連番になりますが、
画像を項目の下にし、2つ表示すると「理由」の数字が1つ飛んでしまいます。

CSSは下記の通り

.reason .detail { justify-content: space-between; margin-bottom: 25px; counter-increment: num; } .reason .detail h3 { display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 15px; font-size: 25px; line-height: 1.4; } .reason .detail h3 span { display: block; width: calc(100% - 120px); margin-left: 20px; } .reason .detail h3:before { content: "理由" counter(num); width: 65px; height: 30px; margin: 0 10px 0 0; padding: 10px; text-align: center; color: #fff; background-color: #D21100; font-weight: normal; font-size: 22px; } .reason .detail h3:after { display: block; position: absolute; left: 97px; content: ''; width: 0; height: 0; margin: auto; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #d21200; } コード

同じサイトを制作してきましたが、今までにこの様なイレギュラーはありませんでした。
画像を2つ表示させ数字も連番にしたいです。
アドバイスをいただけますと幸いです。

Lhankor_Mhy👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

カウンターが重複していることが原因では。

css

1.reason .grid { 2 justify-content: space-between; 3 counter-increment: num; 4}

http://edogawa-office.uh-oh.jp/wp/wp-content/themes/office-service/css/top.css

css

1.reason .detail { 2 justify-content: space-between; 3 margin-bottom: 25px; 4 counter-increment: num; 5}

http://edogawa-office.uh-oh.jp/wp/wp-content/themes/office-service/css/service.css?20170303160110

html

1<div class="detail"> 2... 3 4<ul class="grid reason-img"> 5... 6 </ul> 7 </div>

投稿2020/04/14 01:58

Lhankor_Mhy

総合スコア36115

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

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

Lhankor_Mhy

2020/04/14 03:30

低評価をした方、当方としては心当たりがありませんので、理由を教えてください。
guest

0

コードの下部にある(おそらくfooter.phpかfunctions.phpで読み込んでいる)<link href="http://edogawa-office.uh-oh.jp/wp/wp-content/themes/office-service/css/top.css" rel="stylesheet" type="text/css" />内の

css

1.reason .grid { 2 justify-content: space-between; 3 counter-increment: num; /* ←これ */ 4}

が原因で、.reason .grid の時にもnumのカウントをアップしているようです。
カウンタ名を変更するとか必要ないCSSは読み込まないようにするとかで対処できると思いますが、他のページへの影響等もあるかと思うので慎重に編集してください。

投稿2020/04/14 02:06

dit.

総合スコア3235

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問