CSSで個別記事のstyle属性を一括変更させると文字装飾の修正も簡単♪その方法とは⁈(ページ3/3)
今回は、記事ごとにstyle属性を使って個別に設定した文字装飾や要素の背景色などをCSSで一括変更させる方法をご紹介します。
今までとはまったく異なる配色イメージのFC2ブログテンプレートを使ってみたい!と思う時ってありますよね。そんな時に気になる悩みの種は、記事を書く際に装飾した文字色などの問題。
個別記事の中でフォントカラーを白色に装飾した場合、テンプレートを白背景のものに変更したらどうなるのでしょうか?当然ですが、文字がまったく見えなくなってしまいますよね…。
そうなると、テンプレートを変えた後には個別記事ごとに手作業で修正する必要があるわけで、これが非常に厄介なんです。何故なら、僕のこのブログはこれが10050回目の更新。つまり、全部の記事をひとつずつチェックするのはさすがに無理だと思います(^_^;)
この問題が解決出来ないことには、ブログの大幅なイメージチェンジが出来ない…。しかし、ある便利ワザを知ったことがキッカケで「わざわざ個別記事をいじらなくても装飾したものを直せちゃうのか!」とビックリ。もしもこの方法を知らずにいたら、ずっとダークモードのブログ運営を続けていたはずです。
さっそく、ブロガーさんが知っておいて損のないCSSを使った裏ワザ的なWebテクニックを見て行きましょう♪
CSSにたった数行書くだけ⁈個別記事に設定したstyle属性の値を一括変更する方法
今回のテンプレート変更(ダークモードから白背景にイメチェン)で、僕がネックに感じていたことは、blockquote(引用タグ)に関すること。実は、訳あって数ヶ月ほど前(だったように思う)から記事を書く度に次のようなstyle属性を記述していたんです。
<blockquote style="background-color: black;"></blockquote>
このように書いた記事を放置したままでテンプレートを変更すると、テキスト色が黒になるため「黒テキスト&黒背景」という良からぬ事態が発生してしまいます。
だからと言って、記事ごとに手直し出来ないことは先ほどにも述べた通り。しかし、これを簡単に解決できる方法がFC2ブログのテンプレート製作者Akiraさんによって記事の中で紹介されていたんです。
「文字が読めない」このトラブルは多くの場合「白背景から黒背景にしたら(逆も然り)文字がところどころ読めなくなった」というケースが多いですね。つまり フォントカラー指定時に背景色が反転した場合を想定していなかった ということです。この解消法について。...
この方法。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テクニックです。覚えておいて決して損にはならないと思いますよ♪
【ランキングに挑戦中】
いつも応援クリック↓
ありがとうございます
- 患者と家族の闘病記録
- →にほんブログ村
- がんの症状、治療など
- →人気ブログランキング
- さまざまな病気や症状の悩みごと
- →FC2 ブログランキング
-
【FC2未対応】ブログの1記事を複数のページに分割するメリットとは?
2019/12/02 -
FC2ブログのヘッダー画像を徐々に表示させるアニメーションのカスタマイズ
2019/11/14 -
【FC2ブログテンプレート】Ampleのヘッダー画像、ランダム表示数を追加したけど文句ある?
2019/11/08 -
alt属性がないimg要素にJavaScriptで「alt=」を自動挿入する方法
2019/11/04 -
Google Chrome「混在コンテンツブロック強化」の影響か?要対策だな…
2019/11/01 -
【追記】FC2ブログ期間限定配布テンプレート「Ample」に変更‼︎カスタマイズに悪戦苦闘したけど素敵で満足♪
2019/10/22 -
オシャレな線画イラストが動く?!面白アニメーション付き無料アイコン素材200個セットを使ってみた♪
2019/10/12