오늘은 티스토리 블로그 스킨편집 : 헤더 이미지 교체를 해봤습니다. 

저는 완전 초보이기 때문에~ 좀 아시는 분들은 뭘 이런걸 쓰나.. 하시겠지만 

저처럼 처음 시작하는 분들이 제가 기록한 것을 보고 도움을 받기를 바랍니다~


먼저 블로그 관리 홈 > 꾸미기 > 스킨편집 > 스킨목록에서 가장 핫하다는 #2번 반응형 스킨을 골랐습니다.



근데 저는 저 사이드 바 부분의 사진을 바꾸고 싶습니다. 

저는 HTML이니..CSS이니.. 이런거 모르고요~ 이거 사진 바꾸자고 배우고 싶지도 않고요~

그냥 사진만 바꾸면 안될까요?? 하시는 분들에게 이 글이 도움이 될 것 같네요~ ^^ 


Step 1.

왼쪽 사이드바 부분에 넣을 원하는 이미지를 고릅니다. 

https://pixabay.com/ 저는 이 사이트를 주로 이용하고요~ 곧 제 북마크도 한번 공유하도록 하겠습니다. 

마음에 든 사진을 고른 후, 내컴퓨터에 다운받아 주세요~ 



Step 2.

자 그럼 이제 꾸미기 > 스킨편집을 선택합니다.

그럼 새 창이 열리고.. 하.. 이것은 무엇인가? (저는 이미 사진을 변경한 상태기 때문에 헤더부분에 다른 이미지가 보이시죠?) 




HTML도 CSS도 모르는 사람한테는 

저 알록달록한 글씨가 머리만 빙빙돌게 만드네요ㅠㅠ 


빨리빨리~ 넘어갈께요!! 


오른쪽 상단에 파일업로드를 선택합니다. 

저기 원래의 해더 이미지가 보이네요~ 

하단의 추가 버튼을 누르고 아까 Step 1 에서 

다운받은 마음에 드는 이미지를 업로드 해 줍니다.


제가 변경하고 싶은 이미지의 파일명은,

[images/business-3240766_1280.jpg] 이것입니다.

images~.확장자 까지의 부분을 복사해주시고요~




Step 3.

이번엔 CSS 항목을 선택해주세요~ 잘 모르겠는 코드를 쭉쭉 내리면서 /* 헤더*/라고 쓰여진 문단을 찾아줍니다.

그리고 그 문단 안에서 아래 문장(?)을 찾아주세요~ (밑에 사진 참고하세요~)

{background-image:/*@background-image*/url(images/business-3240766_1280.jpg)/*@*/;}


저 코드 안에 빨간 밑줄친 부분이 우리가 교체할 부분이예요.

Step 2 에서 이미지 주소 복사해놓으신 것 있죠? 그 주소를 교체하는거예요.

저 괄호 ( ) 안에 빨간 images~.확장자 글씨 부분만 바꾸시는거예요~ 

괄호 하나, 점 하나라도 바꿔버리시면.. 절대 안됩니다~


자 이제 다 끝났어요~ 맨 오른쪽 상단에 저장 버튼을 클릭, 그리고 왼쪽 상단에 새로고침 버튼을 클릭! 

하면 교체되어 적용된 이미지가 보입니다! 다들 성공하셨나요? 

댓글로 성공하신 이미지, 본인 블로그 주소 서로서로 공유하고 응원해주면 좋을 것 같아요!! 


다 하고 나니 생각보다 매우 간단하죠? 이런 원리도 다른 스킨들도 헤더 이미지 부분을 변경하실 수 있을 것 같아요~ 

오늘은 여기까지! 

 

+ Recent posts