aアラサー女子力向上BLOG

スポンサーリンク

【はてなブログカスタマイズ】【コピペOK】オシャレな引用デザインへ変更する方法(画像白飛び防止)

スポンサーリンク

f:id:chi_monluv:20200512155702p:plain

 

こんにちはー。雰囲気オシャレを大事にするアラサー女子@chi-sha-です。 

 

以前から気になっていたのですが・・己の知識の無さを理由に無視していた問題。

画像を引用したときに、『白飛び』する現象・・

 

これです。記事:【買って正解】永遠に着まわせるH&Mの万能TOPS3選より

f:id:chi_monluv:20200512115526j:plain

 女性モデルの右写真、実はタンクトップだけの写真になっています(😢)

引用する前は見えているのに、引用したとたん、『どろん(消失)

 

何故か消えてしまうーーー。

全部が全部の写真が消えるわけではないのですが、

写真によっては画素がボヤっとしてしまうこともあったりしました。

 

この記事ではこの『画像白飛び現象』を解決する方法を書きます(人''▽`)

 

 

【解決法】引用CSSを変更する

簡単な話、引用CSSを変えれば『画像白飛び現象』を解決することができました。

コピペだけでカスタマイズできる引用CSSコチラ(サルワカさん)から

お借りしました。ありがとうございます(😢)

 

オシャレで可愛いCSSが沢山あるので、本当にありがたいです💛

 

【引用CSS変更後のイメージ】

f:id:chi_monluv:20200512121057j:plain

タンクトップの写真が復活!!!

 もともと、少し見えにくい写真ではあったのですが、無事復活させる事が出来ました。

この記事はこんな方にオススメ
  • 引用すると画像が白飛びしてしまう方
  • 可愛い引用デザインに変えたい方

 

引用CSSの変更方法

引用CSSを変更するには

自分の選択しているテーマのCSSコードにある”デフォルト引用CSS”を消して、

”設定したい引用CSS”に書き換える必要があります。

 

私は「Flatbox」というテーマを選択していますので、テーマ「Flatbox」のCSS

にある「引用CSS」部分を変更します。

 

詳しく説明していこうと思います。

 

①自分の選択しているテーマCSSの中身をみてみる

まずは自分が選択しているテーマのCSSの中身から『引用CSS』部分を

特定してあげる必要があります。

 

なので!!自分が選んでいるテーマのCSS中身を確認しましょう。

やり方は ↓ ↓ ↓ ↓

chi-monluv.hatenablog.jp

 

②引用CSSの部分を特定する

テーマのCSSの中身をみてみると、『blockquote』(引用)について

書かれているCSSがあると思います。

 

コレがデフォルトの引用CSSになるので、この部分を変更する必要があるわけです♬

f:id:chi_monluv:20200512144834j:plain

 

③引用デフォルトCSS ⇒  設定したい引用CSSへ変更する

【注意】必ず変更する前にかならずバックアップは取っておきましょう!

    ※上手くCSSが走らないと悲しむのは自分だけです!

 

さきほど確認したデフォルトの引用CSS部分を消して

設定したいCSSに置き換えましょう。

f:id:chi_monluv:20200512151248j:plain

 

④テーマCSSへ貼り付け変更

まずは右上のブログトップから『デザイン』を選択する

f:id:chi_monluv:20200512124532j:plain

 

そうすると、画面左に下記のような画面が出てくるので

『スパナ』のアイコンを選択し更に『デザインCSS』を選択する

f:id:chi_monluv:20200512124625j:plain

 

デザインCSSに、自分が選択している『テーマCSS』が記載されています。

『<system section="theme"』から始まっているCSSは削除して

③で作ったCSSを変わりに貼りつけて変更を保存します。

 

【デフォルトのテーマCSSCSSは削除】

f:id:chi_monluv:20200512151114j:plain

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

【③で作ったCSS全部を代わりに貼り付け】

引用CSS部分だけを変更したテーマCSS全部を貼り付け(人''▽`)☆

f:id:chi_monluv:20200512153055j:plain

 

完了です♬

 

最後に

画像白飛び問題を抱えている方のご参考になれば幸いです。

引用のカスタマイズですが、とてもオシャレものが多いので

 問題なくともカスタマイズして変更したら可愛いと思います★

 

是非ともトライください(人''▽`)

 

Don't Worry,Be Happy