元ニート中卒派遣30代ブサメン童貞のブログ

みんなが存在に疑問を感じている「元ニート、中卒、派遣、30歳超えのブサメン童貞」が実際に生息し、そして「どうやって生きてるか」を晒していくブログ

ユーザスタイルシートでデザイン改造する 〜テキストの書き換え編〜

f:id:design1983:20180726235557p:plain

Safariを使ってクラウド上で仕事をしているのですが、クラウドアプリケーションのデザインが糞すぎて我慢できません。Webインスペクタを使いながらユーザスタイルシートで専用ツールをオシャンティーでシャレオッティにするための個人的なメモ。あ、我慢できないのは糞じゃないよ。

あくまで自分用ですが、あとで自分で見て混乱しないようになるべくわかりやすい解説を心がけます。もうね、みんな小難しいこと書きすぎ。

CSSで既存のテキストを書き換える

外資系だからという理由は手抜きの言い訳にしかなっていないと思うのですが、専用ツールの文章が基本的にイングリッシュになっています。ファッキンジャップくらいわかるよ、バカ野郎!愛国心あふれる兄貴たちのために、日本語へ書き換えましょう。

HTMLソースは以下を基にします。

<p>僕は女子小・中学生が大好きです。</p>

実際の挙動 これが……

僕は女子小・中学生が大好きです。

実際の挙動 こうなる!

僕は女子小・中学生が大好きです。

CSSの解説

/********** 
改変前の世界
 **********/
p {
font-size: 0; /* 元のフォントサイズ */
}

/********** 
改変後の世界
 **********/
p::before {
color: red; /* 書き換え後のフォントカラー */
font-size: 16px; /* 書き換え後のフォントサイズ */
content: "断じて僕はロリコンではありません。"; /* 書き換え後の文章 */
}

::before擬似要素、::after擬似要素についての説明は面倒くさいので、もっとしっかりとしたサイトを見てください。要するに、改変前のfont-sizeプロパティの値を0にし、改変後のcontentプロパティで書き換えたい文章を指定する感じ。気持ち的にdisplayプロパティやvisibilityプロパティを使いたいところですが、改変前の要素そのものが消えてしまうのでアウツ。

またユーザスタイルシートを使う場合、適用順序を強く意識することをオヌヌメします。深く考えないで書いていくと!importantだらけになり、読み返すときに鬱になります。