티스토리 스킨편집 : 헤더 이미지 교체하기
오늘은 티스토리 블로그 스킨편집 : 헤더 이미지 교체를 해봤습니다.
저는 완전 초보이기 때문에~ 좀 아시는 분들은 뭘 이런걸 쓰나.. 하시겠지만
저처럼 처음 시작하는 분들이 제가 기록한 것을 보고 도움을 받기를 바랍니다~
먼저 블로그 관리 홈 > 꾸미기 > 스킨편집 > 스킨목록에서 가장 핫하다는 #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~.확장자 글씨 부분만 바꾸시는거예요~
괄호 하나, 점 하나라도 바꿔버리시면.. 절대 안됩니다~
자 이제 다 끝났어요~ 맨 오른쪽 상단에 저장 버튼을 클릭, 그리고 왼쪽 상단에 새로고침 버튼을 클릭!
하면 교체되어 적용된 이미지가 보입니다! 다들 성공하셨나요?
댓글로 성공하신 이미지, 본인 블로그 주소 서로서로 공유하고 응원해주면 좋을 것 같아요!!
다 하고 나니 생각보다 매우 간단하죠? 이런 원리도 다른 스킨들도 헤더 이미지 부분을 변경하실 수 있을 것 같아요~
오늘은 여기까지!