티스토리 Flatinum 스킨 상단 이미지 제거하기

안녕하세요 버블입니다.

이번 포스팅에서는 Flatinum 스킨의 상단 이미지를 제거하는 방법에 대해서 알아보겠습니다.

지난 포스팅에서는 스킨 상단 로고를 제거하고 상단 이미지를 변경하는 방법에 대해서 알아보았고

제 입맛에 맞게끔 스킨을 조금씩 고쳐나아갈 예정입니다.

플래티넘 스킨 상단 로고 변경하기

플래티넘 스킨 상단 이미지 변경하기

Flatinum 스킨의 특징은 스킨을 적용시키면

블로그 홈 최상단에 일정 시간으로 변동되는 이미지 3장이 걸려있는 것입니다.

물론 이 이미지를 그대로 가져가도 좋지만 사람의 취향에 따라

이미지가 맘에 들지 않아서 이미지를 제거하고 싶은 경우도 있을 것입니다.

그렇다면 이미지를 제거하는 방법에 대해서 알아보겠습니다.

아래의 이미지는 플래티넘 스킨의 상단 이미지 부분입니다.

물론 이 이미지를 완전히 삭제하는 방법도 있기는 하지만 그런 경우에는 블로그의 내용이

너무 상단으로 치우쳐버리기 때문에 이미지를 완전히 없애기 보다는

상단 이미지 두장을 삭제하고 남은 1장의 이미지를 적당한 규격의 하얀색의 배경 이미지로 대체하여

여백을 주는 방식을 사용해 보겠습니다.

상단이미지 2장을 제거하고 1장을 하얀색 바탕으로 한다면

우선 상단 이미지 양쪽의 화살표와 아래에 위치해 있는 3개의 동그라미가 필요하지 않기 때문에

먼저 불필요한 소스부터 삭제해 보겠습니다.

티스토리 관리자 모듈 꾸미기 탭의 스킨편집으로 이동해 보겠습니다.

스킨편집으로 오셨다면 html편집을 클릭하시면 됩니다.

HTML편집으로 이동하셨다면 HTML탭을 클릭하셔서 삭제해야 할 3개의 동그라미에 대한 소스를 찾으셔야 합니다.

Ctrl + F를 누르신 뒤 class="carousel-indicators 를 입력하시면 쉽게 찾으실 수 있습니다.

class="carousel-indicators를 입력하셨다면 아래의 이미지와 같은 화면을 보실 수 있으며

아래 이미지에서 블록이 잡혀있는 부분을 지워주시면 됩니다.

소스를 지우셨다면 새로고침을 클릭하여 동그라미 3개가 제대로 지워졌나 확인해 주시면 됩니다.

깔끔하게 지워진 모습을 확인하실 수 있습니다.

동그라미를 지웠으니 양쪽에 보이는 화살표들을 제거해 보겠습니다.

방법은 동일합니다.

티스토리 관리자 모듈의 꾸미기탭에서 스킨편집으로 이동하신 뒤 HTML편집을 클릭해주시면 됩니다.

윗 방법과 동일하기 때문에 이미지는 생략하도록 하겠습니다.

HTML편집으로 이동하셨다면 HTML탭을 클릭하셔서 삭제해야 할 화살표에 대한 소스를 찾으셔야 합니다.

Ctrl + F를 누르신 뒤 a class="left carousel 를 입력하시면 쉽게 찾으실 수 있습니다.

a class="left carousel를 입력하셨다면 아래의 이미지와 같은 화면을 보실 수 있으며

아래 이미지에서 블록이 잡혀있는 부분을 지워주시면 됩니다.

소스를 지우셨다면 새로고침을 클릭하여 화살표가 제대로 지워졌나 확인해 주시면 됩니다.

화살표와 작은 동그라미 3개가 깔끔하게 지워진 모습을 확인하실 수 있습니다.

이제 기존의 상단이미지 3장 중 2장을 제거하고 1장의 하얀바탕 이미지를 삽입해 보겠습니다.

우선 일정 규격의 하얀색 바탕을 제작하셔야 합니다.

플래티넘 스킨 상단 이미지의 원본 규격은 1920x600이고 이 규격 그대로 하얀색 바탕을 제작해버리면

기존과 같이 윗부분에 너무 큰 여백이 생겨버리게 됩니다.

그렇기 때문에 저는 1920x150의 규격으로 하얀색 바탕을 제작해 보겠습니다.

제작은 포토샵을 이용했습니다.

레이어를 추가하신 뒤 규격을 아래와 같이 입력해 주시고 배경은 하얀색으로 설정해 주시면 됩니다.

그냥 하얀 배경으로만 제작하셔도 좋지만 저는 포인트를 주기 위해서

좌측 상단에 Bubble Test라는 문구를 집어 넣었습니다.

상단 이미지 제작을 완료하셨다면 저장해 주시면 됩니다.

이미지의 이름은 이전과 동일하게 영어로 입력해 주시고 파일 형식은 PNG로 저장해 주시면 됩니다.

상단 이미지를 저장하셨다면 블로그의 관리자모듈 꾸미기탭의 스킨편집, Html편집으로 이동하시면 됩니다.

과정은 위와 동일하기 때문에 역시 생략하도록 하겠습니다.

Html편집으로 이동해 주신 뒤 파일업로드탭을 클릭하시고

하단의 추가를 눌러 제작한 상단 이미지를 추가해 주시면 됩니다.

저는 임의로 Bubbletest_01 이라고 저장했습니다.

파일 추가를 완료하셨다면 위로 올라가 HTML탭을 클릭하신 뒤 상단이미지 소스를 찾아야 합니다.

HTML탭에서 Ctrl + F를 입력하신 뒤 상단이미지 이름을 입력하시면 쉽게 찾으실 수 있습니다.

지난 포스팅에서 상단이미지를 변경했을 때 저장했던 이름으로 검색하시면 됩니다.

저같은 경우는 Bubble_logo_01 ~ 03으로 저장을 했기 때문에 Bubble_logo로 검색했습니다.

만약 이미지 변경을 하지 않으셨다면 Slider_01로 검색하시면 됩니다.

아래 이미지는 상단이미지 관련 소스입니다.

1,2,3부분으로 나누어 져 있으며 각각 1,2,3번째 상단 이미지 사진의 소스입니다.

저희는 한장의 이미지만을 사용할 것이기 때문에 과감하게 2,3번째 상단이미지에 대한 소스를 삭제하도록 하겠습니다.

아래 이미지에서 빨간색 사각현 안 선택부분을 지워주시면 됩니다.

2,3번째 상단 이미지 소스를 삭제하셨다면 남아있는 1번 상단 이미지의 소스 중

파일 이름 부분을 방금 새롭게 제작한 하얀바탕의 이름으로 변경해 주시면 됩니다.

저는 Bubbletest_01로 저장했기 때문에 기존의 Bubble_logo_01 에서 Bubbletest_01로 변경을 해 주었습니다.

변경을 완료하셨다면 새로고침을 클릭해서 상단 이미지가 제대로 변경되었나 확인해 주신 뒤

오류가 없다면 우측 상단의 적용을 클릭하셔서 저장해 주시면 됩니다.

만약 중간에 소스를 잘못 건드리시지 않았다면 저와 같이 변경되는 이미지 3장 중 2장이 사라지고

새로 제작한 하얀색 바탕의 이미지가 들어가 있을 것입니다.

아래는 변경이 완료된 티스토리 블로그 홈입니다.

일정 시간마다 변경되는 3장의 이미지가 깔끔한 하얀색 배경에 블로그 로고가 박혀있는 이미지로 변경되었으며

좌우 화살표와 이미지 아래부분의 작은 동그라미 3개도 제거되었습니다.

그리고 이전 이미지 규격보다 작아졌기 때문에 블로그의 내용이 위로 올라와 있는 모습입니다.

이과정까지 완료하셨다면 상단 이미지 제거가 완료되었습니다.

초보분들의 경우에는 제 포스팅을 보시며 따라하시다 보면 노하우가 생겨 나중에는

자신의 입맛대로 스킨을 변경하실 수 있습니다.

블로그를 처음 접하시는 분들도 제 글을 보고 쉽게 따라하실 수 있도록

알아보기 쉽게 포스팅을 진행하도록 노력하겠습니다.