티스토리 블로그는 기본적으로 반응형 스킨이 존재합니다. 반응형 스킨의 경우 모바일에서도 pc의 스킨과 동일한 스타일로 화면이 나오는데요 설정에서 좌측 메뉴 꾸미기 > 모바일 메뉴에 들어가서 모바일화면일 경우 '모바일웹 자동 연결'을 사용하거나 사용하지 않음 설정을 통해서 모바일에서도 반응형 스킨을 그대로 사용할지 아니면 기본 제공되는 공통된 모바일웹 하면을 사용할지 선택할 수 있습니다.
'티스토리 모바일웹 자동연결'을 사용하지 않을 경우에는 반응형 스킨의 일부를 수정해도 모바일에서 그대로 반영되어 똑같은 반응형 스킨으로 화면이 나오게 됩니다. 그러나 반응형 스킨을 사용하고도 모바일에서 모바일웹 자동연결을 사용하고 있는 경우에는 pc에서 수정했던 반응형 스킨의 모습이 당연히 나오지 않겠죠?
그런데 간혹 모바일웹 자동연결을 오래 사용하고 있다가 스킨을 교체하는 것이 부담스러운 경우가 있을 것입니다. 대부분 초보자 블로거들에게서 나타날 수 있는 극히 적은 상황일 것 같은데요 제가 겪어보게 되어서 이렇게 포스팅을 해보게 되었답니다.
바로 모바일웹으로 자동연결된 상태에서 css를 수정하는 것인데요 일반적으로 'HTML편집'화면에서 소스들을 수정하게 되는데요 모바일웹으로 자동연결된 화면의 소스들은 티스토리 소스편집에서 건드릴 수가 없습니다. 왜냐하면 자동으로 연결된 모바일웹 화면은 범용 화면으로 그냥 주는대로 사용해야 하는 화면이기 때문입니다. 이 화면은 별도의 스킨 변경이 불가능한 그냥 일방적으로 제공되는 화면이기 때문이죠... 그렇기 때문에 해당 소스가 개인 관리자에 제공되지도 수정이 가능하지도 않은 상황입니다.
반응형 코드 삽입하는 입력란을 통한 수정
하지만 틈새를 찾으면 적어도 css정도는 간단하게 원하는대로 수정할 수가 있습니다. 제가 찾아낸 방법은 바로.... 관리자페이지의 애드센스 반응형 코드를 삽입하는 영역입니다.
바로 간단하게 수정해보겠습니다.
먼저 관리자에서 플러그인 > 구글 애드센스(반응형) 플러그인을 선택해주세요
아직 애드센스 승인이 나지 않았기 때문에 광고 소스는 없이 그냥 수정할 css만 작성해보도록 하겠습니다. css코드는 아래 보이는 애드센스 광고 스크립트 코드를 삽입하는 입력란에 작성해 줄 것입니다. 그럼 간단하게 모바일 화면 하단에 태그 색깔을 변경해보도록 하겠습니다.
아래 보시면 태그들의 보더 컬러와 글씨 색깔이 주황색으로 되어있습니다. 그럼 바로 간단히 컬러 변경을 시도해보겠습니다. 먼저 해당 영역에 요소검사를 통해서 클래스(.class)를 확인해보겠습니다.
요소검사를 통해 해당 태그의 클래스가 .blogview_content .list_tag .link_tag 임을 확인했습니다. 해당 태그에는 height, padding, margin, border, color 등 다수의 속성들이 작성되어 있습니다. 여기서 저는 color와 border-color만 수정해보겠습니다.
작성한 css코드는 아래와 같습니다.
<style>
.blogview_content .list_tag .link_tag{color:#000; border-color:#000;}
</style>모두 검정색으로 변경했는데요 그럼 결과 화면을 보도록 하겠습니다. 모두 검정색으로 변경되었습니다. 애드센스 반응형 플러그인을 사용했지만 페이지 상단에 빈공간은 생기지 않습니다. 왜냐하면 아직 애드센스 승인받은 블로그가 아니기 때문입니다. 나중에 승인 받으면 광고는 광고대로 나오기 때문에 소스를 추가해도 아무런 문제는 없습니다.
그러나 애드센스 광고를 넣은 경우 추가한 소스와 광고 스크립트 코드가 섞이지 않게 잘 관리해주어야 한다는... 주의해야 합니다.
모바일웹 화면의 경우 블로그 주인이 직접 수정할 수 있는 html편집 화면이 없습니다. 지금 작업한 방법은 반응형 스킨이나 모바일 설정의 모바일웹 화면이나 동일하게 들어가는 구글애드센스 광고 코드 입력 영역을 통해서 css소스를 페이지 내부에 작성한 것이라고 할 수 있습니다.
그러니까 티스토리에서는 모바일웹의 화면 수정을 지원하지 않지만, 빈틈을 파고 들어간 것이라고 보시면 됩니다.
사실 반응형 스킨을 사용하고 모바일웹으로 자동연결을 사용하지 않음으로 할 경우 굳이 이런식으로 모바일을 수정할 일은 없습니다. 그러나 개인적으로는 모바일웹의 화면이 더 깔끔하다고 느끼는 부분도 있기 때문에 반응형 스킨을 사용하지 않고 모바일에서는 그냥 이러한 모바일웹 화면을 사용하시는 분도 있을 것이라 생각되기도 합니다.
지금은 간단하게 css만 수정해봤지만 사실상 애드센스 광고 삽입하는 영역을 통해서 css코드가 모바일 페이지에 삽입이 된 것으로 보아 HTML과 script도 추가 작성해 작업할 수있을 것으로 판단됩니다. 결국 반응형 스킨이 아니더라도 수정이 가능하다는 결론이 나오는 겁니다.
물론 이런 수정은 어느정도 소스를 다룰줄 아는 분들이 아니면 하기 어려울 것인데요 단순히 일부분만 조정해보고 싶으시다하시는 분들에게는 소수이겠지만... 나름 꿀팁이라고 생각이 되네요~!
앞으로 티스토리 블로그 스킨 수정하는 방법에 대해서 계속 올릴 예정이니 기대해주시기 바랍니다.
감사합니다~!