티스토리 WHATEVER 스킨 수정 ③

 

WHATEVER 반응형 스킨 수정 세 번째 시간이자 마지막 시간입니다. 25일 티스토리 4월 스킨 업데이트 소식이 있었는데요. 

 

신규 스킨 Magazine이 나왔고, 기존 신규 스킨 4종(Poster, Letter, Whatever, Portfolio)에 대한 마이너 업데이트가 실시되었습니다. 글꼴과 이미지 크기, 스킨 요소들 사이의 간격 조절, 댓글 영역 모바일 대응, 플러그인 호환성 등을 개선했다고 하는데요. 

 

별도의 HTML 수정을 하지 않은 경우엔 업데이트가 자동 반영되는데, 저는 우선 수정을 많이 했기 때문에 기존의 스킨을 저장 후 업데이트된 스킨으로 다시 적용을 해봤습니다. 개선된 부분을 확인 후 다시 수정된 스킨으로 돌아왔는데, 커버와 사이드바는 저장되지 않아서 리셋되어 버렸네요..ㅠ_ㅠ 귀찮지만 다시 후다다닥 설정을 해주었습니다. 

 

 

 

 

지난 시간에는 상단바(상단 메뉴바, 헤더, HEADER) 고정하기, 고정 후 메인 커버, 카테고리 목록 (리스트형 or 섬네일형), 본문 화면 아래로 위치 이동시키기, 본문 제목 폰트 사이즈, 색상 변경, 줄 간격 수정 등에 대해서 살펴봤습니다. 

 

 

이번 시간에는 커버 슬라이더 폰트 사이즈, 본문 너비(여백), 카테고리창 너비, 블로그명 색상, 카테고리 글자 굵기, 서브 카테고리 너비 수정과 댓글 아이콘, 파비콘이 연달아 3개 뜨는 것을 1개로 수정하는 작업을 해보겠습니다. 

 

 

 

 

먼저 홈 화면 커버 중 슬라이더의 글자 크기가 유난히 큰 것 같아서 좀 줄여보겠습니다. 블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS에서 찾기(Ctrl+F)로 cover-slider를 검색합니다. 그중 약 473번째 줄에 .cover-slider ul li .text-box .title을 찾습니다. (스킨 편집 유무에 따라 위치 다름) font-size: 2.5em 으로 수정합니다. 

 

모바일 수정은 Media Screen - Mobie에 속해 있는 약 2489번째 줄의 .cover-slider ul li .text-box .title을 찾습니다. font-size: 1.2em 으로 수정 후 적용 클릭합니다. 숫자를 바꿔가며 원하는 폰트 사이즈로 맞추시면 되겠습니다. 

 

 

 

 

그다음은 본문 너비(여백)를 수정해 볼게요. 사이드바가 사이드에 없다 보니 큰 모니터로 볼 때 특히 본문 여백이 더욱 휑하게 느껴지네요. PC 화면에서는 본문 너비를 넓혀서 여백을 줄여주고, 모바일 화면에서는 사이드에 본문이 너무 꽉 차서 여백을 조금 더 줄 거예요.

 

블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS에서 찾기(Ctrl+F)로 content 를 검색합니다. 약 188번째 줄에 #content .inner 를 찾습니다. max-width: 920px 로 수정합니다. 1,000px 이상으로 설정을 해보니, 가독성이 좋지 않아서 다시 수정했습니다. 

 

 

모바일 수정은 Media Screen - Mobie에 속해 있는 약 2420번째 줄의 #content .inner를 찾습니다. padding: 12px 로 수정 후 적용 클릭합니다. 딱 달라붙어 있던 본문에 약간의 숨구멍을 만들어줘서 좀 덜 답답해 보이네요. ^^;;

 

 

반응형 스킨, 반응형 웹스킨,블로그 스킨,티스토리 반응형 스킨, 티스토리 스킨, 티스토리 whatever 스킨, customizing, 커스터마이징, 코딩

 

여기서 추가 작업이 하나 더 필요한데요. 너비를 수정하고 나면 카테고리를 클릭하고 들어갔을 때 보이는 포스트 헤더 부분과 너비가 맞지 않을 거예요. 위 이미지는 너비를 맞춘 후의 화면입니다. 

 

 

 

 

찾기로 post-header 를 검색하면 약 713번째 줄에 나옵니다. max-width: 920px 로 똑같이 수정해 주고 적용 클릭합니다. PC 화면에서 포스트 헤더 부분의 너비가 동일해진 것을 확인할 수 있습니다. 블로그 관리 홈 > 콘텐츠 > 설정 > 에디터 가로 폭도 동일하게 920px로 설정해 줍니다.

 

 

 

 

카테고리창 너비를 수정해 보겠습니다. PC에서는 메뉴바에 그대로 카테고리를 넣어서 쓰고 있기 때문에, 모바일에서만 수정했습니다. 모바일 세 줄 메뉴 버튼을 클릭하고 뜨는 카테고리창의 너비가 넓어서 여백이 많이 남더라고요. 

 

Media Screen - Mobie에 속해 있는 약 2442번째 줄 #gnb를 찾습니다. width: 250px;을 삽입한 후 적용 클릭합니다. 카테고리 글자 수에 따라 여백은 적절히 조절하시면 되겠습니다. 

 

 

 

 

블로그명 색상을 수정해 볼게요. 찾기로 #header h1 a를 검색하면 약 107번째 줄에 나옵니다. color: #FA7399 핑크 계열로 수정했습니다. "html 색상표"로 검색하여 원하는 색상 값을 복사하여 color 부분을 수정해 주시면 됩니다. 

 

 

 

 

카테고리 글자 굵기를 좀 더 진하게 해보겠습니다.  찾기로 #gnb ul li 를 검색하면 약 122번째 줄에 나오는데요. font-weight: bold;를 삽입해줍니다. (카테고리 생성을 위해 하단에 삽입한 코드에 수정해도 됨) PC, 모바일 함께 적용되었습니다. 

 

 

 

 

상단 메뉴바 카테고리의 서브 카테고리 박스 너비가 조금 좁은 편인데요. 글자 수가 길 때 두 줄로 넘어가는 부분을 수정했습니다. NEW가 떴을 때를 감안해서 넉넉하게 수정했습니다. 

 

 

 

 

카테고리 생성을 위해 하단에 삽입한 코드 쪽으로 갑니다. 약 2853번째 줄에 #gnb .sub_category_list 에서 width: 200px로 수정합니다. 서브 카테고리 글자 수에 따라 너비를 조정해 주면 되겠습니다. 

 

 

그리고 저 같은 경우는 PC 화면 댓글에서 아이콘과 파비콘이 3개 연달아 뜨는 현상이 나타나더군요. 보통 2개가 연달아 떠서 파비콘 설정만 해제하는 경우가 많은 것 같은데, 저는 아이콘과 파비콘을 모두 해제했습니다. 기본적으로 스킨에 설정이 되어있는지 플러그인 설정과 중복되어 3개나 연달아 나타나는 것 같아요. 

 

블로그 관리 홈 > 플러그인에서 블로그 아이콘 표시, 홈페이지 아이콘 표시 (파비콘) 2개를 모두 해제하니 아이콘이 하나만 깔끔하게 뜨는 걸 확인할 수 있었습니다. 

 

여기까지 티스토리 블로그 WHATEVER 반응형 스킨 커스터마이징(customizing)을 마치겠습니다. 수정이 필요한 부분이 아직 많긴 하지만 계속되는 수정으로 인해 방문자, 검색 노출, 애드센스 수익에 영향을 미치다 보니 이쯤에서 마무리 짓는 게 좋겠습니다. 한 달 정도 사용해본 후 이 부분은 다시 포스팅하도록 하겠습니다.

 

읽어주셔서 감사합니다 :)