[마꾸] 19. 댓글 랜덤 이미지 소스

* 뉴리웹 *

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

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

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

회원 번호의 끝자리 두자리를 입력하셔서 (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]

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