ゆうらり Happy Smile
CSSで個別記事のstyle属性を一括変更させると文字装飾の修正も簡単♪その方法とは⁈(ページ3/3)

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

FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など
2019/10/01
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#FC2ブログ #ブログ運営 #ブロガーお役立ち #CSS便利テク #CSS小ワザ #個別記事style属性一括変更 #style属性CSS #Webテク #Webデザイン #fc2ブログテンプレート

ブログ Webデザイン ブロガー

今回は、記事ごとにstyle属性を使って個別に設定した文字装飾や要素の背景色などをCSSで一括変更させる方法をご紹介します。

今までとはまったく異なる配色イメージのFC2ブログテンプレートを使ってみたい!と思う時ってありますよね。そんな時に気になる悩みの種は、記事を書く際に装飾した文字色などの問題。

個別記事の中でフォントカラーを白色に装飾した場合、テンプレートを白背景のものに変更したらどうなるのでしょうか?当然ですが、文字がまったく見えなくなってしまいますよね…。

そうなると、テンプレートを変えた後には個別記事ごとに手作業で修正する必要があるわけで、これが非常に厄介なんです。何故なら、僕のこのブログはこれが10050回目の更新。つまり、全部の記事をひとつずつチェックするのはさすがに無理だと思います(^_^;)

この問題が解決出来ないことには、ブログの大幅なイメージチェンジが出来ない…。しかし、ある便利ワザを知ったことがキッカケでわざわざ個別記事をいじらなくても装飾したものを直せちゃうのか!とビックリ。もしもこの方法を知らずにいたら、ずっとダークモードのブログ運営を続けていたはずです。

さっそく、ブロガーさんが知っておいて損のないCSSを使った裏ワザ的なWebテクニックを見て行きましょう♪

スポンサードリンク

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

ブログ テンプレート CSS

今回のテンプレート変更(ダークモードから白背景にイメチェン)で、僕がネックに感じていたことは、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テクニックです。覚えておいて決して損にはならないと思いますよ♪

« 前へ
次へ »
現在のページ3/3
あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事ランキング
FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など