블로그 첫 화면은 리스트, 카테고리 글 목록은 그리드 | hELLO 스킨 커스터마이징 001

hELLO 스킨 커스터마이징 시작 

며칠 전에 Book Club 스킨에서 hELLO 스킨으로 변경했다 (아래 글 참조). 이 글에서는 hELLO 스킨 커스터마이징의 시작으로서 관리자 화면 > 꾸미기 > 스킨 편집 메뉴에서 손쉽게 변경 가능한 옵션들을 설정한다. 

 

티스토리 스킨 변경 (Book Club > hELLO)

티스토리 스킨 변경 (Book Club > hELLO)

 

관리자 화면 > 꾸미기 > 스킨 편집 

티스토리 관리자 화면에서 꾸미기 > 스킨 편집 메뉴를 클릭하면 화면 오른쪽에 아래 그림과 같은 기본 설정 값이 나온다. 참고로 이러한 스킨 편집 화면은 hELLO 스킨 뿐만 아니라 다른 스킨도 모두 가지고 있으니, 티스토리 블로그 사용자라면 익숙한 화면일 것이다. 

 

(좌) 변경 전 / 변경 후 (우)

 

변경 내용 

위 그림의 각 오른쪽 상단에 "html 편집" 버튼을 클릭하면 HTML/CSS 편집은 물론 파일 업로드도 가능한 화면이 나오지만, 이 글에서는 그 아래에 나오는 4가지 옵션 (홈 설정, 기본 설정, 사이드바 및 글) 만을 우선 건드릴 예정이다. 각 설정 내용에 대한 의미와 결과는 이 글의 아래 부분에서 이야기하도록 하고, 먼저 변경 내용을 열거하면 다음과 같다. 

• 홈 설정 > 홈 화면 글 수: 3개에서 5개로 변경
• 기본 설정 > 글 목록 글 수: 10개에서 6개로 변경
• 사이드바 > 카테고리 접기/펼치기: 토글 ON 에서 OFF 로 변경
• 글 > 댓글 접기/펼치기: 토글 ON 에서 OFF 로 변경 

 

 

블로그 첫 화면은 리스트

지난 글에서 언급한 내용과 같이, "블로그 첫 화면은 리스트를 쓰고, 카테고리 글 목록에서는 그리드를 쓰게 될 듯 하다" 는 부분을 이제부터 설정하려 한다. 

 

이 글의 윗 부분에서 기본 설정의 기본 목록 스타일 (기본 값: 리스트) 을 건드리지 않았기 때문에, 블로그 첫 화면은 리스트 형식으로 글 목록을 보여준다 (아래 화면 참조). 홈 설정의 홈 화면 글 수를 3개에서 5개로 변경한 결과도 아래 화면에서 확인할 수 있다. 

 

 

카테고리 글 목록은 그리드 

위에서 기본 목록 스타일을 리스트 형식으로 설정했기 때문에, 카테고리 글 목록을 그리드 형식으로 설정하려면 약간은 번거로운 설정 과정이 필요하다. 우선, 리스트 형태의 카테고리 글 목록의 예 (How It Works 카테고리) 는 아래 캡처 화면에서 보는 바와 같다. 

 

 

블로그 첫 화면과 비슷하게 보이지만, 이 글의 윗 부분에서 기본 설정의 글 목록 글 수를 10개에서 6개로 변경했기 때문에 홈 화면 글 수인 5개와 다르게 6개가 표시된다. 굳이 6개로 설정한 이유는 이 글의 아래 부분에서 카테고리 글 목록이 그리드 형태로 변경된 모습과 함께 설명한다. 

 

 

카테고리 글 목록을 그리드 형식으로 설정하는 약간 번거로운 과정은 다음과 같다. 우선, 관리자 화면에서 콘텐츠 > 카테고리 관리 메뉴를 클릭한다 (아래 그림 참조). 

 

 

변경하고자 하는 카테고리 위에 마우스를 올리면, 카테고리의 오른쪽에 추가, 수정, 관리, 이동, 삭제의 버튼이 나타난다. 이 중에서 "관리" 버튼을 클릭하면, 아래와 같은 팝업 창이 뜬다. 

 

 

목록 스타일을 "그리드" 로 바꾸고 아래쪽에 "확인" 버튼을 클릭하기 전에 바로 위에 있는 "하위 카테고리에 함께 적용합니다" 앞에 체크박스를 클릭한다. 이렇게 해야 번거로운 일이 조금은 줄어들기 때문이다. 모든 상위 카테고리에 대해 위 과정을 반복하고, 마지막에 "변경사항 저장" 버튼 클릭을 잊지 말자. 

 

 

카테고리 글 목록을 그리드 형식으로 변경한 결과 (예: How It Works 카테고리) 는 아래 캡쳐 화면과 같다. 

 

 

글 목록 글 수를 6개로 설정한 이유는 위 화면에서 찾아볼 수 있다. PC 환경에서 브라우저의 가로 폭이 1100 픽셀 이상일 때는 3열 그리드 (3 x 2 로 표시), 1100 픽셀 미만일 때는 2열 그리드 (2 x 3 으로 표시) 로 바뀌기 때문이다. 참고로 768 픽셀 미만에서는 모바일 환경과 같이 1열 그리드로 바뀐다.  

 

번거롭다 그리고 새로운 문제 발견? 

번거롭지 않게 기본 목록 스타일을 그리드 형식으로 바꾸면 되는 거 아닌가? 만약, 블로그 첫 화면도 그리드 형식으로 보고 싶다면... 그렇다. 하지만 나처럼 블로그 첫 화면은 리스트, 카테고리 글 목록은 그리드도 설정하고 싶다면 번거로운 과정을 피할 수가 없더라. 그리고 내 경우에는 아직 상위 카테고리가 4개 밖에 없어서 많이 번거롭지는 않았... 

 

그런데, 여기에서 새로운 문제가 발생했다. 

 

각 카테고리의 글 목록은 그리드 형식으로 잘 표시되는데, "분류 전체보기" 를 클릭하면 리스트 형식으로 나온다. 그래서 다음 글에서는 "분류 전체보기" 를 삭제하기로 하는데...