【はてなブログカスタマイズ】【コピペOK】オシャレな引用デザインへ変更する方法(画像白飛び防止)
スポンサーリンク
以前から気になっていたのですが・・己の知識の無さを理由に無視していた問題。
画像を引用したときに、『白飛び』する現象・・
これです。記事:【買って正解】永遠に着まわせるH&Mの万能TOPS3選より
女性モデルの右写真、実はタンクトップだけの写真になっています(😢)
引用する前は見えているのに、引用したとたん、『どろん(消失)』
何故か消えてしまうーーー。
全部が全部の写真が消えるわけではないのですが、
写真によっては画素がボヤっとしてしまうこともあったりしました。
この記事ではこの『画像白飛び現象』を解決する方法を書きます(人''▽`)
【解決法】引用CSSを変更する
簡単な話、引用CSSを変えれば『画像白飛び現象』を解決することができました。
コピペだけでカスタマイズできる引用CSSはコチラ(サルワカさん)から
お借りしました。ありがとうございます(😢)
オシャレで可愛いCSSが沢山あるので、本当にありがたいです💛
【引用CSS変更後のイメージ】
もともと、少し見えにくい写真ではあったのですが、無事復活させる事が出来ました。
- 引用すると画像が白飛びしてしまう方
- 可愛い引用デザインに変えたい方
引用CSSの変更方法
引用CSSを変更するには
自分の選択しているテーマのCSSコードにある”デフォルト引用CSS”を消して、
”設定したい引用CSS”に書き換える必要があります。
私は「Flatbox」というテーマを選択していますので、テーマ「Flatbox」のCSS
にある「引用CSS」部分を変更します。
詳しく説明していこうと思います。
①自分の選択しているテーマCSSの中身をみてみる
まずは自分が選択しているテーマのCSSの中身から『引用CSS』部分を
特定してあげる必要があります。
なので!!自分が選んでいるテーマのCSS中身を確認しましょう。
やり方は ↓ ↓ ↓ ↓
②引用CSSの部分を特定する
テーマのCSSの中身をみてみると、『blockquote』(引用)について
書かれているCSSがあると思います。
コレがデフォルトの引用CSSになるので、この部分を変更する必要があるわけです♬
③引用デフォルトCSS ⇒ 設定したい引用CSSへ変更する
【注意】必ず変更する前にかならずバックアップは取っておきましょう!
※上手くCSSが走らないと悲しむのは自分だけです!
さきほど確認したデフォルトの引用CSS部分を消して
設定したいCSSに置き換えましょう。
④テーマCSSへ貼り付け変更
まずは右上のブログトップから『デザイン』を選択する
③で作ったCSSを変わりに貼りつけて変更を保存します。
【デフォルトのテーマCSSCSSは削除】
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
【③で作ったCSS全部を代わりに貼り付け】
引用CSS部分だけを変更したテーマCSS全部を貼り付け(人''▽`)☆
完了です♬
最後に
画像白飛び問題を抱えている方のご参考になれば幸いです。
引用のカスタマイズですが、とてもオシャレものが多いので
問題なくともカスタマイズして変更したら可愛いと思います★
Don't Worry,Be Happy