ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。
htmlの編集が出来ない場所とは
html の編集が出来るならそこに文章を追加するなりすれば良いだけです。しかし、html の編集が出来ない場所も場合によっては存在します。自分で全て作ったサイトなら編集できない場所などないと思いますが、システム的に作られたウェブサイトには html の編集が出来ない場所が存在する場合があります。
例えば、ネットショップであれば会社概要が書かれている場所などです。通常あのような所は html の直書きをしているわけではなく、プログラムで作られている事がほとんどです。その為、そのページの html の編集は出来ない事がほとんどです。
CSSならそんな場所に追記が出来るかも
前述のような編集が出来ない場所に何かしら追記したいという事がレアケースながらにあるかもしれません。普通なら仕様にない事なので出来ませんで片付くかもしれませんが、CSSなら追記ができるかもしれません。もちろん出来ないかもしれません。
出来る場合
可能である条件は2つあります。
- ページに外部 CSS を読み込む事ができる。
- 編集したい周辺のタグにクラスか ID が指定されている。
例を挙げますと、楽天、Yahoo!ショッピング、ポンパレモールでは可能です。
CSSで文章を追記する
簡単な例を出します。以下のようなテーブルがあり、それはシステム的に作られているものでテーブル内には各項目以外の文字は入力できない。電話番号欄には1つの電話番号しか載せられないですが、電話と FAX 番号を2行で表示したい場合というケースを想定します。
CSS の擬似クラスや擬似要素を活用すれば実現が可能です。
<table width="540" border="1" class="example">
<tr>
<td>会社名</td>
<td>○○××</td>
</tr>
<tr>
<td>住所</td>
<td>○○県○○市</td>
</tr>
<tr>
<td>電話番号</td>
<td>***-****-****</td>
</tr>
</table>
上記のような table タグに以下の CSS を適用します。
table.example tr:nth-child(3) td:nth-child(2):after{
content: "￥A***-****-****(FAX)";
white-space: pre;
}
適用した結果は以下のようになります。編集ができない場所でも CSS を使って文章を追加する事が可能なのです。
解説
肝となるのは「:nth-child」と「:after」の部分です。nth-child は擬似クラスといって「table.example tr:nth-child(3)」と指定すると、exampleクラスのテーブル内にある3番目の tr タグという意味になります。更に「td:nth-child(2)」でその tr タグの中の2番目の td タグを指定しています。
:after は擬似要素といって、その要素の後に指定した内容を追記するというものです。前に追記する「:before」もあります。
そして、CSS の content プロパティに追記したい内容を書きます。上の例にある ¥A は改行の意味です。 合わせて「white-space: pre;」を指定しないと改行されないので注意。あと、IE6とIE7には対応できません。
おわりに
今回は table タグを例に出しましたが、リストの ul li タグの何番目という指定もできるので各タグで様々な応用ができます。html の編集が出来ない場所に文章を追加したいという特異な例でしたが、こんな方法もありますよという事で参考になれば幸いです。