티스토리 모바일웹 스킨 CSS 적용

티스토리 블로그 운영 시 참고자료로 올려봅니다.

 

자기만의 블로그를 만들기 위해서는 CSS 가 필수인데요.

제가 쓰는 스킨만 그런건지, TISTORY 관리자 페이지에서 HTML/CSS 편집 메뉴로 들어가서 CSS를 수정하여도 모바일웹에는 반영이 되질 않았습니다.

 

태그별 스타일을 적용하고 싶기도 하고, 기본적으로 모바일웹에서는 폰트 크기라도 변경하고 싶은데 아예 안되더라고요.

 

해결을 하긴 했는데, 정보 공유 차원에서 포스팅 합니다.

운영 스타일마다 다르겠지만, 저는 모바일은 모바일대로 웹은 웹대로 최적화된 화면을 보여주고 싶더라고요.

 

매번 모든 글마다 CSS를 만들 수는 없으니, CSS 파일을 하나 만들어서 링크로 불러오는 형태로 작업하는 방법입니다.

 

외부 CSS 파일 불러오기

Link 태그로 간단히 불러올 수 있습니다.

href 값으로 외부에 있는 css 파일 주소를 적어주면 됩니다.

글 작성 시 html 모드에서 추가해 주면 해당 파일에 있는 CSS가 모바일웹에도 적용됩니다.

<link rel='stylesheet' type='text/css' href='http://xxx.xxx.xxx.xxx/tistory_mobileweb.css'>

 

TISTORY 서버에 CSS 등록하기

저는 수정이 쉽게 별도 서버에 CSS를 만들어서 링크했는데, TISTORY 자체에도 CSS파일을 업로드하여 링크할 수 있습니다.

티스토리 관리자 화면에서 HTML/CSS편집을 누른 후 '파일업로드' 탭으로 이동합니다.

 

이미지들이 들어있는 폴더인데 CSS파일도 올릴 수 있습니다. 아래 '추가' 버튼을 클릭합니다.

 

CSS 파일을 올리면 위와같이 파일이 올라간걸 알 수 있습니다. 경로명이 images 폴더로 되어 있지만 단순 폴더명이므로 신경 안써도 됩니다.

 

업로드한 파일을 link로 연결하기 위해서는 경로를 알아야 하는데, 경로는 업로드한 파일에 마우스를 놓고 마우스 오른쪽 버튼을 눌러서 링크 주소를 복사하면 됩니다.

제 경우는 http://cfs.tistory.com/custom/blog/xxx/xxxxxx/skin/images/tistory_sehoyo.css?=000000 로 나오네요.

 

이렇게 올리고 나면 최종적으로 link 태그는 아래와 같습니다.

<link rel='stylesheet' type='text/css' href='http://cfs.tistory.com/custom/blog/xxx/xxxxxx/skin/images/tistory_sehoyo.css?=000000'>

 

티스토리에 올린 CSS파일은 수정하기가 번거롭긴 합니다만, 이렇게 올려주면 모바일웹에 맞는 CSS를 적용할 수 있습니다.