지금 현재 #2 스킨도 옵션을 이용해 이미지를 변경 할 수 있도록 수정 되었네요! 아래내용은 기록으로 남겨 놓겠습니다.
티스토리 사용자 중에서 #2스킨을 사용하시는 분들이 많이 있습니다. 같은 스킨이지만 조금이라도 개성 있게 보이기 위해 배경 이미지를 변경해 자기만의 스타일로 꾸며 봅시다.
코드 수정 없이 이미지만 교체 하기
준비사항 : 배경으로 사용할 이미지(이미지 이름은 header_default.jpg)
이미지 크기 : 원본 배경 이미지 크기는 가로 3000px 세로 2000px으로 되어 있지만 가로 1920 PX에 가로 1080 PX 이상이면 됩니다.
파일명 : 배경으로 사용할 이미지의 파일명을 header_default.jpg로 변경합니다. 만약 준비된 이미지 확장자가 jpg 파일이 아닌 png이라면 알씨나 이미지 편집 도구를 이용해 확장자를 jpg로 변경합니다.
이미지 변환 : https://wonderbout.tistory.com/30
준비가 되었다면 블로그 관리자 페이지로 이동한 후 아래 그림의 순서대로 따라 합니다.
- 스킨편집
- HTML편집
- 파일업로드
- 현재 배경이미지 선택
- 삭제
- 추가(미리 준비한 이미지를 업로드 합니다.)
- 저장
중요 : 4번에서 현재 배경 이미지가 images/header_default.jpg로 되어 있는데 어떤 분은 images/header_default01 되어 있는 분도 있나 봅니다. 이럴 경우 적용할 이미지 명을 header_default01 해야 합니다.
여기까지는 코드 수정 없이 배경 이미지 변경 방법이었습니다.
이미지명을 다르게 사용 하고 싶은경우(코드 수정)
원 이미지명 header_default.jpg가 아닌 다른 이름으로 사용 시 예를 들어 header_bg.png로 하고 싶은 경우에는 CSS 편집 창에서 스타일 코드를 변경해야 합니다.
우선 적용할 이미지를 파일 업로드에서 추가를 통해 업로드해 놓습니다.
그리고, 상단 메뉴 중 CSS를 선택 합니다.
편집창 왼쪽에 보면 줄 번호가 있습니다. 60번째 줄을 보면 배경 이미지에 관한 스타일 코드가 있습니다. 찾기 어려운 경우 단축키 Ctrl + F 찾을 단어 .wrap_sub 입니다.
header_default.jpg로된 부분을 변경할 이미지 이름으로 수정해 주면 됩니다.
예) header_bg.png
1 | .wrap_sub{background-image:/*@background-image*/url(images/header_bg.png)/*@*/;} | cs |
참고로 배경 이미지의 경우 파일 크기가 크기 때문에 로딩 시간이 길어집니다. PC 사양이나 인터넷 속도에 따라 로딩 시간이 다르기는 하지만 (늘 접속하는 자기 자신은 잘 못 느낌니다) 내 블로그에 처음 방문하시는 분은 이미지가 뜨는데 약간의 시간이 걸립니다. 단축키 Ctrl + F5로 새로고침해보면 차이를 알 수 있습니다.
로딩 시간을 조금이라도 줄이려면 이미지 파일의 용량을 줄여야 합니다. 포토샵이나 이미지 편집 도구를 이용해 용량을 최대한 줄일 수 있으나 편집 도구가 없으면 온라인 이미지 도구 imgpresso을 이용하시면 됩니다.
imgpresso 사용 방법 : https://wonderbout.tistory.com/18
