빛채경
접속 : 4247   Lv. 51

Category

Profile

Counter

  • 오늘 : 17 명
  • 전체 : 480241 명
  • Mypi Ver. 0.3.1 β
[마꾸] 19. 댓글 랜덤 이미지 소스 (44) 2015/08/09 PM 04:22

 

 

 

* 뉴리웹 *

회원 아이디가 아닌 회원 번호를 사용되게 되면서

숫자로만 댓글 이미지를 설정해주면 되게 변했습니다.

 

더 많은 랜덤 이미지를 등록하시고 싶으시다면 

회원 번호의 끝자리 두자리를 입력하셔서 (00 ~ 99)

100개의 이미지를 등록하시면 됩니다.

 

 

 

* 설명 *
댓글 랜덤이미지를 수정하기 쉽도록 소스를 작성해 보았습니다.
소스 설명을 보시고 수정하고 싶은 값들을 직접 수정해주시면 됩니다.

* 주의 *
소스를 사용하기 전에는 반드시 댓글 이미지 설정과 댓댓글 이미지 설정에 보이는
p-osition의 p와 o사이에 -를 지우고 사용하셔야 합니다.

* 추가 내용 *
이전 게시물을 참고하시면서 꾸미시면 좋을것 같습니다. 








* 소스 *



/* 댓글창 꾸미기 설정 */
.readcomment{ min-height: 35px; } /* 댓글 내용 최소 높이 */
.readcomment{ border-radius: 10px; } /* 모서리 둥글게 */
.readcomment{ background-color:#ECF1EF; }/* 댓글 내용 배경색 */
.readcomment{ margin-top: 10px; margin-bottom: 20px; margin-left: 75px; margin-right: 20px; }/* 댓글 내용 외부 간격 조절 */
.readcomment{ padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } /* 댓글 내용 내부 간격 조절 */
.mypiZmenu{padding-left: 7px;} /* 댓글 닉네임 부분 간격 조절 */

/* 댓글 이미지 설정 */
#mypiRead .mypiReply .mypiZmenu .cm01 a img{ top: 50px; left: 10px; } /* 이미지 위치 설정 */
#mypiRead .mypiReply .mypiZmenu .cm01 a img{ padding-top:50px; padding-right: 50px; }/* 이미지 크기 설정 */
#mypiRead .mypiReply .mypiZmenu .cm01 a img{ width: 0; height: 0; p-osition: absolute; } /* 기본 설정, p와 o 사이에 - 제거 */
#mypiRead .mypiReply .mypiZmenu .cm01 a img{ border-radius: 5px; }/* 모서리 둥글게 */



/* 댓댓글창 꾸미기 설정 */
.readcomment2{ min-height: 35px; } /* 댓댓글 내용 최소 높이 */
.readcomment2{ border-radius: 10px; } /* 모서리 둥글게 */
.readcomment2{ background-color:#FDF2EE; }/* 댓댓글 내용 배경색 */
.readcomment2{ margin-top: 10px; margin-bottom: 20px; margin-left: 105px; margin-right: 20px; }/* 댓댓글 내용 외부 간격 조절 */
.readcomment2{ padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } /* 댓댓글 내용 내부 간격 조절 */
.mypiZmenu2{padding-left: 20px;}/* 댓댓글 닉네임 부분 간격 조절 */

/* 댓댓글 이미지 설정 */
#mypiRead .mypiReply .mypiZmenu2 .cm01 a img{ top: 50px; left: 40px; } /* 이미지 위치 설정 */
#mypiRead .mypiReply .mypiZmenu2 .cm01 a img{ padding-top:50px; padding-right: 50px; }/* 이미지 크기 설정 */
#mypiRead .mypiReply .mypiZmenu2 .cm01 a img{ width: 0; height: 0; p-osition: absolute; } /* 기본 설정, p와 o 사이에 - 제거 */
#mypiRead .mypiReply .mypiZmenu2 .cm01 a img{ border-radius: 5px; }/* 모서리 둥글게 */



/* 테두리 기본 설정 */
.mypiZmenu{ border-top: 1px solid #ccc; }/* 댓글 상단 테두리 */
.mypiZmenu2{ border-top: 1px dashed #ddd; }/* 댓댓글 상단 테두리 */

/* 추가 배경색 */
#mypiRead .mypiReply{ background-color:#ffffff; }/* 댓글 전체 배경색*/
.mypiZmenu{ background-color:#ffffff; }/* 댓글 상단색 */
.mypiZmenu2{ background-color:#ffffff; }/* 댓댓글 상단색 */
.mypiComm{ background: #f6f6f6; }/* 댓글 작성하는 부분 외부색 */





/* 댓글 랜덤 이미지 링크 */
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="1"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="2"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="3"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="4"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="5"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="6"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="7"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="8"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="9"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu .cm01 a[href$="0"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}




/* 댓댓글 랜덤 이미지 링크 */
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="1"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="2"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="3"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="4"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="5"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="6"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="7"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="8"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="9"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}
#mypiRead .mypiReply .mypiZmenu2 .cm01 a[href$="0"] img{background-image : url(" 이미지 링크 주소 " ); background-size: cover ;}




신고

 

여보밥줘♥    친구신청

이미지 링크는 일일히 전부 넣어줘야 되는건가여?

스타오션3    친구신청

네, 이미지 링크는 전부 넣어주셔야 합니다.

여보밥줘♥    친구신청

음...

그럼 한가지만 더 질문드릴게여

한글로 된 닉같은 경우도 적용되나여?

스타오션3    친구신청

이미지 적용은 마이피 주소 뒤에 보이는 ID에 의해서 적용되는거라
한글 닉네임과는 상관 없을것 같아요.

여보밥줘♥    친구신청

감사합니다

일단 스크랩

스타오션3    친구신청

시간 날때 재미로 한번 해보세요.

Fluffy♥    친구신청

얼른 꾸미고 싶은데 더우니 게을러지네요. ㅎㅎㅎㅎ

스타오션3    친구신청

더위가 가시면 천천히 꾸미셔도 될것 같아요.
이미지를 하나씩 수정해서 입력하는것도 힘들것 같고요.

keep_Going    친구신청

테스트!

스타오션3    친구신청

테스트 감사합니다!

주윤발 형님    친구신청

스크랩해두고 나중에 공부좀 해볼게요. 감사합니다

스타오션3    친구신청

주윤발 형님님 댓글 감사합니다.

산양선생    친구신청

이거보고 신기해서 새벽까지 만졌습니다. 소스줍소스줍

스타오션3    친구신청

사용하는데 불편함이 있거나 잘 이해가 안가는 부분은 말씀해주세요.
바로 수정하도록 하겠습니다.

K.D.Y    친구신청

테스트!

K.D.Y    친구신청

덧 덧

스타오션3    친구신청

테스트 감사합니다!

스타오션3    친구신청

친구신청도 감사합니다!

Renoir.    친구신청

저..저도 테스트..ㅎㅎ

스타오션3    친구신청

테스트 감사합니다 ㅋㅋㅋ

Jr. 킴    친구신청

오 멋집니다 조만간 저도 이렇게 꾸며봐야겠네요 ㅎㅎ

스타오션3    친구신청

Jr. 킴님 감사합니다. 마이피 이쁘게 꾸미세요.

그런데 아이유 진짜 이쁘네요 ㅋㅋㅋㅋ

사냥꿈    친구신청

좋은 글 잘 보고 갑니다!

스타오션3    친구신청

사냥꿈님 감사합니다.

사냥꿈    친구신청

이미지에 제 루리웹 아바타가 나오는데 어떻게 하는거죠?

스타오션3    친구신청

재미로 한분 한분 마다 본인의 아이디에 아바타 이미지를 넣어주고 있어요.
수작업이에요 ㅋㅋㅋㅋ

사냥꿈    친구신청

아ㅋㅋ 그랬군요 전부 다 아바타로 되어있길래 깜짝 놀랐어요 ㅎㅎ

스타오션3    친구신청

ㅋㅋㅋㅋㅋㅋㅋ
수작업이지만, 다른 분들의 아바타를 구경할 수 있어서 좋은것 같아요.

사냥꿈    친구신청

저도 댓글 이미지 관련해서 하나 글 올리려는데 본문좀 인용해도 될까요?

스타오션3    친구신청

네, 인용하셔도 괜찮습니다.

사냥꿈    친구신청

감사합니다! 어쩌다보니 댓글이 엄청 길어졌네요 ㅎ;;

스타오션3    친구신청

채팅하는 기분이 나서 저는 좋아요 ㅋㅋㅋㅋㅋ

잉여엠페러    친구신청

음음음?

스타오션3    친구신청

네?

고 우리    친구신청

어렵다...봐도 모르겠다..

스타오션3    친구신청

말은 그렇게 하셨지만, 이쁘게 잘 꾸미셨는데요?

리아니야    친구신청

너무 친절하게 설명해주셔서 한참동안 해매던걸 드디어 해결해냈습니다. 정말로 좋은 정보 감사드립니다 :)

스타오션3    친구신청

도움되었다니 다행이에요. 마이피 이쁘게 꾸미세요!

가이린    친구신청

오! 이거 보고 한번 해보겠습니다 ^ㅁ^ 감사합니다

스타오션3    친구신청

가이린님 댓글 남겨주셔서 감사합니다!

공포의 빨간내복    친구신청

저도 이제 마이피 시작한지 얼마안됐는데 좋은 정보 글감사합니다^^ 스크랩했다가 천천히해봐야겠네요.

KOS MOS    친구신청

빨간내복님 감사합니다 :>

루리웹수호    친구신청

좋은 자료 너무 감사합니다^_^

스타오션3    친구신청

수호님 댓글 감사합니다 ^ㅡ^
X