新・コメント欄に自分のプロフィール写真を入れてかっこよく見せる方法

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

以前お伝えしたことがある、コメント欄に自分のプロフィール写真を入れる方法を再度ご紹介します。



コメント欄の左側にプロフィール写真を入れると、もらったコメントとお返事のコメントがわかりやすくなるというメリットがあります。

あと、フェイスブック風に見えます。（笑）



今回のカスタマイズに必要なCSSは以下の通りです。

.commentArea{
border-radius:10px;
}
.blogComment{
box-shadow:2px 2px 2px #969696;
background:#fffcfc;
border:1px solid #ffccff;
border-radius:15px;
margin:5px 30px 5px 5px;
}
.ownerComment{
margin:5px 5px 5px 30px;
border:1px solid #ccccff;
background:#fcfcff url(画像のアドレス);
background-size:50px auto;
background-repeat:no-repeat;
background-position:13px 13px;
}
.ownerComment .commentBody,
.ownerComment .commentHeader,
.ownerComment .commentFooter{
padding-left:60px;
}
.commentList li{
border:none;
}

上記の囲み枠内の記述をコピーして、ＣＳＳ編集画面の最後に追記しておいてください。

後ほど、上記の赤字の部分をアップロードする画像のアドレスに置き換えます。



次に、表示する画像を作ります。



マイページの左上にある自分の小さなプロフィール画像を右クリックし、「画像ＵＲＬをコピー」を選びます。（ＵＲＬをコピーが出ない場合は、プロパティ→画像のアドレス欄に表示されるアドレスをコピーしてください。）




再度ＣＳＳ編集画面を開いて先ほど赤字で書いてあった「画像のアドレス」の部分にコピーしたプロフィール写真のアドレスを差し替えます。

これで保存すればＯＫです。


最初の手間がかかりますが、コメント欄がとても見やすくなりますのでぜひ一度お試しください。

なお、このカスタマイズは新デザインスキンのみの対応、かつアメンバー記事では利用できませんのでご注意ください。


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

お知らせ

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

これからブログを頑張っていきたい！ まずは基本から。
やさしいブログづくりのための、やさしいメール講座

初めてでも安心して始められるメルマガ作成ガイド。
メルマガスタートアップガイド　YouTubeにて配信中

ブログが持つ魅力や可能性を私の言葉で綴りました。
書籍はこちらのオンラインショップのみで販売中です！