「追記」に ins 要素を使おうとして WordPress ではまったことのメモ

photo credit: athena. via photopin cc
photo credit: athena. via photopin cc

ブログを続けていると、情報が古くなったなどの理由で以前の記事に「追記」をする必要が出てくることがあります。先日、追記を HTML の ins 要素でマークアップしようとしたら CSS による装飾が思うようにできず、完全にはまってしまいました。functions.php を修正して解決することができたので、その道のりをメモします。

目次

  1. ins 要素
  2. 段落をマークアップした時に CSS が効かない
  3. 生成される HTML コードが変
  4. 原因は WordPress の自動で <p> タグ機能
  5. 後は CSS を修正するだけ

1. ins 要素

ins 要素は、タグで囲まれた部分が後から追加されたテキストであることを示します。HTML5 からは、いわゆるブロックレベル要素とインライン要素の両方に使えるようになったそうで、次のどちらの書き方もできます。

<p>もともとあった段落</p>
<ins>
<p>追加された段落</p>
</ins>
<p>もともとあった文章。<ins>追加された文章。</ins></p>

参考記事:

2. 段落をマークアップした時に CSS が効かない

自分が今回やろうとしたのは、情報が古くなってしまった過去記事に対し、新たに追加記事を書いたというお知らせを追記することでした。具体的には、次のような HTML コードです。

<ins datetime="2013-05-xx">
<p>2013-05-xx 追記: ・・・(中略)・・・</p>
</ins>

で、コードを書いて更新した結果、追記した文字は表示されたのですが CSS による装飾が効いていません。Twenty Twelve の style.css には次のように記述されているのに、背景色がつきません。

ins {
    background: #fff9c0;
    text-decoration: none;
}

いったんあきらめ、コードを次のように書き換えたらうまく行きました。でも、段落を丸々追加したのにインライン要素として書くのは何かしっくりきません。

<p><ins datetime="2013-05-xx">2013-05-xx 追記: ・・・(中略)・・・</ins></p>

3. 生成される HTML コードが変

そこで、うまく行かない方のコードに戻して再度ページを表示させてから、WordPress が実際に生成している HTML コードを確認。こんな感じで、明らかに変です。

<p>
    <ins datetime="2013-05-xx"></ins>
</p>
<p>2013-05-xx 追記: ・・・(中略)・・・</p>
<p></p>

iPhone でコーディングができる Textastic Code Editor for iPhone では、このような CSS が効かない現象は再現されませんでした。

4. 原因は WordPress の自動で <p> タグ機能

「WordPress で <p> タグ、WordPress で <p> タグ・・・」と10回ほど呟き、もしや!と思い出したのが、WordPress が <p> タグを自動的に挿入する仕様になっているということでした。この辺りは Webデザインレシピさんに詳しい解説があります。

functions.php に次のコードを追記したら、記述している通りの HTML コードを WordPress が生成してくれるようになりました。

remove_filter ( 'the_content', 'wpautop' );

5. 後は CSS を修正するだけ

ここまでできたら、残っている作業は CSS だけです。試しに ins 要素に display: block; を充てたら、きちんと背景色つきのボックスに囲まれました。

ただ、ins はインライン要素に対して用いることもあり得るので、今回はもともとの ins 要素のスタイルは変更せず、単純に次のようにしました。ins 要素の中にある p 要素に、スタイルを割り当てるという意味です。

ins p {
    border: 1px dashed #ccc;
    border-radius: 5px;
    padding: 15px;
}

できあがったスタイルがこちらです。水色の背景は、span を使って表現しました。

関連記事:

2013-05-19-001

なるべく追記が必要にならないようにしっかりとした記事を書ければよいのですが、書いた時点ではうまく行っていても後に状況が変わることもよくあります。

せっかくブログを見にきてくださった人に新しい情報があることを伝えるため、そして以前の記事にリンクを貼ってくださった他のブロガーさんにご迷惑をおかけしないためにも、誤りが判明し次第、追記していこうと思います。

One thought on “「追記」に ins 要素を使おうとして WordPress ではまったことのメモ

  1. Pingback: 投稿の追記をちょっとだけ目立たせてみた。 | 極楽ひだまり保育園

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です