티스토리 반응형 스킨! 친효스킨 1.15 버전 업데이트 소식
친효스킨 버전 업데이트 소식 입니다. 현재 1.15까지 완성 되었습니다. 이번 업데이트에서는 아래와 같은 내용들이 추가되고 변경되었습니다.
Ver 1.15 업데이트 내용
- 애드센스 최상단 및 최하단 광고 크기 최대 세로 100px 이하로 출력되도록 수정
- 구형 글쓰기 에디터 더보기 및 접기 버튼 스타일 수정
- 새로운 글쓰기 에디터 첨부파일 스타일 수정
- 이미지에 테두리 적용 후 살짝 선명도가 떨어지는 문제 수정
- 비로그인시 댓글 남기기 항목에 보이는 이름, 비밀번호, 홈페이지 입력칸 색상 변경
- 비밀글 체크박스 크기 및 폰트 크기 변경
- 인피드광고 관련 CSS 일부 삭제 (보이기/안보이기 기능은 이제 필요 없어서 삭제 조치)
- 본문 글꼴을 '리디바탕체'로 변경
- 인덱스 페이지 전면 수정 (썸네일 크기 120px × 120px 고정)
- 본문 아래 관련글 모듈 전면 수정 (썸네일 크기 변경)
- 사이드바 및 본문 가로 크기 수정
- 본문에 썸네일 이미지 없을 시 인덱스 페이지 썸네일에 기본 이미지가 출력되도록 수정 (위 이미지 참고)
- 반응형 크기에 따라서 인덱스 페이지 썸네일의 세로 위치가 중앙에 오도록 자동 조절
- 보호글 CSS 스타일 마크업 (관련 HTML 일부 수정)
- 본문 가로폭을 쉽게 변경할 수 있도록 수정
특히 이번 업데이트에서는 인덱스 페이지인 메인 화면에서의 변화가 두드러졌으며, 사이드바와 본문 가로폭에 대한 수정이 쉽도록 조정되었습니다. 또한 한글날을 맞이하여 무료 배포된 리디바탕체를 기본으로 적용시켰습니다.
인덱스 페이지 메인화면의 변화
인덱스 페이지의 썸네일 사이즈를 변경했습니다. 기존에는 모바일 화면에서의 썸네일 이미지와 PC 해상도에서의 썸네일 이미지의 크기가 서로 달랐습니다. 그렇기 때문에 애드센스 인덱스 광고 스타일을 정의하기가 어려웠습니다. 1.15 버전에서는 썸네일 이미지 사이즈를 정사각형의 고정 크기로 변경했습니다. 가로 × 세로 모두 120px 입니다. 모든 디바이스에서 동일한 사이즈로 출력됩니다.
본문에 대표 이미지가 없을 때, 기본 이미지가 출력됨
보시는 것 처럼 본문에 이미지가 아무것도 없으면 이렇게 기본 이미지로 출력 됩니다. 이 부분은 스크립트를 써야 했지만 그냥 단순하게 처리했습니다. 이 기본 이미지는 모든 글에 늘 출력됩니다. 단지 본문에 대표 이미지가 있다면 기본 이미지 위에 덮어쓰는 형태로 출력됩니다. 그렇게 되면 기본 이미지가 가려져서 보이지 않게 되는 것 입니다. 굳이 복잡한 스크립트를 쓸 필요가 없습니다. (사실 스크립트를 잘 못 다루기 때문에...)
본문 가로 크기 변경
사이드바는 이제 최종 넓이가 %가 아닌 고정형 px 단위로 변경되었습니다. 물론 반응형 미디어쿼리에 따라서 약간의 사이즈가 변하도록 수정하였습니다. 최종적으로는 300px 이상을 못 넘도록 설정해 두었고 나머지 부분이 본문의 가로폭이 됩니다. 이 가로폭을 편하게 수정하는 방법은 CSS에서 아래의 스타일 정의 부분을 검색하시면 됩니다. "본문 가로 크기" 라고 주석 처리된 부분으로 검색하시면 쉽게 찾을 수 있습니다.
#container {
max-width: 1200px; /* 본문 가로 크기 */
margin-right: auto;
margin-left: auto;
margin-left: var(--containerLocation);
}
단 이건 미디어쿼리 마크업 부분입니다. 가로 1000px 이상일 때 입니다. 빨간색으로 표시된 부분의 수치를 변경해주시면 됩니다. 1200보다 크면 본문 가로폭이 커지고, 1200보다 작으면 본문 가로폭도 줄어듭니다. 또한 이 부분도 똑같이 수정해 줘야 합니다.
#topAdss,
#bottomAdss {
max-width: calc(1200px - 40px); /* 본문 가로 크기 변경 시, 1200px 부분도 똑같이 수정할 것 */
margin: 20px auto;
padding: 0 20px;
}
최상단 및 최하단 애드센스에 대한 스타일 부분입니다. 마찬가지로 빨간색으로 표시된 부분의 값을 동일하게 변경해 주셔야 합니다. 그래야 애드센스가 제 위치에 놓이게 됩니다.
친효스킨 1.15 업데이트 내용에 대해 중요 부분만 설명을 드렸습니다. 다운로드는 오늘이 아닌 내일! 11월 1일에 아래의 친효스킨 다운로드 페이지에서 받으실 수 있습니다. 한번 적용해 보시고 사용하시다가 문제점이나 오류가 발생되면 댓글로 알려주시면 감사하겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
