アメブロの新CSS編集用デザインで、コメント欄を「ふきだし風」にするカスタマイズ方法をご紹介します。
ユーザー間の交流が多くSNS要素の強いアメブロですので、その交流の場の一つとなるコメント欄を賑やかな雰囲気にできると思います。
コメント欄をふきだし風にする
このカスタマイズは、CSSの編集で行います。
画像等も使いませんので、CSSの末尾にコードを追加するだけで簡単にできます。
以下にコード例をご紹介しますので、CSSの末尾に追加してみて下さい。
/************************************************
新CSS:アメブロのコメントをふきだし風にする
************************************************/
[data-uranus-component="commentOwner"],
[data-uranus-component="commentOwner"].is-owner {
background-color: transparent;
}
[data-uranus-component="commentText"] {
position: relative;
margin: 10px 10px 20px 0;
padding: 15px;
border-radius: 5px;
border: 1px solid #cccccc; /* ふきだしの枠の色 */
background-color: #ffffff; /* 訪問者コメントの背景色 */
}
[data-uranus-component="commentText"]:before,
[data-uranus-component="commentText"]:after {
position: absolute;
content: "";
width: 0;
height: 0;
top: 100%;
border-style: solid;
border-color: transparent;
}
[data-uranus-component="commentText"]:before {
left: 20px;
border-width: 15px;
border-top-color: #cccccc; /* ふきだしの枠の色 */
}
[data-uranus-component="commentText"]:after {
left: 21px;
border-width: 14px;
border-top-color: #ffffff; /* 訪問者コメントの背景色 */
}
[data-uranus-component="commentOwner"].is-owner [data-uranus-component="commentText"] {
background-color: #f7f7f7; /* 管理人コメントの背景色 */
}
[data-uranus-component="commentOwner"].is-owner [data-uranus-component="commentText"]:after {
border-top-color: #f7f7f7; /* 管理人コメントの背景色 */
}
色を変えたい場合は
もし、ふきだし内の背景色を変えたい場合は、コード内の訪問者コメントの背景色
、管理人コメントの背景色
というコメント(注釈)の付いている行で色を指定することで、管理人以外と管理人のコメントの背景色を別々に変更することができます(各々2ヶ所ずつ変更箇所があります)。
まとめ
以上、アメブロの新CSS編集用デザインで、コメント欄を「ふきだし風」にするカスタマイズ方法をご紹介しました。
CSSにコードをコピペして保存するだけでできる簡単な方法ですが、コメント欄の雰囲気がかなり変わると思いますので、もしよかったら試してみて下さい。