티스토리 모바일 설정 시 HTML편집 CSS 스킨 수정 방법

오랜만에 티스토리 스킨 수정관련 포스팅입니다.

 

제 블로그는 반응형 스킨을 사용하고 있는데요 최근까지만해도 모바일 화면의 경우 pc에서 설정한 반응형 스킨이 아닌 '티스토리 모바일웹 자동연결'을 사용하고 있었습니다. 이럴 경우 단점이 있다면 pc의 스킨 디자인과 모바일 디자인이 전혀 다르게 적용된다는 점입니다.

 

장점이 있다면? 나름 모바일웹 화면이 깔끔한 부분도 있다는 점인데요, 블로그를 나만의 스타일로 꾸미고 싶은 분들이라면 이 '모바일웹 자동연결'을 사용하지 않아야 할 것입니다. 

 

저는 특별히 상관이 없어서 그냥 모바일 연결을 사용하고 있었는데요 자동연결 스킨이 조금 심심하다는 생각이 들어서 최근에 그냥 이 모바일웹 자동연결을 사용하지 않습니다로 설정을 변경했답니다.

 

티스토리 모바일웹 자동연결 설정 시 스킨 수정

자 그런데 오늘은 이 모바일웹 자동연결을 사용하고 있을 경우에 화면을 수정하는 방법에 대해서 알려드리려고 합니다.

 

굳이 그럴필요가 있는가? 라고 생각하실 수도 있는데요 제가 최근까지 모바일웹 화면으로 사용하다보니 아주 작은 부분을 수정해보고 싶은 생각이 들더군요 그러나 모바일웹 css나 html은 따로 수정할 수 있는 소스편집 화면이 존재하지 않습니다. 

 

기본적으로 설정에서 'HTML편집'화면에 들어가게 되면 style.css 라는 파일과 메인과 서브페이지 본문에 대한 HTML파일만이 존재합니다. 이는 pc에서 선택한 스킨을 수정할 수 있는 소스들인데요 모바일웹 자동연결 화면에 대한 소스는 직접 수정할 수가 없는 것입니다.

 

그럼 바로 방법을 설명드리겠습니다. 

 

먼저 제가 수정하고 싶었던 부분은 타이틀 스타일 부분이었는데요 pc에서 수정한 타이틀이 모바일웹에서는 전혀 다른 스타일로 나오기 때문이었습니다.

 

아래와 같이 '유아인 주요 수상내역' 타이틀 부분의 디자인이 다릅니다. 반응형 스킨이기 때문에 모바일 설정을 하지 않으면 모바일에서도 똑같이 첫번째 이미지와 같은 디자인으로 나올텐데요

pc스킨 타이틀

모바일웹 자동연결 설정을 해두었기 때문에 아래와 같이 쌍따옴표가 들어가있는 모바일웹 기본 스타일로 나오고 있는 상황입니다.

모바일 스킨 타이틀

다른 부분은 그냥 모바일웹 화면으로 나와도 상관은 없는데 타이틀 부분이 조금 신경쓰여서 어떻게 고칠 수 있나 생각을 하다가 꼼수를 발견해서 수정해보았는데요 수정이 가능했습니다.

 

수정 순서는 아래와 같습니다.

1. 수정할 해당 요소 class를 찾는다.
2. 플러그인 > 구글애드센스 반응형 광고 코드 삽입 영역에 수정 소스를 삽입한다.

네 바로 구글 애드센스 코드를 삽입하는 부분에 수정할 소스를 넣는 것입니다. 꼼수라고 할 수 있습니다.

 

이 방법을 찾아낼 수 있었던 결정적인 힌트는 애드센스 광고 코드는 모바일 설정에 관계 없이 각 페이지에 들어간다는 점에서 얻을 수 있었는데요 그렇게 애드센스 광고를 삽입하는 영역에 소스를 넣어보니 모바일웹에서도 적용이 가능하다는 것을 확인할 수 있었습니다. 그럼 타이틀 수정 과정을 보여드리겠습니다.

 

먼저 수정할 해당 요소 class를 찾아보겠습니다.

타이틀 영역에 마우스를 갖다대 오른쪽버튼을 눌러 아래 검사(N)를 클릭합니다.

티스토리 모바일 html 소스 스킨 편집

타이틀 스타일은 모바일웹 화면과 pc스킨의 클래스(class)명이 동일하기 때문에 blockquote[data-ke-style='style2'] 이부분까지만 복사를해둡니다. 사실 이 클래스는 타이틀이 아닌 '인용1'스타일입니다.

 

모바일 화면에 요소검사를 해보면 해당 따옴표 스타일의 클래스 역시 동일한 것을 확인하실 수 있습니다.

 

티스토리 모바일 스킨 편집

아무튼 이 인용1 스타일 blockquote[data-ke-style='style2']를 가지고 모바일웹에 적용해보도록 하겠습니다. 그럼 플러그인에서 구글 애드센스 반응형 코드 삽입 부분으로 들어가줍니다.

 

티스토리 모바일 html 스킨 편집

티스토리 모바일 스킨 편집 수정

이제 pc에 적용한 스타일대로 입력을 해주시면 됩니다.

 

제가 작성한 스타일 코드는 모바일웹에 적용되어있는 padding을 제 스타일로 바꾸면서 따옴표 아이콘 배경까지 제거해주고 보더를 적용한 스타일입니다. 소스를 다루실줄 모르는 분이라면 어려운 부분이라 그냥 모바일웹 화면도 수정이 된다~ 정도로만 봐주시면 될 것 같습니다.

 

이 타이틀 부분 말고 태그나 간단한 색상이나 폰트 사이즈 등의 수정은 더욱 간단히 할 수 있는 부분입니다.

 

그럼 결과화면을 보시죠~!

티스토리 모바일 스킨 편집

마치 반응형 스킨을 적용한 듯 따옴표로 표시가되었던 부분이 pc스킨과 동일한 스타일로 적용되었습니다. 뭐 저는 결국 더욱 자유롭게 스킨을 수저하기 위해서 모바일웹 자동연결을 해제하고 블로그를 하고 있습니다...

 

오늘 포스팅은 극 소수의 분들에게 도움이 될 수 있을 것 같아 남겨보았습니다. 그렇지 않다면 그냥 모바일웹도 소스 수정이 가능하다 정도로 봐주시면 좋을 것 같습니다. css코드가 들어간다는 것은 html은 물론 script 코드까지 적용시킬 수 있다는 것입니다....

 

도움이 되셨다면 좋아요~!

 

그럼 다음에 다시만나요~~!!