관리 메뉴

탈 프로젝트

티스토리 블로그 반응형 스킨 #2 적용 및 HTML/CSS 수정 후기 by 탈프로젝트 본문

'탈' Project - Blog Story

티스토리 블로그 반응형 스킨 #2 적용 및 HTML/CSS 수정 후기 by 탈프로젝트

Adam's Tal 2017. 12. 19. 23:41
반응형

'' Project

 

티스토리 블로그

반응형 스킨 #2 적용

 HTML/CSS 수정 후기

 

by 탈프로젝트

 

 

 

<2015. 12. 31. 티스토리가 선보인

두 번째 반응형 스킨 #2 - PC & 모바일 버전>

 

 

 

2017. 12. 15.

 

 

 

 햇수로 약 3년째 티스토리 블로그를 운영하며, 계속해서 '기본 스킨'만을 고집해왔던 것이 사실이다. 어쩌면, 익숙한 게 더 좋았거나, 새로운 게 무서웠을 수도 있다. 내게 '반응형 스킨'은 그랬다. Something new, 무언가 새로운 것이었기에 또 다시 적응할 필요가 있었다.

 

 

 

 

 

 

 솔직히 말하자면, 지금까지 공들여 만든 (기초적인 HTML/CSS 수정을 포함한 각종 위젯 등) 기본 스킨이 아까웠나 보다. 그럼에도 불구하고, '반응형 웹사이트'에 대한 관심은 꾸준히 키워왔는데, 결국 이렇게 사고(?!)를 치고만 것이다.

 

 

 

<남자 패션 블로그 '탈프로젝트'

블로그 관리 페이지 - 꾸미기 - 스킨 변경>

 

 

 

 '티스토리 블로그'의 반응형 웹사이트 구현을 위한 제일 첫 번째 관문이 바로 '반응형 스킨' 적용이다. 사용자의 PC 또는 모바일 환경에 따라 자유자재로 화면이 변환되는 이 스킨이야말로, 최신 트렌드(?!)라고나 할까. 물론, 난 이미 남들보다 몇 년은 뒤처졌지만 말이다.

 

 

 

 

 

 

 그러던 어느날, (정말이지, 갑작스럽지만) 궁금하더라. 과연 내 티스토리 블로그 또한 '반응형 스킨'을 적용하면 대체 어떤 모습일까? 그리하여, 티스토리(TISTORY)가 제공하는 (블로그 관리 - 꾸미기 - 스킨 변경) 스킨 목록에 반응형 스킨이라는 스킨은 모두 미리보기로 적용시켜 보았고, 그 중 딱 하나 마음에 드는 것을 찾을 수 있었다.

 

 

 

<티스토리 블로그 관리 - 꾸미기 - 스킨 변경

스킨 목록: 반응형 스킨 #2>

 

 

 

 지난 2015. 12. 31. 티스토리가 직접 선보인 '반응형 스킨 #2'이 그 주인공이며, 개인적인 느낌이지만, 깔끔하면서도 세련된 분위기가 해당 스킨의 가장 큰 장점이지 싶다. 막 화려하지는 않지만, 그렇다고 딱히 밋밋하지도 않은 매력적인 스킨이라는 생각이 들었다. 또 실제로 적용하고 나니, 미리보기로 봤을 때보다 더 예쁜 게 아닌가.  

 

 

 

<티스토리 블로그

반응형 스킨 #2 적용 후기

by 탈프로젝트>

 

 

 

 'PC'의 경우, 화면 비율(예를 들어, 15.6인치 노트북 기준, 150% 이하일 때와 그 이상일 때)에 따라 반응형 스킨이 그에 맞춰 변하는 모습이었는데, 150% 이하일 때는 배경 이미지 및 타이틀이 좌측으로, 150% 이상일 때는 상단으로 이동하더라. (해당 화면 비율은 인터넷 익스플로러, 크롬, 등 사용자의 웹 브라우저마다 조금씩 상이하니 이 점 참고하기 바란다.)

 

 

 

<남자 패션 블로그 '탈프로젝트'

티스토리 '반응형 스킨 #2' 적용한 모습

웹 브라우저(IE) 화면 비율 160%>

 

 

 

 2017년 12월 15일(금), 처음 '반응형 스킨(#2)'이라는 것을 블로그에 적용하며, 약 이틀(2일)간은 내 입맛에 맞춰 스킨을 '꾸미기'에 바빴다. 여기저기 다른 블로거들이 올려둔 'HTML/CSS' 수정 (변경) 방법 등을 참조하여 열심히 따라한 결과, 나름 봐줄 만한(?) 정도로 단장해보았다. (의외로, 티스토리 반응형 스킨 #2와 관련된 정보가 많지 않아 놀랐다며...)

 

 

 

 

 

 

<티스토리 블로그 반응형 스킨 #2 적용

웹 브라우저(IE) 화면 비율 150%>

 

 

 

  사실, 내가 엄청난 컴맹은 아니지만, 그렇다고 전문가도 아니기에 내 수준에서는 'IT 블로거'가 업로드한 정보자료를 그저 '복사/붙여넣기'하거나 조금은 '수정'하여 블로그에 적용하는 게 다이다. 이렇게 따라하는 것만으로도 스스로 대견스럽게 생각한다.

 

 

 

<반응형 스킨 #2 카테고리 및 사이드바

웹 브라우저(IE) 화면 비율 160%>

 

 

 

<반응형 스킨 #2 카테고리 및 사이드바

웹 브라우저(IE) 화면 비율 150%>

 

 

 

 위 '반응형 스킨 #2' 꾸미기에 있어서는 그 'HTML/CSS'를 수정하는데, 대략적으로 50여명 정도의 블로거를 찾아 그들의 노하우를 배웠던 것 같은데, 다시 한번 소중한 정보를 공유해준 블로거분들께 감사의 인사를 전한다. 그런 의미에서 나 역시 지금까지 수정한 부분에 대해서는 이번 포스팅에 그 기록을 남겨두고자 하며, 이 부분이 조금이나마 다른 블로거분들께 도움이 되기를 바라는 바이다.

 

 

 

<티스토리 블로그 관리 - 플러그인

반응형 웹스킨 이미지 최적화 PC & 멀티미디어>

 

 

 

 반응형 스킨으로 바꾼 이후, 내가 제일 먼저 새로 적용한 것은 '티스토리 블로그' 관리 페이지에 자리잡은 (블로그 관리 - 플러그인) '반응형 웹스킨 이미지 최적화' 플러그인이었다. 티스토리 반응형 스킨 #1, #2 등 반응형 웹스킨의 본문에 포함된 이미지 크기를 브라우저 판단에 따라 자동 조절되는 것이 해당 플러그인의 주된 내용이다.

 

 

 

 위 플러그인 '반응형 웹스킨 이미지 최적화'를 적용함으로써, 모바일 접속 시 데이터 소비를 줄여줘 '페이지 로딩 속도'가 개선되는 효과를 볼 수 있다. 반응형 스킨 사용자라면 굳이 마다할 필요가 없는 부분이지 싶다.

 

 

 

<티스토리 블로그 관리 - 꾸미기 - 모바일

모바일 꾸미기 설정:

티스토리 모바일웹 자동 연결을 사용하지 않습니다.>

 

 

 

 블로그에 '반응형 스킨'을 적용시키면, 더이상 티스토리가 제공하는 '모바일웹'을 사용할 필요가 없다. 그리하여 (블로그 관리 - 꾸미기 - 모바일) 이러한 티스토리 모바일웹 자동 연결을 '사용하지 않습니다.'로 바꾸어줌으로써 해당 반응형 스킨의 모바일 최적화를 이룰 수 있는 것이다.

 

 

 

<티스토리 블로그 반응형 스킨 #2

 PC버전 블로그명 (타이틀) 글씨 크기 수정>

 

 

 

 앞서 위에서 살펴본 '반응형 스킨 #2'의 블로그명 (타이틀) '탈 프로젝트'의 PC버전상 글씨 크기는 HTML을 통해 수정할 수 있다. .area_head .area_profile .link_postfont-size를 바꿔주면 되는데, 그 옆의 font-weight은 해당 글씨체(폰트)에 무게감(짙은 느낌)을 더해주는 것이니 참고하도록 하자.

 

 

 

<블로그 관리 - 꾸미기 - HTML/CSS 편집

파일 업로드: 배경 사진 추가>

 

 

 

<블로그 관리 - 꾸미기 - HTML/CSS 편집

CSS 수정 모습> 

 

 

 

 티스토리 '반응형 스킨 #2'의 기본 배경 이미지도 나쁘지 않았지만, 새로운 스킨으로 다시 시작하는 만큼 나만의 이미지로 배경을 채우고 싶었다. 그 절차와 방법은 의외로 간단했는데, 우선 (블로그 관리 - 꾸미기 - HTML/CSS 편집) HTML/CSS 옆에 위치한 '파일 업로드'로 들어가 본인이 바꾸고자 하는 이미지를 그곳에 추가해야한다.

 

 

 

 추가한 이미지는 그 파일명 그대로 복사해서 'CSS'에 위치한 .wrap_sub{background-image}를 찾아 url 괄호() 속에 붙여넣기만 하면 된다. 개인적으로 난 하나이미지만을 사용하였으나, 경우에 따라 총 3개의 이미지를 활용해 꾸밀 수도 있는 모습이니, 그 부분은 다른 블로거의 글을 참조하기 바란다.

 

 

 

<반응형 스킨 #2 HTML/CSS 수정

프로필 사진 아래 글목록, 방명록, 이메일 추가>

 

 

 

 현재 내 티스토리 블로그 '탈프로젝트'를 보면, 앞서 업로드한 배경 이미지와 함께 '프로필 사진'이 보일 것이다. 그 아래 추가한 글목록, 방명록, 이메일 또한 눈에 들어올 것인데, 이를 구현하기 위한 HTML 내 ('프로필사진' 아래) 들어갈 소스는 위 사진과 같다.

 

 

 

 해당 스크립트 소스의 '글목록' 속 talproject 대신 본인의 블로그 주소를, '이메일' 속 j1234dm 대신 본인의 (네이버) 아이디를 넣으면 된다. ('방명록'은 따로 수정 없이 사용해도 무방하다.)

 

 

 

 

 

 

 참고로, 위 HTML 소스를 보면, 기존 스킨에 존재했던 두 가지, 내가 지운 것들이 있다. 하나는 '프로필사진' 아래 있던 '필명: <span class="txt_profile">Adam's Tal</span>'이며, 또 하나는 프로필사진 에 있던 '흰색 줄: area_head .area_profile:before{display:block;width:38px;height:2px;margin:0 auto 23px;background-color:#fff;content:''}이다.

 

 

 

 개인적으로 그리 필요하지 않다 여겨 삭제한 부분이니, 본인의 판단에 따라 수정해도 좋고, 그대로 두어도 좋지 않을까 싶다. (여기저기 구경하다 보면, 위 두 소스를 살린채 블로그를 꾸민 모습도 많이 보이더라.)

 

 

 

<반응형 스킨 #2 HTML/CSS 편집

CSS 수정 - 글목록, 방명록, 이메일 색상 변경>

 

 

 

<CSS 수정 - 글목록, 방명록, 이메일

글씨 크기 변경>

 

 

 

 이렇게 글목록, 방명록, 이메일을 집어넣고 보니, 색상을 바꿔주고 싶다. 타이틀명 '탈 프로젝트'와 같은 하얀색(화이트 컬러)으로 말이다. 그건 CSS로 들어가 .area_head .area_profile .txt_profile바로 옆에 a{color:#fff}만 추가하면 된다.

 

 

 

 덧붙여, 해당 '글씨 크기'를 줄이거나 늘리기 위해서는 CSSbody, th, td, input, select, textarea, button 옆 중괄호 {} 안에 있는 font-size를 수정하여 편집할 수 있다.

 

 

 

<티스토리 블로그 반응형 스킨 #2 적용

'탈프로젝트' 모바일 버전>

 

 

 

 위 사진은 '반응형 스킨 #2'의 모바일 버전 '카테고리'이다. 앞서 집어넣은 글목록, 방명록, 이메일이 나란히 '타이틀명: 탈 프로젝트' 아래 중앙정렬로 자리잡은 모습이다. (해당 소스에 <center> ~ </center>를 넣어주었기에...)

 

 

 

 그것보다도 이번에는 타이틀명 '탈 프로젝트'의 글씨 크기를 키우는 방법과 하단부에 위치한 '방문자 수: 오늘 Today, 어제 Yesterday, 전체 Total' 삽입법에 대해 알아보도록 하자.

 

 

 

 

 

 

<티스토리 반응형 스킨 #2 HTML/CSS 편집

CSS 수정: 모바일 버전>

 

 

 

 티스토리 블로그 '반응형 스킨 #2'의 모바일 버전은 HTML상 하단부에 위치한 .navi_on에서 찾아보면 된다. .navi_on .area_head .area_profile .link_post 부분에서 중괄호 {} 안 font-size를 변경하면 위에서 보았던 모바일 버전 속 타이틀명 '탈 프로젝트'의 글씨 크기를 수정할 수 있다.

 

 

 

<티스토리 블로그 반응형 스킨 #2 카테고리 내

글(포스팅) 개수 및 new 표시 방법>

 

 

 

 하나 더, 티스토리 '반응형 스킨 #2' 카테고리 내 '글(포스팅)'의 개수new(n)를 표시하는 방법은 다음과 같다. CSS 편집에서 .tt_category li a .c_cnt.tt_category li a img {}을 찾아보면, 본래 애당초 중괄호 {} 안에 {display:none}이라 하여 글의 개수와 new 표시 모두 보이지 않게끔 설정된 모습인데, 여기서 display:none만 삭제해주면 된다.

 

 

 

<반응형 스킨 #2 HTML/CSS 편집

HTML 수정: 방문자 수(오늘 어제 전체) 추가

(1)>

 

 

 

<반응형 스킨 #2 HTML/CSS 편집

CSS 수정 모습 (2)>

 

 

 

<반응형 스킨 #2 모바일 버전

카테고리 내 방문자 수 표시 방법 1, 2, 3

(3)>

 

 

 

 그리고 티스토리 블로그 '반응형 스킨 #2' 모바일 버전 카테고리 화면 내 '방문자 수'를 표시하는 방법은 위 사진의 순서(1, 2, 3)대로만 따라하면 되는데, (1) 우선적으로 HTML에 들어가 첫 번째 사진과 같이 방문자 수 치환자를 따로 추가해주어야 한다. 그러고 나서, CSS(2) 두 번째 소스를 (아무데나) 추가해준 뒤, (3) 세 번째 소스를 위 @media 뒤 중괄호 {} 안 적당한 위치에 삽입해주면 된다.

 

 

 

 각각의 스크립트 소스를 도대체 어디에 넣어야할지 고민이라면, 위 사진 그대로(좌측 번호에 맞춰) 똑같이 추가해도 무방하니 참고하기 바란다.

 

 

 

<티스토리 반응형 스킨 #2

글목록 (카테고리) 날짜 수정: 년, 월, 일

글 작성 시간 삭제>

 

 

 

 글(포스팅)을 작성한 날짜수정하기 위해서는 (특히나, 글 작성 시간을 없애고, 그저 년 월 일로 나타내고자 한다면) 위와 같이 특정 자바 스크립트를 '반응형 스킨 #2' HTML에 적용시켜야 한다. Ctrl+F 기능을 통해 사진 속 위치의 2017. 12. 19. 23:41를 찾았다면, 그 부분을 <script type="text/javascript"> ~ </script> 로 바꿔주면 된다.

 

 

 

 

 

 

<티스토리 블로그 반응형 스킨 #2

댓글 및 방명록 - 프로필 사진 표시 방법

HTML 수정>

 

 

 

 티스토리 '반응형 스킨 #2'의 경우, 댓글 또는 방명록에 글을 남길 때 보면, 아이콘과 파비콘이 겹쳐 나와 지저분해 보이는데, 이를 수정하여 '프로필 사진'으로 표시하는 방법이 있으니... HTML에 들어가 위 사진과 같이 몇몇(댓글, 댓글의 댓글, 방명록, 방명록의 댓글) ico_skin thumb_profile 소스를 사용하지 않도록 만드는 것이다.

 

 

 

 참고로, HTML상에서 어떠한 소스 앞뒤로 <!- - -  (소스)  - - ->와 같은 형태로 명령어를 삽입하면 해당 소스는 그 기능을 잃게 되는데, 이렇게 총 4종류의 소스를 무력화시켰다면 다음 단계인 CSS 수정로 넘어갈 수 있다.

 

 

 

<티스토리 반응형 스킨 #2 방명록 및 댓글 작성 시

프로필 사진 표시 방법 - CSS 수정>

 

 

 

 CSS로 넘어와 중간쯤 자리잡은 .area_reply .reply_content 부분을 찾아 그 바로 아래에 위 사진 속 내용 그대로 붙여주기만 하면 댓글방명록에 '프로필 사진'이 표시되는 모습이다. 조금은 귀찮더라도 보다 더 깔끔한 댓글과 방명록을 마주할 수 있다면야...

 

 

 

<티스토리 반응형 스킨 #2

구글 애드센스 페이지 수준 광고 적용>

 

 

 

 이왕 '반응형 스킨'을 사용하는 김에, 지금까지 재미를 못 봤던 구글 애드센스 '페이지 수준 광고'를 다시금 활성화시켜볼까 싶었는데, 위와 같이 적용하자마자 (기본 스킨과는 다르게) 반응형 스킨에서는 즉각적으로 반영되더라. 그리하여, 모바일 접속 시, 앵커오버레이 광고 등 블로그 내 등장하는 광고의 종류가 더욱 더 다양해진 모습이다. (잠재적인 수익 플랫폼이 많아졌다고나 할까.)

 

 

 

<티스토리 반응형 스킨 #2

구글 애드센스 일치하는 콘텐츠 광고 적용>

 

 

 

 기존의 기본 스킨에도 구글 애드센스의 '일치하는 콘텐츠 광고'를 적용해오긴 했다. 하지만 PC버전과 모바일 버전을 따로 구분하여 등록을 해야했기에 꽤나 불편했었는데, '반응형 스킨'으로 바꾸니, PC는 물론, 모바일에서도 자동 적용된다. 특히나, 모바일에서는 '광고' 구현이 보다 더 드라마틱(?)하게 되는 듯 보이기도 하더라. 좋다, 마음에 든다.

 

 

 

 

<네이버 웹마스터도구 - 사이트 최적화

웹 표준 준수 상위 1% 사이트>

 

 

 

 게다가 내가 그토록 바라왔던 '네이버 웹마스터도구' 기준 사이트 최적화 또한  이루게 되었는데, 본래 기본 스킨으로는 상위 2~3%가 최대였다면, 이번 기회에 '반응형 스킨'을 적용함으로써 사이트 구조상 '모바일 사용성'에서 최적화를 이루어 '웹 표준을 준수하는 상위 1% 사이트'가 될 수 있었다.

 

 

 

 

 

 

 이렇듯 티스토리 블로그 '반응형 스킨 #2' 적용 후, 2~3일간의 꾸미기 시간을 가진 뒤, 본격적으로 '포스팅'을 시작해보았고, 그 결과는 다음과 같다. 실은, 스킨을 바꾸고나서 첫 포스팅부터 검색 누락(?)이 되나 싶었으나 그런대로 네이버 검색에는 신규 작성 글도 곧잘 반영(!)되더라.

 

 

 

<티스토리 블로그 반응형 스킨 #2

기존의 티에디션 적용 - PC 및 모바일 버전>

 

 

 

 '반응형 스킨'이 다 좋지만, 딱 하나 아쉬운 점이 있다면, 그것은 바로 블로그의 메인 '' 화면이 없다는 것이다. 그리하여 난 기존에 사용하던 '티에디션'을 지금까지도 계속 사융 중인데, PC버전에서는 나름 괜찮게 잘 적용되는 듯싶으나, 모바일 버전에서는 PC화면으로 나와 가독성이 현저히 떨어진다. 

 

 

 

 그럼에도 불구하고, 어떻게든 티에디션을 지켜나가는 방향으로 블로그를 꾸밀까 생각은 하고 있지만, 또 어떻게 변화를 줄지는 여러모로 고심을 좀 해봐야겠다. 티스토리 '반응형 스킨 #2'와 함께 새로이 꽃단장한 남자 패션 블로그 '탈 프로젝트', 앞으로의 모습이 더욱 더 기대된다.

 

 

 

Adam's Tal Project : 탈 프로젝트

 

 

반응형
14 Comments
댓글쓰기 폼