【最新版デザインスキン用】コメント欄の自分の返信枠にプロフィール画像を入れるカスタマイズ

こんにちは。
『やさしいブログの作り方』の松田です。

image

以前、記事のコメント欄のカスタマイズで、読者さんと自分のコメント欄を色分けするやり方をご紹介したことがあります。

このカスタマイズは最新版のデザインスキン（サイドバーのプロフィール画像が丸型になっているタイプ）には適用することができません。

先日そのやり方はありませんか？というご質問を頂いたので、少しトライしてみたのですが、ＣＳＳの記述方法が大きく変わっており、全く同じというわけにはいきませんでした。＾＾；


暫定的なやり方ではありますが、こういう表示なら可能です。



・自分の返信のみ背景色を入れる
・自分の返信のみ左側を少し凹ませる
・返信枠の左下に自分のプロフィール画像を入れる


適用させるにはＣＳＳの最後に以下の記述を追記して下さい。

.skin-bgQuiet{
margin-left:60px;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;
border-left:2px solid #dddddd;
border-right:2px solid #dddddd;
box-shadow:3px 3px 3px #999999;
background:#f7f7f7 url(ご自身のプロフィール画像のＵＲＬアドレス);
background-repeat:no-repeat;
background-position:left bottom;
background-size:50px 50px;
}


ご自身のプロフィール画像のＵＲＬアドレスの部分には、

ご自身のブログを開いて、プロフィール画像の上で右クリック
↓
「画像アドレスのコピー」または「画像をコピー」を選択
↓
ご自身のプロフィール画像のＵＲＬアドレスの部分にコピーしたアドレスを貼り付け

で表示されるようになります。


ちなみに私の場合だと、

.skin-bgQuiet{
margin-left:60px;
border-top:1px solid #dddddd;
border-bottom:1px solid #dddddd;
border-left:2px solid #dddddd;
border-right:2px solid #dddddd;
box-shadow:3px 3px 3px #999999;
background:#f7f7f7 url(https://stat.profile.ameba.jp/profile_images/20180815/08/2c/kS/j/o16001600p_1534288006219_rzjwn.jpg?cat=120);
background-repeat:no-repeat;
background-position:left bottom;
background-size:50px 50px;
}

のようなアドレスになります。


ご参考まで。＾＾


最後までお読みいただきありがとうございました。

お知らせ
ご登録頂くと、ＬＩＮＥ＠スタートアップセミナーをプレゼント！
やさしいブログのＬＩＮＥ＠のご登録はこちらから

ＳＮＳを効果的に使うためのポイントが無料で学べます！
ネット集客を軌道に乗せるためのＳＮＳ活用講座（全７回）