- このトピックには2件の返信、2人の参加者があり、最後に
により10年、 2ヶ月前に更新されました。
-
投稿
-
-
simplicity2.2.0d.zip
simplicity2-child20160110.zip
を利用しています。記事本文中のH3タグの頭に自動で連番を振りたいと思ったので、
CSSの
counter-increment
counter-reset
の方法を使って試してみました。
でも、どのH3タグにも数字の1が付き、incrementが動いていないようでした。
テーマに関係するのかなと思ってSimplicity以外の他のテーマにしてみましたが、同じ結果でした。
なのでSimplicityではなくWordPressに関する問題なのかと思います。原因は分かりませんん。
代替案としてJavaScriptかPHPでプログラムを書いてみようかなと思ったりもしたのですが、
H2やH3タグはSimplicityではAdSense広告の表示位置の制御にも使われていると思います。
自作で番号を振るプログラムなどを動かすと、そういう機能に何か悪影響が出るなどの可能性はありますか？
連番が自動的に振れれば良いので何か解決策をご存じでしたら教えて下さい。
目的は、長い文章を書いた場合に、第何章みたいな感じで数字があると分かり易いと思うからです。
よろしく。 -
以下のような感じでいけるかと思います。
.entry-content h2{ counter-increment: counter-h; } .entry-content h2:before{ content: counter(counter-h, decimal)"."; margin-right: 10px; }H3で適用する場合はH2を書き換えてください。
あと、リセットをする必要があるときはいいかなどを参考にリセット場所を指定してください。
CSS（スタイルシート）で連番・項目名などを付ける｜web biboおそらく、テーマでもWordpressでもなくCSSの書き方の問題かと思われます。
PHPで書いた場合は、コード次第でどうとでもなるので、良いコードを書けば影響は出ないですし、間違ったコードを書けば影響が出ると思います。
-
わいひらさん、
この度は、わざわざサンプルを作って頂きましてどうも有難うございました。
大変感謝しております。期待通り動きました。当初は、カウンタはこのurlの例をそのまま引用して
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Countersこんなふうに作っていました。
h3:before {
counter-increment: section; /* section カウンタを増加 */
content: “Section ” counter(section) “: “; /* カウンタを表示 */
}
WordPress以外では、この方式で今まで何度かカウンタの表示をしたことが有ったので、この記述で
カウンタが動かないとは思いも付きませんでした。でも、わいひらさん方式でやると確かに正しくカウンタ変数が増えていきます。
counter-increment
の部分をどこで実行するかによって挙動が変わるのですね。
大変勉強になりました。
ありがとうございました。助かりました。
-
- トピック「H3タグに連番で数字を付けたい」には新しい返信をつけることはできません。