나를 바꾸는 한 마디
목차
반응형
안녕하세요! 오늘은 whatever스킨 댓글창 꾸미기를 해보려고 합니다. 사실 크게 생각이 없던 부분인데. 우연히 본 댓글창이 대화창 형태로 구조가 이루어져 이뻐 보여서 적용해 봤어요. 윤프로 코드가 개발새발해님 포스팅을 참고해서 적용했고 해당 댓글창 html 구조가 기존 whatever스킨에 대입하기엔 변경해야 할 부분이 너무 많아서 동일한 스킨(오디세이) 댓글 구조를 사용해 제 방식대로 조금 수정했습니다.
보시는 것처럼 내 댓글(관리자)이 오른쪽이고 상대방(방문자)이 왼쪽에 위치해서 채팅방 느낌을 주는 형태입니다. 댓글이 많을 경우 댓글 입력하기 위해서 스크롤을 많이 내려야 하는 게 불편하다 생각이 들어서 댓글입력란 부분은 편의상 댓글보다 위에 배치했어요. 아직 부족한 게 많은 상태지만 이용하는데 큰 문제가 없어 그냥 사용 중입니다. 혹시 문제점 또는 의견 있으시면 알려주세요.
HTML 편집하기
더보기
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<div class='textarea'>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">등록</button>
</div>
</div>
</div>
</s_rp_input_form>
<!-- area-reply -->
<div class="area-reply">
<s_rp_container>
<ul class="list-reply">
<s_rp_rep>
<li id='' class="item-reply ">
<span class="thumbnail" style="background-image:url('')"></span>
<div class="box-content">
<div class="box-meta">
<strong></strong>
<span class="date"></span>
</div>
<div>
<p class="text"></p>
</div>
<div class="control">
<a href="#" class="link-comment" onclick="">답글</a>
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</div>
<s_rp2_container>
<!-- list-reply-comment -->
<ul class="list-reply-comment">
<s_rp2_rep>
<li id='' class="item-reply ">
<span class="thumbnail" style="background-image:url('')"></span>
<div class="box-content">
<div class="box-meta">
<strong></strong>
<span class="date"></span>
</div>
<div>
<p class="text"></p>
</div>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</div>
</li>
</s_rp2_rep>
</ul>
<!-- // list-reply-comment -->
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</s_rp_container>
</div>
<!-- // area-reply -->더보기를 누르시면 CSS창이 나옵니다. [스킨편집-HTML-HTML편집]에서 를 검색하시고 위 내용을 <s_rp>와 </s_rp> 사이에 있는 기존 구조와 교체해 주시면 됩니다. 저는 앞서 말했듯이 댓글 입력란이 먼저 오게 설정했는데. 작성된 댓글이 먼저 나오게 하려고 하면 <s_rp input_form>부터 </s_rp_input_form>까지 내용을 가장 뒤로 옮기시면 됩니다!
CSS 변경하기
더보기
/* area-reply - 상세페이지 댓글*/
.area-reply {
margin-bottom: 60px;
}
.area-reply a {
text-decoration: none;
font-size: 13px;
line-height: 1.69;
color: #909090;
}
.blind {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
margin: -1px;
width: 1px;
height: 1px;
}
.area-reply .item-reply {
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 25px 0 24px 0;
border-bottom: 1px solid #eee;
}
.area-reply .thumbnail {
display: block;
width: 48px;
height: 48px;
margin-right: 10px;
background-size: cover;
background-position: 50% 50%;
border-radius: 50px;
}
.area-reply .box-content {
width: calc(100% - 64px);
}
.area-reply .box-content .box-meta {
margin-bottom: 4px;
font-size: 13px;
line-height: 1.69;
}
.area-reply .box-content .box-meta strong a {
font-weight: 400;
color: #333;
margin-right: 10px;
}
.area-reply .date {
position: relative;
color: #909090;
font-size: 13px;
line-height: 1.69;
padding-right: 10px;
text-align: right;
display: block;
}
.area-reply .box-content .box-meta .date:before {
content: '';
position: absolute;
top: 9px;
left: 7px;
width: 2px;
height: 2px;
background: #c5c5c5;
display: none;
}
.area-reply .box-content .box-meta .date a {
position: relative;
padding-left: 18px;
color: #909090;
}
.area-reply .box-content .box-meta .date a:before {
content: '';
position: absolute;
top: 10px;
left: 7px;
width: 2px;
height: 2px;
background: #c5c5c5;
}
/*방문자 댓글창*/
.area-reply .box-content .text {
font-size: 14px;
line-height: 1.43;
color: #000000;
word-break: break-all;
border: 1px solid #e6e6e6;
padding: 10px;
box-shadow: 2px 5px 8px 0px #e7e7e794;
margin: 0 0px 3px 0;
position: relative;
border-radius: 20px 20px 20px 20px;
background-color: #f5f5f5;
margin-right: 45px;
}
.area-reply .box-content .text:after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 0;
border: 0.625em solid transparent;
border-right-color: #e6e6e6;
border-left: 0;
border-top: 0;
margin-top: -0.312em;
margin-left: -0.625em;
margin-right: 0;
right: auto;
}
.area-reply .box-content .box-modify {
position: absolute;
top: 24px;
right: -9px;
font-size: 13px;
}
.area-reply .box-content .button-modify {
width: 20px;
height: 20px;
padding: 10px 0 10px 10px;
background: url(./images/icon-modify.svg) no-repeat;
background-size: 14px;
background-position: 50% 50%;
border: none;
cursor: pointer;
}
.area-reply .box-content .list-modify {
display: none;
position: absolute;
top: 6px;
left: -76px;
width: 80px;
border: 1px solid #e8e8e8;
}
.area-reply .box-content .list-modify li {
border-bottom: 1px solid #e8e8e8;
}
.area-reply .box-content .list-modify li:last-child {
border-bottom: none;
}
.area-reply .box-content .list-modify a {
display: block;
line-height: 29px;
text-align: center;
color: #333;
background-color:#fff;
}
.area-reply .list-reply-comment {
width: 100%;
/*margin: 30px 0 -30px 0;*/
padding: 40px 0 28px 110px;
/*border-top: 1px solid #f0f0f0;*/
/*border-bottom: 1px solid #f0f0f0;*/
}
.area-reply .list-reply-comment .item-reply.rp_general {
margin-bottom: 5px;
padding: 0;
border-bottom: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: left;
}
.area-reply .list-reply-comment .item-reply.rp_admin {
margin-bottom: 10px;
padding: 0;
border-bottom: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
text-align: right;
}
.area-reply .item-reply.rp_admin {
margin-bottom: 10px;
padding: 0;
border-bottom: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
text-align: right;
}
.area-reply .list-reply-comment .item-reply:last-child {
margin-bottom: 0;
}
/*관리자 댓글*/
.area-reply .rp_admin .text {
margin: 0 0px 3px 0;
position: relative;
border-radius: 20px 20px 20px 20px;
background-color: #b0c4de;
margin-left: 45px;
}
.area-reply .rp_admin .text:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 0.625em solid transparent;
border-left-color: #e6e6e6;
border-right: 0;
border-top: 0;
margin-top: -0.312em;
margin-right: -0.625em;
margin-left: 0;
left: auto;
}
.area-reply .list-reply-comment .box-modify {
top: -4px;
right: 15px;
}
.area-reply .list-reply-other {
margin-bottom: 20px;
}
/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
.area-reply {
margin-bottom: 30px;
}
.area-reply .item-reply {
padding: 25px 0 19px 0;
}
.area-reply .thumbnail {
width: 38px;
height: 38px;
margin-right: 10px;
}
.area-reply .box-content {
margin-top: -3px;
}
.area-reply .box-content .box-meta {
line-height: 1.59;
}
.area-reply .box-content .box-meta strong a {
font-size: 12px;
}
.area-reply .box-content .box-meta .date {
padding-left: 0;
font-size: 12px;
}
.area-reply .box-content .box-meta .date:before {
background: none;;
}
.area-reply .box-content .text {
width: 100%;
margin-bottom: 8px;
font-size: 12px;
}
.area-reply .box-content .list-modify {
background: #fff;
}
.area-reply .list-reply-comment {
width: 100vw;
margin: 20px -20px -20px -20px;
padding: 20px 20px 13px 68px;
}
.area-reply .list-reply-comment .box-modify {
right: -9px;
}
.area-reply .list-reply-comment .box-meta {
margin-top: 6px;
}
}
.comments {
max-width: 100%;
margin-top: 10px;
border-top: 1px solid #e6e6e6;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.comments h2 {
margin-top: 25px;
font-size: 1.2em;
color: #b0d197;
margin-bottom: 10px;
}
.comments h2 .count {
color: #7a583a;
}
.comments .comment-list {
font-size:16px;
margin-bottom: 6px;
overflow:hidden;
}
.comments .comment-list ul li {
padding: 30px 0 25px;
border-top: 1px solid #e6e6e6;
position: relative;
min-height: 48px;
}
.comments .comment-list ul li:first-child {
border: none;
}
.comments .comment-list ul li ul li {
padding: 26px 0 0 60px;
border-top: 0;
border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
position: absolute;
overflow: hidden;
top:30px; height:48px;
left:0; right:0;
padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
top:26px;
left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
position: absolute;
left:0; top:0;
width: 48px;
height: 48px;
border-radius: 50%;
}
.comments .comment-list ul li .author-meta span {
display:inline-block;
}
.comments .comment-list ul li .author-meta a {
text-decoration:none;
color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
float:left;
font-size: 0.875em;
line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom: 3px;
margin-right: 0;
vertical-align: bottom;
}
.comments .comment-list ul li .author-meta .date {
float:left;
margin-left: 10px;
font-size: 0.75em;
color: #999;
line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin-right: 10px;
background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
margin-left: 10px;
}
.comments .comment-list ul li .control {
position: absolute;
top: 33px;
right:0;
}
.comments .comment-list ul li ul li .control {
top: 29px;
}
.comments .comment-list ul li .control a {
margin:0 2px;
text-decoration: none;
font-size: 12px;
color: #999;
}
.comments .comment-list ul li p {
position:relative;
margin: 29px 0 0 60px;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.comments .comment-form .field {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 10px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 120px;
height: 40px;
padding: 10px;
box-sizing: border-box;
}
.textarea {
display: block;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
border-radius: 20px 20px 20px 20px;
background-color: #f5f5f5;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
display: block;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
background-color: #f5f5f5;
border: none;
}
.comments .comment-form .field .secret {
float: right;
}
.comments .comment-form .field .secret input {
display: none;
}
.comments .comment-form .field .secret label {
font-size: 0.875em;
line-height: 40px;
color: #666;
outline: none;
cursor: pointer;
}
.comments .comment-form .field .secret label:before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin-right: 9px;
border: 1px solid #e1e1e1;
vertical-align: middle;
background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
background-position: -97px -295px;
}
.comments .comment-form .submit {
margin-bottom: 10px;
text-align: right;
}
/*댓글 작성 버튼*/
.comment-form .btn{
display: inline-block;
position: relative;
width: 80px;
padding: 0 10px;
border: 1px solid #00008b;
text-decoration: none;
text-align: left;
background-color: #00008b;
font-size: 12px;
text-align: center;
color: #ffffff;
border-radius: 20px 20px 20px 20px;
-webkit-transition: color .2s, background-color .2s;
transition: color .2s, background-color .2s;
}
.comment-form .btn:hover {
background-color: #00008b;
border-color: #00008b;
color: #ffffff;
font-weight: bold;
}
/* // area-reply - 상세페이지 댓글*/더보기를 누르시면 CSS창이 나옵니다.
[스킨편집-HTML-CSS]에서 .comment를 검색하신 다음 해당 부분부터 .pagination 바로 앞까지를 위 내용으로 변경해 주시면 됩니다. Whatever스킨 같은 경우는 관리자와 방문자 댓글이 따로 구분이 되어 있지 않아서 CSS값으로 내가 쓴 댓글이 오른쪽에 배치될 수 있도록 해주었습니다. 말풍선 색상도 변경 같은 경우는 /*방문자 댓글*/과 /*관리자댓글*/ 부분을 내용을 취향껏 변경하시면 됩니다.
Whatever스킨에는 댓글 작성 버튼 옆에 화살표가 표시가 되는데. 불필요하다 판단해서 .btn:after에서 background부분을 주석 처리(/**/)해서 없앴습니다. 댓글창 변경한 지 두 달이 다 되어가서 저도 뭘 어떻게 했는지 긴가민가하면서 작성한 게 있네요. 궁금하신 점은 댓글로 알려주세요. 감사합니다.
'일상다반사 > 블로그' 카테고리의 다른 글
| Whatever스킨 - 제목만 넣어도 자동으로 목차가 생성 된다고? (2) | 2023.02.27 |
|---|---|
| Whatever스킨 - 포스팅 썸네일 비율 알맞게 변경하는 법 (0) | 2022.12.19 |
| 본문 텍스트 밑줄에 Highlighter 효과 적용하기 (2) | 2022.10.06 |
| Whatever스킨 상단 헤더에 포스팅 타이틀 구현하기 (5) | 2022.09.20 |
| 무료 고퀄리티 블로그 로고 만들기 (Feat. WIX LOGO MAKER) (0) | 2022.09.15 |