こんにちは。
『やさしいブログの作り方』の松田です。
![image](https://stat.ameba.jp/user_images/20130122/10/amecafe2011/84/a5/p/o0458037112387227435.png?caw=800)
以前、記事のコメント欄のカスタマイズで、読者さんと自分のコメント欄を色分けするやり方をご紹介したことがあります。
このカスタマイズは最新版のデザインスキン(サイドバーのプロフィール画像が丸型になっているタイプ)には適用することができません。
先日そのやり方はありませんか?というご質問を頂いたので、少しトライしてみたのですが、CSSの記述方法が大きく変わっており、全く同じというわけにはいきませんでした。^^;
暫定的なやり方ではありますが、こういう表示なら可能です。
![](https://stat.ameba.jp/user_images/20181106/09/amecafe2011/3d/07/p/o0694048814298081359.png?caw=800)
・自分の返信のみ背景色を入れる
・自分の返信のみ左側を少し凹ませる
・返信枠の左下に自分のプロフィール画像を入れる
適用させるにはCSSの最後に以下の記述を追記して下さい。
ご自身のプロフィール画像のURLアドレスの部分には、
ご自身のブログを開いて、プロフィール画像の上で右クリック
↓
「画像アドレスのコピー」または「画像をコピー」を選択
↓
ご自身のプロフィール画像のURLアドレスの部分にコピーしたアドレスを貼り付け
で表示されるようになります。
ちなみに私の場合だと、
のようなアドレスになります。
ご参考まで。^^
最後までお読みいただきありがとうございました。
『やさしいブログの作り方』の松田です。
![image](https://stat.ameba.jp/user_images/20130122/10/amecafe2011/84/a5/p/o0458037112387227435.png?caw=800)
以前、記事のコメント欄のカスタマイズで、読者さんと自分のコメント欄を色分けするやり方をご紹介したことがあります。
このカスタマイズは最新版のデザインスキン(サイドバーのプロフィール画像が丸型になっているタイプ)には適用することができません。
先日そのやり方はありませんか?というご質問を頂いたので、少しトライしてみたのですが、CSSの記述方法が大きく変わっており、全く同じというわけにはいきませんでした。^^;
暫定的なやり方ではありますが、こういう表示なら可能です。
![](https://stat.ameba.jp/user_images/20181106/09/amecafe2011/3d/07/p/o0694048814298081359.png?caw=800)
・自分の返信のみ背景色を入れる
・自分の返信のみ左側を少し凹ませる
・返信枠の左下に自分のプロフィール画像を入れる
適用させるにはCSSの最後に以下の記述を追記して下さい。
.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(ご自身のプロフィール画像のURLアドレス);
background-repeat:no-repeat;
background-position:left bottom;
background-size:50px 50px;
}
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(ご自身のプロフィール画像のURLアドレス);
background-repeat:no-repeat;
background-position:left bottom;
background-size:50px 50px;
}
ご自身のプロフィール画像のURLアドレスの部分には、
ご自身のブログを開いて、プロフィール画像の上で右クリック
↓
「画像アドレスのコピー」または「画像をコピー」を選択
↓
ご自身のプロフィール画像のURLアドレスの部分にコピーしたアドレスを貼り付け
で表示されるようになります。
ちなみに私の場合だと、
.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;
}
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;
}
のようなアドレスになります。
ご参考まで。^^
最後までお読みいただきありがとうございました。
お知らせ
ご登録頂くと、LINE@スタートアップセミナーをプレゼント!
やさしいブログのLINE@のご登録はこちらから
SNSを効果的に使うためのポイントが無料で学べます!
ネット集客を軌道に乗せるためのSNS活用講座(全7回)
やさしいブログのLINE@のご登録はこちらから
SNSを効果的に使うためのポイントが無料で学べます!
ネット集客を軌道に乗せるためのSNS活用講座(全7回)
![]() | ブログでビジネスを軌道に乗せるための行動術:やさしいブログが教えてくれたこと 1,620円 Amazon |