티스토리 카테고리 페이지 꾸미기(feat 구글애드센스 삽입)

IT/Blog&SNS Tip

by MasterHwan[마스터환] 2018. 6. 18. 17:30

이번에는 카테고리 페이지를 꾸미는 방법에 대해 알아 보겠습니다. 저는 포스팅 작성날짜와 댓글수는 오른쪽 정렬로, 포스팅 제목은 왼쪽 정렬로 하고 싶었습니다. 아래 이미지는 제가 원하는 스타일로 만든 카테고리 페이지 입니다.

먼저 관리페이지 -> 스킨편집 -> html 편집 클릭후 ctrl+F 혹은 ctrl+G를 누른 후 을 찾으시면 아래 소스를 볼수 있습니다 (스킨에 따라 조금씩 차이가 있을 수 있습니다. 저는 Photo Essay (사용자 수정) 스킨을 사용 중입니다.)

에 해당되는 글

건</h3>

<ol>

<s_list_rep>

<li>

</li>

</s_list_rep>

위 소스에서 중요한 인자만 간략히 말해보자면

은 선택한 카테고리 명,

은 선택한 카테고리에 있는 포스팅 수,

은 선택한 카테고리에 포함된 포스팅 제목,

은 각 포스팅 마다 달린 댓글 수,

은 각 포스팅 작성날짜 입니다.

이제 위 소스에 중간 중간 소스를 수정 첨하여 포스팅 제목과 작성 날짜, 댓글수 위치와 크기, 색깔을 변경해 보겠습니다.

먼저 포스팅 제목을 왼쪽에 오도록 정렬시키기 위해 각 포스팅 작성날짜 인자인 와 선택한 카테고리에 포함된 포스팅 제목 인자인 <a href=""></a> 순서를 서로 바꿔 주시면 됩니다. 이렇게 해야 위 최종 이미지 처럼 선택한 카테고리에 포함된 포스팅 제목은 왼쪽으로 정렬 시키고 포스팅 작성 날짜는 오른쪽 정렬을 시킬 수 있습니다.

아래 소스처럼 파란 부분의 순서만 바꿔 주면 됩니다.

에 해당되는 글 건</h3>

<ol>

<s_list_rep>

<li>

<a href=""></a>

</li>

</s_list_rep>

그리고 나서 포스팅 작성 날짜와 댓글수를 오른쪽으로 정렬해보겠습니다.

먼저 포스팅 날짜부터 오른쪽으로 정렬시켜 보겠습니다. 와 사이에 아래 소스만 넣어주시면 됩니다.

포스팅 작성날짜 오른쪽 정렬이 끝났다면 이번에는 포스팅 댓글수도 오른쪽으로 정렬해 보겠습니다. 포스팅 작성날짜 처럼 위 소스를 똑같이 와 사이에 넣어 주시면 됩니다. 그런데 위 소스만 넣으면 나중에 확인 해 보시면 댓글수가 포스팅 작성날짜 뒤로 가서 댓글이 달린 포스팅이 있는 경우 아래 처럼 포스팅 작성 날짜가 중간에 튀어 나오게 됩니다.

그래서 저는 포스팅 댓글수 시작 위치를 임의로 지정해 주었습니다. 아래 소스처럼 margin-right:4px;로 수정해 주시면 됩니다.

또 선택한 카테고리 명, 선택한 카테고리에 있는 포스팅 수, 각 포스팅 마다 달린 댓글 수, 각 포스팅 작성날짜 글씨 크기와 글씨 색깔은 각 인자 앞에 를 기호에 맞춰 넣으면 됩니다. 원하는 색깔은 검색창에서 html 색상표 검색후 원하는 색깔을 #뒤에 색상코드표를 넣거나 red, blue. black 등으로 원하는 색깔의 영어명을 넣으면 됩니다.