티스토리에 마크쿼리 spidersweb-4.0.0을 설치하고 나서 블로그의 첫화면을 보니 마크쿼리 이미지 2개가 번갈아가면서 블로그의 대문을 장식하고 있죠.
티스토리에 접속했을때 가장 먼저 눈에 들어오는 부분이기때문에 아예 보이지 않게 하거나 이미지를 나의 티스토리에 맞도록 변경해야겠다는 생각이 가장 먼저 들어서 이미지를 변경해보았습니다.
티스토리 반응형 스킨 마크쿼리 상단 이미지 변경하기
이미지를 변경하기 전에 먼저 해야할 일은 마크쿼리 이미지를 대신할 나만의 이미지를 만드는 것이겠죠. 저는 포토샵으로 간단하게 블로그 이름과 블로그에 앞으로 올릴 내용을 간단히 적은 png 파일로 만들었습니다.JPG파일과 달리 PNG 파일은 배경이 투명한 파일로 블로그 제목 등을 만들때 유용하게 사용되죠.
마크쿼리 spidersweb-v4.0.0 상단 이미지 변경 전(前)과 변경 후(後) 비교
티스토리에 반응형 스킨 마크쿼리 spidersweb-v4.0.0을 설치하고 나서 블로그 홈 화면에 떡하니 자리잡고 있는 마크쿼리 이미지를 톡톡 블로그에 맞는 이미지로 바꾸었는데 변경 前과 변경 後를 비교해보니 확실히 이제야 내 블로그라는 생각이 들지 않나요.
마크쿼리 spidersweb-v4.0.0 상단 이미지 변경하는 방법
1. 상단 이미지로 PNG 파일 만들기
저는 아래와 같이 가로 400px 세로 60px 크기로 포토샵에서 블로그 제목과 함께 블로그 내용을 간단하게 적은 파일을 만들었습니다.
2. PNG 파일 티스토리에 올리고 파일 주소 복사
png파일을 만들었다면 이 파일을 내 티스토리에 올려야하는데 올리는 방법은 다음과 같은 순서로 하시면 됩니다.
- 티스토리 관리화면 > 꾸미기> HTML/CSS > 파일올리기 : 추가버턴 클릭
- 올린 파일 클릭하면 옆에 미리보기 이미지 나옴
- 미리보기 이미지를 오른쪽 마우스로 클릭하여 나타나는 팝업창에서 속성을 클릭
- 속성에 아래와 같이 음영으로 된 http://~~~~~.png까지 복사
3. 상단 이미지 HTML 소스 일부 삭제
관리화면의 HTML/CSS 편집화면에서 키보드 ctrl + F (찾기)를 누른 후 cover를 검새하여 아래와 같은 태그를 찾은 후 불필요한 빨간 네모 박스와 같이 삭제합니다.
4. 상단이미지 파일 주소 변경
위에서 상단 이미지 주소를 복사하였는데 복사한 주소를 아래와 같이 올린 파일 주소로 수정해줍니다. 아래 빨간 부분을 변경하면 되겠죠.
<div class="item active"><a href="#"><img class="img-responsive" src="./images/cover.png" alt="cover-black"></a></div><!-- first image -->
5. 상단 이미지 필요없다면...
만약 상단 이미지가 불필요하다면 <!---Cover======--> 부분을 전부 삭제하면 이미지가 나타나지 않습니다.
지금까지 티스토리 반응형 스킨 마크쿼리 spidersweb-v4.0.0을 설치하고 상단 이미지를 바꾸는 방법에 대해서 알아보았는데 조금씩 내가 원하는 블로그로 모습을 바꾸어 가는 것을 보니 뿌듯하기도 하고 이제 해야할 일은 열심히 포스팅을 해야겠죠.
