친절한효자손 취미생활

티스토리 반응형 스킨! 친효스킨 1.15 버전 업데이트 소식

2019. 10. 31. 00:06

에디터에게 힘이 되어 주세요. 애드블록은 광고쟁이들에게 사용해 주세요!

친효스킨 버전 업데이트 소식 입니다. 현재 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일에 아래의 친효스킨 다운로드 페이지에서 받으실 수 있습니다. 한번 적용해 보시고 사용하시다가 문제점이나 오류가 발생되면 댓글로 알려주시면 감사하겠습니다. 끝.





이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

잠깐! 비밀로 남겨야 할 만한 내용인가요? 그렇다면 차라리 이메일을 보내주시기 바랍니다.

  1. Favicon of https://dngstory.tistory.com 수줍은 농부 2019.11.01 16:07 신고

    적용했습니다.
    감사합니다.

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2019.11.01 22:18 신고

      안녕하세요, 근데 농부신데 직접 키우시는 농사일기 카테고리에 어째... 직접 찍은 사진들은 하나도 안 보이네요?

  2. Favicon of https://ahaji-tour.tistory.com 아하지 2019.12.18 23:32 신고

    감사합니다! 잘 적용해서 사용 중인데, 글 포스트로 들어가면 사이드바가 하단으로 내려가고 왼쪽엔 태그, 관련글이 올라옵니다 ㅠ 열심히 찾아봤는데 수정하는 법을 몰라 댓글 남깁니다 ㅠㅠ

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2019.12.19 01:09 신고

      안녕하세요, 스킨이 완전 깨지네요. 혹시 플러그인을 애드센스를 제외한 모든 것들을 해제하고 테스트해 보시겠나요?

  3. Favicon of https://ahaji-tour.tistory.com 아하지 2019.12.19 13:06 신고

    ㅠ.ㅠ 애드센스 제외한 다른 플러그인 다 제외해봤는데 안되네요 ㅠ.ㅠ 이유가 뭘까요 흑

  4. Favicon of https://minikupa.com 미니쿠파 2020.01.21 16:08 신고

    안녕하세요. 친효스킨 1.15 사용중인데 글을 비공개로 설정하면 하단의 공감버튼, 통계버튼이 정상적으로 보이며, 클릭이 되는데 글을 공개로 설정해놓으면 공감버튼이 안보이고, 다른버튼들도 클릭이 안되네요.. 다른 스킨을 적용하면 공개든 비공개든 정상작동하더라고요.. 왜 그럴까요?

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2020.01.21 18:19 신고

      로그인 상태라면 내 글은 공감버튼이 보이지 않습니다. 저는 다른 버튼들 다 정상작동이 확인 되고 있습니다.

    • Favicon of https://minikupa.com 미니쿠파 2020.01.21 18:22 신고

      다시 스킨을 다운받아서 적용해보니 잘 됩니다. 스킨 수정 과정에서 오류가 있거나 했던것 같습니다.. 어제 오늘 계속 여쭈어봐서 죄송하고, 답변해주셔서 감사합니다.

  5. Favicon of https://goguma1900.tistory.com 니치e 2020.02.07 12:34 신고

    애드센스 설정이 잘못됐다면 스킨을 초기화하고 다시 설정하는게 빠를까요?

  6. Favicon of https://weneeds.tistory.com 킴왕 2020.02.08 03:40 신고

    안녕하세요. 저 다름이 아니라, 스킨 문제가 아니라 다른 문제인 듯 싶습니다만.
    열심히 포스팅하고 있는데, 링크 등 그림이 많은 것도 아닌 거 같은데, 글을 쓰고 해당창을 미리보기 하고자 f12를 클릭하면 우측화면에 경고표시로 many contents? 라고 뜨는데 그것은 무슨 문제일까요