#2 스킨 적용 후 커스터마이징한 것들 정리, 배경 글씨체 변경, 애드센스 리스트, SNS 버튼 수정 등 - 티스토리 반응형 스킨 #2 수정, 변경 기본 수정 치환자

그동안 정들었던 마크쿼리님 스켈레톤 + 용쯔님의 갤러리형목록을 떠나보내고 (마음이 참 쓰라렸던) 새 반응형 스킨, 티스토리 공식 스킨인 #2 샵투를 적용했습니다. 워낙 코딩은 기초부터 부족한지라, 다음에 스킨 수정할때는 지난 작업들 다 까먹어서 또 막막하게 되니 이번에 적용한 것들, 수정한 것들, 커스터마이징 한 것들(?) 정리해 놓는 포스팅입니다!

가장 먼저한 일은(?) 지난 스킨에서 AD 따오기!....! 그러면서 동시에 웹전용을 포기하고 모바일버젼으로 바꾼 것도 있고요. 새로 구성한 것들도 있고, 또 배치도 바뀌고, 크기나 설정들도 바꿨습니다. 특히 지난 소스에서 구글ad를 화면크기에 따라 2개->1개 배치로 변하게 했는데 이제 구글도 반응형이 어느정도 안정이 된 모습이라 그냥 이 스크립트를 포기하고, 따로따로 적용시켰습니다.

그리고 카카오톡 공유버튼도 재추가했죠! html에 버튼 소스추가하고, 카톡버튼 이미지 파일 업로드, 카톡js 스크립트 추가, 카톡버튼 배치 스크립트 추가하고, 지난번에 코코소프트 블로그에서 따라한 거 되새기면서 했던 거 같아요.

그리고 눈에 띄는 것들을 했죠.

티스토리 반응형 스킨 #2 배경화면 변경

먼저 배경바꾸기! #2에서는 css에 백그라운드디폴트.jpg라는 이름으로 저장되어 있는 이미지 명을 찾아서 파일업로드 후 바꿔줬는데요. 친절하게 개발자분이 /*백그라운드-이미지*/도 달아주셨죠! 그래서 wrap_sub으로 명명된 부분이 사이드바(?)임을 알게 됩니다.

그 후, 중요한 부분은 역시 "글씨체" 나눔고딕의 노예였기때문에 급한 부분이었습니다. 하지만 웹폰트 적용을 다 까먹었었어요

" @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); "<-css에 이를 선언한 뒤 모든 폰트 속성에 font-family:'Nanum Gothic' 를 부여해댔습니다. 처음에는 띄어쓰기 안하고 붙여썼다가 ....하.....다 하나하나씩 다시 붙여넣기 노동을 했다는 건 비밀입니다.

그리고 메인 타이틀 글씨체는 다른 글씨체로 지정했죠. 이부분을 수정하려면 " .area_head .area_profile .link_post의 폰트를 건드려야합니다

또 코코소프트 님 블로그 보면서 하나하나 따라하다가 해보고 싶었던 것이 랜덤 배경이미지 설정이었는데요! ....코코님은 html스크립트를 쓰신 거 같은데 #2는 기본css 백그라운드 삽입이고 스킨도 달라서 따라하려다가 눈물을 흘리며 포기했습니다. 나중에 한번 해보고싶은 리스트에 올리는 걸로!

그리고 푸터에 a href로 블로그 링크도 달았고요.

또 파비콘도 만들어서 추가했네요! 드디어! 코코소프트님 블로그 보면서 따라했고요!

 맨위로 버튼, 상단 바로가기 버튼 추가

또, 맨위로 자동스크롤 되는 버튼을 달았습니다! 위에 보이는 못생긴 맨위로 버튼. 지난번 스켈레톤에는 이미 있던 버튼인데 이번 스킨에는 없어서 코코님 블로그 보며 따라하며 달았네요! 이부분에서는 hover 성질에 대해 이해를 못하고 시작해서 애먹고 시간도 먹고 그랬네요!

반응형 #2 스킨 기본 공유버튼 이동

또, #2 기본 포함된 공유하기버튼3개가 너무너무 이쁘게 나와서 공유버튼이 본문과 중복되지만 지울 수가 없었습니다. 검색버튼 옆에 달아보기도 했지만 모바일버젼에서 실패하고, 그 아래 기사타이틀 위에 달았지만 ad와 겹쳐서 포기, 대신 본문 시작되는 위치에 올려 달았습니다. 그래서 본문 시작되는 div는 "area_view"라는 걸 알 수 있었죠. 

하지만 공유버튼 아래에 페이스북 좋아요 누르는 그 버튼은 포기할 수가 없는데 어떻게해야 버튼 위치를 바꿀 수 있는지 skin.html 파일을 뜯으라고 하던데 전혀 알 수 없어서 우선 놓았고요ㅠㅠ

카테고리/검색 시 목록 썸네일 확대 , 글 미리보기 축소, 요약글 삭제

그리고, 저는 사진위주의 블로그가 어쨋든 초심이기 때문에 목록 썸네일을 좀 키웠습니다. 목록 썸네일은 html에서 "thumbnail_post로 클래스 정의되어 있는 부분의 이미지주소 가운데 이미지 크기 지정해주는 부분을 바꾸고, 또 동시에 css에서 .list_content . 썸네일 포스트 특성해주는 부분을 함께 바꿔주니 커졌습니다. PC화면에서만요.ㅠ 모바일은 여전히 썸네일이 작았지만 대신에 글 내용 미리보기를 줄였습니다. 이 부분을 수정하면서 생전 처음보는 명령어들을 만나기도 했어요. 2줄 이하는 ...으로 생략해주는 "-webkit-line-clamp:2"태그,  PC버젼인 ".list_content .txt_post" 속성에서 2줄로 바꾸니 바로 적용! 모바일은 왜인지 요약 미리보기가 더 길어진 것 같은 느낌....하지만 검색사랑 나라사랑^0^...  글씨 색을 투명으로 지정하고 오버플로우 숨기고 특히 "white space:nowrap"으로 모바일에서는 요약이 아예 안보이며^^; 정리되었습니다. 뭐 속성을 어떻게 이해하겠습니까ㅠㅠ..... 아래 그 소스가 있고요.

그 외에 티에디션에 말도안되는 태그 넣어서 반응형 정사각갤러리 만들었고요 ( http://publicfr.tistory.com/1450 )

hover효과와 썸네일 사이 간격 없게 만들고 싶지만ㅠ.....

+ 결국 용쯔님의 css코드를 기반으로 메인화면을 어렵게 완성했습니다!ㅠㅠ

<모바일화면>

ㅠㅠㅠ 으 

앞으로 기능이나 기타 필요를 위해 #2 반응형 티스토리 스킨, 하나하나 더 수정해나가야겠습니다^0^