티스토리 hello 스킨 변경 및 편집

변경 스킨 내용

오랜만에 티스토리 스킨을 또 한 번 변경하였습니다
기존 berry 스킨에서 이번에 hello스킨으로 바꾸게 되었는데 카테고리의 on/off 영역을 깔끔하게 잘 구현해놓으셨고 블로거 입장에서 수정하기에도 편리하고 필요한 기능들을 모두 제공해주는 스킨이라고 생각하여 선택 후 변경하였습니다
무려 무료로 이 엄청난 스킨을 제공해주고 있습니다
 
 

글 목록 리스트형태로 변경

기본적으로 hello스킨을 설정하게되면 이미지+내용형 목록으로 나와가지고 이게 너무 싫었습니다

여러 글목록중인데 pc로 접속하였음에도 불구하고 이미지 사이즈로 인해 화면에 담기지도 않고 깔끔하게 글 제목과 목록만 보면 좋은데 사진이 차지하고 있는 영역이 너무 많아서 글 제목과 내용만 나오도록 수정해주려고 했습니다

수정 방법은 어렵지 않게 블로그 관리 카테고리에서 목록 스타일을 리스트로만 변경해주면 됩니다

728x90

그리고 변경한 카테고리를 가보면 글목록이 정상적으로 나오지만 분류 전체보기를 클릭하면 여전히 이미지와 글 제목 내용이 함께 나왔습니다

카테고리 편집에서 분류 전체보기는 추가, 수정만 있고 따로 관리가 없어서 어디에서 설정을 해야 하나 찾아봤는데 이 또한 간단했습니다

블로그 스킨 편집으로 이동하여 리스트 형태로만 바꿔주면 카테고리 전체 목록을 클릭할 때 리스트 형태로 바뀌게 됩니다

 
 
 

이미지 글자 좌측상단 시작위치 변경

개발자님의 블로그에 적용된 동일 스킨 기본 설정이 똑같아서 위의 사진으로 설명하자면 빨간 네모 영역이 보이시나요?
가로로 긴 사진을 넣을 경우 텍스트는 가운데 정렬이 된 듯 가운데에 나오고 이미지는 텍스트 바깥으로 삐져나오고 이미지의 좌측 위 시작 위치가 글하고는 떨어져 있어서 불편했습니다

취향에 따라 다르겠지만 저는 이렇게 글자와 제목 그리고 이미지가 삽입된다면 좌측 기준이 텍스트와 사진이 동일한 걸 선호하기에 따로 변경해주었습니다

 

카테고리 수정

카테고리의 영역은 불필요한 부분은 제거하였고 카테고리 바로 밑부분은 티스토리 관리 메뉴와 바로 글을 쓸 수 있게 배치하였습니다 우연의 일치인지 모르겠지만 페이지 전체 화면 시 티스토리 글쓰기 및 설정 메뉴까지 딱 깔끔하게 나오네요
나중에 카테고리 정리를 하거나 다른 기기에서 상단 애드센스 광고가 나오게 된다면 운영 중인 블로그 부분이 밑으로 가려지겠지만 스크롤바를 통해서 확인할 수 있습니다

 

TOC 제목2,제목3 수정

pc버전에서 사이드 TOC부분을 따로 수정해주었습니다
저의경우 본문에 제목2,제목3을 많이사용하는데 각각 태그로 보면 제목2는 h3, 제목3은 h4태그였습니다
기존 스킨에서는 제목3은 toc로 출력되지않아가지고 그동안 작성한 게시물을 전부 변경해주기 어렵기때문에 이전 스킨에서 사용했던것처럼 제목2와 제목3 전부 우측에 나오도록 수정하였습니다
수정과정에서 h3태그와 h4가 모두 수직정렬 되는 현상이 있어서 이부분은 css스타일에서 수정하였습니다
 

모바일 Media Query

기존 모바일에서 접속할경우 현재페이지만 출력되도록 되어있는데 저는 pc페이지처럼 여러 페이지가 나오는걸 선호해서 이부분도 수정하였습니다

이제 pc와 동일하게 맨끝 페이지 번호도 나오고 여러페이지 번호가 나오는걸 확인할수 있습니다
 
 
 
+) 23.01.02
대댓글 작성시 대댓글이 달렸는지 안달렸는지 확인할수없어서 대댓글은 기본 숨기상태에서 항상 펼쳐진상태로 댓글이 달리게 수정하였음
대댓글과 댓글이랑 구분이 어려워 대댓글은 색상을 구별해줬음
 
스크립트로 인한 로딩대기화면을 제거하여 페이지 로딩속도 개선