comments trackbacks you may also like

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

2019年10月01日
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など
-
#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
\チェック/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール

この記事が気に入ったら
いいねとシェアしよう!

data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!
未分類 (0)
シン・胃がん闘病記 (31)
┣  AVANT: 癌の余命宣告~共存 (20)
┗  セントラルドグマ: 父親の胃癌 (11)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5948)
┣  胃がんブログ (285)
┣  よりぬき 胃がんブログ (16)
┣  胃がん闘病記・日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (35)
┗  がん治療のクラウドファンディング (10)
胃がん History (85)
┣  ステージ3B 多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
がん のこと(ガン情報全般) (512)
┣  がんブログ (290)
┗  がんニュース (222)
胃がん 障害年金ブログ (71)
┣  障害年金 - 準備編 (23)
┣  障害年金 - 審査から年金受給まで (12)
┣  障害年金 - 審査請求・不服申立 (26)
┗  障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (142)
┣  Amazonセール (2)
┗  📱kindleセール (139)
おもしろグッズ (11)
今日のエッセイ (114)
ニュース・芸能・話題 (777)
┗  転職・キャリアアップ (21)
占い・心理テスト (6)
恋愛・人間関係 (29)
終活ブログ (12)
グルメ (102)
┣  低糖質レシピ (25)
┗  お酒の飲み方 (2)
胃切除後の食事・レシピ (670)
┣  ご飯・おかゆ・和食 (174)
┣  おかず (139)
┣  味噌汁・スープ (74)
┣  カレー関係 (66)
┣  パン・洋食 (63)
┣  麺類 (112)
┗  その他、簡単レシピなど (39)
ブログ (243)
┣  FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (187)
┣  FC2ブログ日記(カスタマイズの所感など) (9)
┣  Google Adsense (アドセンス) (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhone の使い方・アプリなど (32)
司法書士 (26)
┣  仕事・実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (27)
┣  家電 (11)
┣  ホーム&キッチン (4)
┣  ビューティー&ケア (5)
┣  QOLの改善&ヘルスケア (2)
┗  お酒 (5)