친효스킨 본문 소제목1 (h2) 스타일 변경 안내

안녕하세요. 친절한효자손입니다. 본문 소제목1에 대한 CSS 스타일 변경 안내입니다. 기존 2.6.SRA 버전에서 모바일 해상도에서 접속 시 제목1(h1)로 적용시킨 소제목이 오른쪽으로 텍스트가 너무 치우쳐 가독성이 좋지 못하다는 피드백이 있었습니다. 그래서 스타일을 수정했습니다.

 

안녕하세요. 친절한효자손입니다.

 

이렇게요. 이제 텍스트가 모바일에서 우측으로 치우칠일은 없을 것입니다. 갑자기 생각나서 만들어봤는데 만족스럽습니다.

 

CSS 수정하기

친효스킨 2.6.SRA 버전을 사용하시는 분들은 스킨편집의 CSS 탭에서 다음의 코드를 찾습니다.

 

#contents .article h2 {
    position: relative;
    padding: 10px 15px;
    margin-left: 40px;
    font-size: 1.2em;
    color: #fff;
    background-color: #555;
    z-index: 0;
}

#contents .article h2::before,
#contents .article h2::after {
    position: absolute;
    display: block;
    top: 0;
    content: "";
    height: 100%;
    background-color: #555;
    z-index: 1;
}

#contents .article h2::before {
    left: -40px;
    width: 10px;
}

#contents .article h2::after {
    left: -25px;
    width: 20px;
}

이 코드를 아래의 첨부파일로 바꿔치기를 합니다.

 

친효스킨 v2.6.SRA 소제목1 CSS.txt

0.00MB

 

간단하죠? 친효스킨 구버전에서도 동일하게 변경하시면 됩니다. 만약 위의 코드가 없거나 있기는 한데 위와 똑같지 않다면 #contents .article h2 를 기준으로 찾으시면 됩니다. 그리고 모두 교체하시면 됩니다. 그래도 잘 모르겠다면 구버전 친효스킨의 CSS 코드 맨 아래에 붙여넣기를 시도하세요.

 

타스킨의 경우에는 HTML 구조가 다릅니다. 즉 본문의 h2 태그에 대한 선택자가 다릅니다. 어딘지 정 모르겠다면 댓글로 남겨주시면 시간 나는대로 살펴보겠습니다. 단 댓글을 남길때는 반드시 제목1을 사용한 글의 문서번호가 포함된 URL 링크까지 같이 남겨주시기 바랍니다. 그래야 크롬 개발자툴로 태그의 경로를 파악할 수 있습니다. 끝.