CSSで個別記事のstyle属性を一括変更させると文字装飾の修正も簡単♪その方法とは⁈（ページ3/3）

CSSにたった数行書くだけ⁈個別記事に設定したstyle属性の値を一括変更する方法

今回のテンプレート変更（ダークモードから白背景にイメチェン）で、僕がネックに感じていたことは、blockquote（引用タグ）に関すること。実は、訳あって数ヶ月ほど前（だったように思う）から記事を書く度に次のようなstyle属性を記述していたんです。

＜blockquote style="background-color: black;"＞＜/blockquote＞

このように書いた記事を放置したままでテンプレートを変更すると、テキスト色が黒になるため「黒テキスト＆黒背景」という良からぬ事態が発生してしまいます。

だからと言って、記事ごとに手直し出来ないことは先ほどにも述べた通り。しかし、これを簡単に解決できる方法がFC2ブログのテンプレート製作者Akiraさんによって記事の中で紹介されていたんです。

背景色と衝突してテキストが読めない！に対処する

「文字が読めない」このトラブルは多くの場合「白背景から黒背景にしたら(逆も然り)文字がところどころ読めなくなった」というケースが多いですね。つまり フォントカラー指定時に背景色が反転した場合を想定していなかった ということです。この解消法について。...

vanillaice000.blog.fc2.com

この方法。CSSにたった数行書くだけで、個別記事に設定したstyle属性の値を一括変更できちゃうだなんて何て凄い便利ワザなのだろう！と思いました。

これを知った僕は「シメシメ」と…。頭の中でイメージして大丈夫なように感じたので、さっそくテンプレート変更に挑戦することにしました。

さっそくCSSを記述！しかし一括変更できない⁉︎何故なの⁇

さっそく、CSSに次のような記述をおこない、テンプレートを変更！

blockquote［style$="black"］｛{background-color: var(--body-color)!important;｝
blockquote［style$="#000000"］｛background-color: var(--body-color)!important;｝
blockquote［style$="rgb(0, 0, 0)"］｛background-color: var(--body-color)!important;｝

ところが、まったく一括変更されず(ﾟoﾟ;;

黒テキスト＆黒背景の珍現象が無数に発生してしまいました(￣O￣;)

いろいろと悩んだ挙句、理由がわからない…。

「ヤバイぞ！これは…。」

焦りが込み上げてくるも、どうにも解決できない。仕方なく、style属性を記述した記憶をさかのぼり、個別記事をチェックしながら手作業での修正作業を余儀なくされたのです。

だいたい、200記事～300記事ほど手直ししたものの、途中でギブアップ！駄目だ…。もう一度もとに戻そうかしら⁈( ；´Д｀)

「何だ、そうだったのか！」ひょんな思い付きで一件落着

最後にもう一度、CSSの記述を見渡してみる。そして、ひょんな思い付きで次のように書き直したものを書き込んでみたのです。

blockquote［style$="black;"］｛{background-color: var(--body-color)!important;｝
blockquote［style$="#000000;"］｛background-color: var(--body-color)!important;｝
blockquote［style$="rgb(0, 0, 0);"］｛background-color: var(--body-color)!important;｝

そうしたら、一発でぜんぶ修正されましたよ！何だ、「；」（セミコロン）も加えなきゃいけなかったのか(￣▽￣;)

とりあえず、一件落着。良かった良かった…。

まとめ

Web知識が疎いこともあり、途中で挫折しかけましたが何とか無事終了♪ こうして、ぼくの胃がんブログ『ゆうらり Happy Smile』はダークモードから白背景のパステル調に生まれ変わったのでした。

これからWebデザインの変更や色調のイメージチェンジをご検討のブロガーさんにとっては非常に便利なCSSテクニックです。覚えておいて決して損にはならないと思いますよ♪

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

posted with カエレバ

楽天市場で探す

Amazonで探す

Yahooショッピングで探す

7netで探す