티스토리 댓글 창에 사진 넣기 `-`)

 

 

[준비물]

 

1. 댓글 작성란에 넣을 이미지 파일.

(관리페이지 - 스킨 편집 - 파일 업로드에 살포시 올려줍니다.)

 

2. 현재 스킨 백업

(관리페이지 - 스킨 변경 - 스킨 보관)

 

준비 끝나셨으면 시작해봅니다.

 

 

*

 

 

스킨 편집 - HTML에서 [Ctrl + F]를 누르고 rp_input_comment를 검색합니다.

그러면 아래와 비슷하게 생긴 애들이 보일 겁니다.

 

<textarea name="" class="form-control" rows="3"></textarea>

 

여기 <textarea></textarea> 부분이 댓글을 작성하는 영역인데 

이곳에 background라는 속성을 추가해 주겠습니다.

 

 

 

<textarea name="" class="form-control" rows="3" style="background:url() no-repeat;"></textarea>

 

style="~~~" 부분이 추가된 게 보이죠?

여기서 background:url()의 괄호 사이에 이미지 주소를 넣어주세요.

 

예시로 하나 작성해보겠습니다.

 

 

 

<textarea name="" class="form-control" rows="3" style="background:url(https://tistory1.daumcdn.net/tistory/588980/skin/images/bg-none-kakao2.png) no-repeat;"></textarea>

 

 

 

* no-repeat는 이미지보다 영역이 더 넓을 때, 이미지를 반복 출력하지 말라고 넣은 속성입니다.

반복되는 패턴을 넣고자 한다면 no-repeat를 지워주시면 됩니다.

 

** 스킨 편집 - 파일 업로드에 올린 이미지는

url('./images/filename.jpg') 이렇게 지정해주셔도 출력 가능

 

 

 

위에 작성한 걸 실제로 적용시키면 이런 모습으로 출력이 됩니다.

 

(글 작성도 가능해요)

이곳에 글을 작성할 수 있어요

 

 

 

<textarea name="" class="form-control" rows="3" style="background: url('https://tistory1.daumcdn.net/tistory/588980/skin/images/bg-none-kakao2.png') no-repeat; margin: 0 auto; width: 400px; height: 400px;"></textarea>

 

사실 추가된 속성들이 3가지 있는데

아래와 같은 내용입니다.

 

margin: 0 auto;

(*화면 중앙 정렬을 위해 추가해준 속성)

 

width:400px; height:400px;

(*textarea 영역의 style을 가로 400px, 세로 400px로 지정)

 

 

*

 

 

[여기부터는 그냥 참고사항]

 

Style 부분의 경우에는 CSS로 작성을 하는 것을 추천합니다.

textarea 영역에 id 또는 class가 지정돼 있을 수 있는데 (본인이 임의로 지정하는 것도 가능)

 

위 예시에선 class="form-control" 이렇게 돼있죠

textarea의 class가 form-control이라는 뜻입니다.

 

쉽게 말해서 이름을 붙여 주는 거예요

이 textarea의 이름은 form-control인 셈.

 

아무튼 CSS에 작성하려면, 예를 들어...

 

(HTML상 class="form-control"인 경우 예시)

 

.form-control { 
background:url(사진주소) no-repeat;
width:60%;
height:250px;
margin:0 auto;
}

 

 

 

(id="form-control"인 경우 예시)

 

#form-control { 
background:url(사진주소) no-repeat;
width:60%;
height:250px;
margin:0 auto;
}

 

 

이렇게 해주시면 됩니다.

근데 id라는 속성이 나왔는데 이건 뭐냐구요?

id 역시 class처럼 html 요소에 이름을 붙여주는 것이라 보시면 됩니다.

 

다만, id를 붙여줄 경우에는 css에 '#'을 이용해서 표기를 하고

class를 붙여줄 경우에는 '.'을 이용해서 표기를 해줍니다.

 

#id { }

.class { }

 

 

 

궁금하신 부분은 댓글로 질문 주시면 말씀드리겠습니다.

 

 

 

어제 밤 늦게 갑자기 찾아 온 잉여신 덕분에 댓글 창에 사진 넣기 작업을 시도해봤어요.

이전에 봤던 *꼬마낙타 님의 포스팅도 있고 해서 수월하게 완성했는데, 혹시 댓글 창에 사진을 넣어보실 분은 이 글을 참고로 봐주셔도 될 것 같네요.

* 꼬마낙타 님 관련 포스팅 [바로가기]

※ 이 글을 보시기 전에 관리자 페이지에서 [ 스킨 -> 스킨 저장 ] 후에
아래 순서를 따라해주시기 바랍니다`-`)

어떤 오류가 생길지는 모르는 일이니까요.



1. 사진을 구해주세요.

저 같은 경우에는 적절한 사진을 구하지 못해서 직접 하나 만들어 봤어요.
이렇게 적당한 사진 하나를 구해주세요.

자, 사진을 구하셨다면..

2. 구하신 사진을 다른 블로그에 올리거나 하셔서 파일 링크를 구해주세요.

저 같은 경우에는 http://mazefiles.tistory.com 여기에
새로운 블로그를 설치하고 글을 써서 파일 링크를 얻어냈습니다.

새로 만든 블로그 (클릭하시면 크게 보입니다.)

글 쓰신 후에 마우스 우클릭으로 메뉴를 띄워서 링크를 아래와 같이 복사해주세요.

*관리자 - 스킨 편집 - 파일 업로드에 올리셔도 링크를 따올 수 있습니다.

3. 블로그 관리자 페이지(/admin) → HTML/CSS 편집


[ Ctrl + F ] 를 눌러서      ##_rp_input_comment_##    를 검색해주세요.


그러면 근처에 이런 문구가 보일 겁니다.

 

 

 

 

 

 

---

 <textarea style="background-image:url(___아까 복사했던 링크___);background-repeat:no-repeat; background-position:center" onClick="this.style.backgroundImage="_____여기는 선택.._____" name="" rows="9" cols="50"></textarea>

---

 

↑ 이걸 붙여넣어주세요. ↑






「 예시 작성 」

---

<textarea style=";background-repeat:no-repeat">(http://파일주소1);background-repeat:no-repeat; background-position:center" onClick="this.style.backgroundImage=http://파일주소2 name="" rows="9" cols="50"></textarea>

---

그런데 여기서 방법이 2가지로 나뉩니다.
먼저 첫째로는, 댓글 창을 클릭 했을 때, 사진을 그대로 둘 것이냐.
아니면 사진을 없어지게 할 것이냐 를 선택하셔야 합니다.

제가 첫번째로 링크를 넣으라고 했던 부분은 클릭 전 상태에서 보여 줄 사진이구요
두번째고 링크를 넣으라고 한 부분(여기는 선택)은 클릭 후에 보여 줄 사진입니다.

물론 클릭 전/후 다른 사진으로도 가능합니다. 사진만 있으시다면..

아무튼 링크를 채워넣고 완성하면..

 

 

이렇게 완성되었습니다 +_+

잘 모르겠다. 고 생각되는 부분은 댓글로 질문 주세요.


- 포스팅 끝 -