WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:Instant WordPress エラーが発生した時に備えてバックアップを
HOME
次の記事:CSSのopacityプロパティが意図しない範囲まで適用される問題の解決法

擬似要素に全角文字を設定すると文字化けが起きる

Web知識

要素にID名hogeが設定されている

例えばブログ記事の前後のリンクにそれぞれ文言を付ける場合、HTMLファイルに直接 [ 前の記事: <記事タイトル> ] と設定する方法と、CSSで擬似要素を設定する方法があります。

今回考えるのは擬似要素を設定する方法です。記事のタイトルにID名hogeが設定されていると仮定します。そして今回の例で言うなら、次のコードで目的を果たす擬似要素を設定出来ます。

 

CSS

#hoge::before {
 content: '前の記事:';
}

※セミコロンが2つ付いていますが、1つでも問題無く動作します。擬似要素と擬似クラスを明確に区分する為、擬似要素にはセミコロン2つ、擬似クラスにはセミコロン1つというルールがCSS3で策定されました。

 

しかし、この記述ではブラウザ側の問題で、表示の際に文字化けを起こしてしまう可能性があります。実際オリジナルテーマ作成中にこの問題が起こりました(毎度ではなく条件不明で時おり起こる現象だったので、下手をしたら開発中この問題に気付かなかった恐れがあります)。

この問題は全角文字を直接記入するのではなく、Unicode変換したものを記入する事で解決します。

 

beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

上記サイトにてUnicode変換ツールがコードごと公開されていたので、それを頂戴しこの記事に埋め込ませてもらいました。

 

Unicode変換ツール

変換前:

変換後:

 

CSS

#hoge::before {
 content: '\524D\306E\8A18\4E8B\FF1A';
}

文字列をUnicodeに変換したら、あとはそれをcontentに設定し直すだけです。

 

|

擬似要素に全角文字を設定すると文字化けが起きる

0件のコメント

コメント

カテゴリ

月別アーカイブ