티스토리 스킨 프라치노 공책2.0 css 사용자화 수정내용

현재 이 티스토리 블로그의 스킨은 프라치노 공책 유료스킨이다. 그 어떤 블로그와도 차별화를 둘 수 있는 특색있는 스킨이라 처음보고 꽂힌 후 지금까지 쭉 사용중이다. 프라치노 공책 스킨은 2.0 개발중이며 21년 1월 20일 베타3 버전이 배포되었다.

퇴근하고 기쁜 마음으로 새로운 스킨을 적용하고 사용자화 수정을 했다. 지난번에 필요한 부분 수정한 내용을 모두 기록해놔서 이번에는 엄청난 속도로 css 수정을 마칠 수 있었다. 중간중간 뭘 잘못 건드렸는지 헤매긴 했지만…

<프라치노 공책2.0 베타3 사용자화 수정내용>

→ 나중에 다음버전 적용할 때 본인이 사용자화 다시 쉽게 세팅하려는 목적으로 해놓는 기록임

텍스트 줄바꿈 단어 → 글자로 자르기

<!--변경전--!>
@charset "utf-8";

* {
    word-wrap: break-word;
    overflow-wrap: break-word;
    outline: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

<!--변경후--!>
@charset "utf-8";

* {
    word-wrap: break-word;
    overflow-wrap: break-all;
    outline: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

<!--변경전--!>
.fc-keep-all {
    word-break: keep-all
}

<!--변경후--!>
.fc-keep-all {
    word-break: break-all
}

글자크기 폰트사이즈 확대

<!--변경전--!>
.fc-script-font {
    font: 16px/1.7 "FC Script", "FC Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF UI Text", "Segoe UI", "Segoe UI Emoji", Roboto, Meiryo, "Microsoft YaHei", "Microsoft YaHei UI", "Microsoft JhengHei", "Microsoft JhengHei UI", "Apple SD Gothic Neo", NanumGothic, "나눔고딕", "Malgun Gothic", "맑은 고딕", scriptfont
}

<!--변경후--!>
.fc-script-font {
    font: 19px/1.7 "FC Script", "FC Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF UI Text", "Segoe UI", "Segoe UI Emoji", Roboto, Meiryo, "Microsoft YaHei", "Microsoft YaHei UI", "Microsoft JhengHei", "Microsoft JhengHei UI", "Apple SD Gothic Neo", NanumGothic, "나눔고딕", "Malgun Gothic", "맑은 고딕", scriptfont
}

이미지 상하단 마진삭제

<!--변경전--!>
.text-stripe > .block,
.text-stripe > [data-ke-type=moreLess] .moreless-content > .block.first {
    margin-top: 18px !important
}

<!--변경후--!>
.text-stripe > .block,
.text-stripe > [data-ke-type=moreLess] .moreless-content > .block.first {
    margin-top: 0px !important
}

<!--변경전--!>
.text-stripe > .text-block {
    padding: 0 4px 3px;
    line-height: 37px !important;
    margin-bottom: -3px
}

<!--변경후--!>
.text-stripe > .text-block {
    padding: 0 4px 3px;
    line-height: 37px !important;
    margin-bottom: -5px
}

<!--변경전--!>
.text-stripe > .another-category.before-block,
.text-stripe > .text-block.before-block {
    padding-top: 19px !important;
    background-position: 0 -18px
}

<!--변경후--!>
.text-stripe > .another-category.before-block,
.text-stripe > .text-block.before-block {
    padding-top: 1px !important;
    background-position: 0 -1px
}

이미지 테두리 삭제

<!--변경전--!>
.block:not([data-ke-type=opengraph]) {
    background-color: #fff;
    border: 3px solid transparent;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    border-radius: 2px
}

<!--변경후--!>
.block:not([data-ke-type=opengraph]) {
    background-color: #fff;
}

본문 하단 여백 삭제

본문 하단 끝나고 바로 공감버튼이랑 프로필 부분으로 딱 붙어서 넘어가도록

<!--변경전--!>
#fc-article:not(.has-tags-trail) {
    margin-bottom: 18px
}

<!--변경후--!>
#fc-article:not(.has-tags-trail) {
    margin-bottom: 0px
}

이미지 클릭 금지 복사방지

이미지 복사방지 그리고 클릭하면 새창으로 열리곤 하는데 그거 다 없애고 아예 화면 클릭 자체 안되도록 변경

<!--변경전--!>
#fc-article [data-lightbox] {
    cursor: zoom-in
}

<!--변경후--!>
#fc-article [data-lightbox] {
    pointer-events: none
}

<!--변경전--!>
.imageblock {
    display: block !important;
    border-radius: 2px
}

<!--변경후--!>
.imageblock {
    display: block !important;
    border-radius: 2px;
    pointer-events: none
}

<!--변경전--!>
#fc-article figure.imagegridblock {
    background-color: #fff !important
}

<!--변경후--!>
#fc-article figure.imagegridblock {
    background-color: #fff !important;
    pointer-events: none
}

언더라인 떨어뜨리기

글자크기 키웠더니 언더라인이 너무 붙어있어서 좀 떨어뜨림

<!--변경전--!>
#fc-article u {
    text-decoration-line: underline
}

<!--변경후--!>
#fc-article u {
    text-decoration-line: underline;
    text-underline-position: under;
}

하이퍼링크 색상

바닥에 형광펜 밑줄그은 것처럼 하이퍼링크 보이게

<!--변경전--!>
#fc-article a[href] {
    color: var(--link-color, transparent);
    transition: color .2s
}

body.mouse #fc-article a[href]:hover,
body.touch #fc-article a[href].touch {
    color: var(--link-hover-color, transparent)
}

<!--변경후--!>
#fc-article a[href] {
    color: #01329D;
    font-weight: bold;
    border-bottom: 5px solid #FCFFA5;
    box-shadow: inset 0 0px 0 white, inset 0 -10px 0 #FCFFA5;
}

body.mouse #fc-article a[href]:hover,
body.touch #fc-article a[href].touch {
    text-decoration: none;
    background: #FCFFA5;
    color: #3372DC;
    padding-top: 0px;
}

본문 하단우측 CCL 자리 없애기

하이퍼 링크 수정후 ccl 부분이 링크로 인식되어서 색깔 칠해져서 보이는거 없애기

<!--변경전--!>
.container_postbtn .postbtn_ccl .link_ccl {
    overflow: hidden;
    padding: 10px 7px;
    margin: -10px
}

<!--변경후--!>
.container_postbtn .postbtn_ccl .link_ccl {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

카카오맵 클릭허용

카카오맵 자물쇠 누르면 잠금 풀리면서 맵 드래그랑 확대축소가 되어야 하는데 아예 자물쇠 클릭이 안됨. 클릭 허용해주는 문구 추가.

<!--변경전--!>
.map_attach * {
    letter-spacing: normal !important;
    line-height: 1.45 !important
}

<!--변경후--!>
.map_attach * {
    letter-spacing: normal !important;
    line-height: 1.45 !important;
    pointer-events: auto;
}

오픈그래프 수정

오픈그래프는 티스토리 기본제공 스타일도 나쁘지 않다고 생각해서 살짝 수정해줌. 이미지가 크게 보이고 테두리가 있는게 아무래도 보는 사람이 인식이 잘되는 느낌인거 같아서.

<!--변경전--!>
#fc-article figure[data-ke-type=opengraph] a {
    display: flex;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: auto;
    padding: 10px;
    border: none;
    background-color: var(--sticker2-color, transparent);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    border-radius: 2px;
    color: rgba(0, 0, 0, .8) !important;
    transition: box-shadow .2s, transform .2s
}

<!--변경후--!>
#fc-article figure[data-ke-type=opengraph] a {
    display: flex;
    overflow: hidden;
    position: relative;
    z-index: 950;
    height: auto;
    padding: 0px;
    border: 1px solid ##DCDCDC;
    background-color: #FAFAD2;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    border-radius: 2px;
    color: rgba(0, 0, 0, .8) !important;
    transition: box-shadow .2s, transform .2s
}

<!--변경전--!>
#fc-article figure[data-ke-type=opengraph] a .og-image {
    flex: 0 0 140px;
    overflow: hidden;
    box-sizing: border-box;
    width: 140px;
    height: 140px;
    border: 3px solid #fff;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    border-radius: 2px
}

<!--변경후--!>
#fc-article figure[data-ke-type=opengraph] a .og-image {
    flex: 0 0 140px;
    overflow: hidden;
    box-sizing: border-box;
    width: 140px;
    height: 140px;
    border: 1px solid ##DCDCDC;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    border-radius: 2px
}

본문 좌우에 미세한 여백 없애기

main.css 에 보면 화면 전체 아이템인 wrapper 에 좌우 padding이 5vw-4px 만큼 걸려 있다.

그리고 article.css 에는 #fc-article 부분에 5vw-6px 만큼 padding을 걸고 다시 동일한 숫자만큼 (-)로 margin을 주도록 되어있었다. 즉 5vw-6px만큼 – 마진을 주어서 범위를 키우고 다시 동일하게 padding으로 안으로 들어오는 식으로 되어있는 것이다.

굳이 왜 이렇게 하나 싶기도 하지만 이렇게 해야 이미지나 오픈그래프 같은 다른 요소는 본문 텍스트 폭보다 크게 만들 수 있는 것이다. -마진을 준 만큼 실제 본문영역이 확장될 수 있는 땅은 넓어져 있는 거니깐.

wrapper 안에 fc-article이 들어가 있는데 wrapper에서 준 padding이랑 fc-article에서 준 -margin이 2px 차이가 나서 이게 모바일 화면에서 볼 때 좌우에 살짝 여백이 띄워져 있는 것처럼 보였다.

그래서 똑같이 -4px로 맞춰주고, 이미지도 원래는 -margin으로 -6px 정도 설정되어 있어서 본문 폭보다 살짝 크게 보여지지만 아예 wrapper 좌우폭까지 꽉차도록 얘도 5vw-4px 만큼 역마진을 주었다.

이렇게 해야 좌우폭이 wrapper로 한정되고 그 안에서 노는거지 이미지 역마진만 -15px -20px 이런식으로 늘리다 보면 특정 모바일 기기에서는 스크롤 시 화면 좌우가 흔들리는 현상이 있었다. wapper경계 이상으로 화면에 보이진 않지만 실제 이미지 사이즈가 커져서 좌우폭이 늘어나 있기 때문에 그런걸로 추측..

아무튼 뭐 장황하게 설명했는데 직접 작업한 나밖에 못알아들을 소리인거 같고;;; 결론은 이미지를 화면 좌우에 꽉차도록 수정했다는 소리다. 그렇게 보이는게 깔끔하고 좋아서 이건 개인취향이라..

<!--변경전--!>
@media (max-width:800px) {
    #fc-article {
        padding-left: calc(5vw - 6px);
        padding-right: calc(5vw - 6px);
        margin-left: calc((5vw - 6px) * -1);
        margin-right: calc((5vw - 6px) * -1)
    }
}

<!--변경후--!>
@media (max-width:800px) {
    #fc-article {
        padding-left: calc(5vw - 4px);
        padding-right: calc(5vw - 4px);
        margin-left: calc((5vw - 4px) * -1);
        margin-right: calc((5vw - 4px) * -1)
    }
}

<!--변경전--!>
#wrapper {
        padding-left: calc(5vw - 4px);
        padding-right: calc(5vw - 4px)
    }

<!--변경후--!>
    #wrapper {
        padding-left: calc(5vw - 6px);
        padding-right: calc(5vw - 6px)
    }

이미지 본문 텍스트폭 대비 늘려서 모바일 화면 좌우 꽉차게

<!--변경전--!>
@media (max-width:600px) {

    #tt-body-page .text-stripe > .block,
    .act-wrapper {
        margin-left: -6px;
        margin-right: -6px
    }

<!--변경후--!>
@media (max-width:600px) {

    #tt-body-page .text-stripe > .block,
    .act-wrapper {
        margin-left: -15px;
        margin-right: -15px
    }

복사방지 및 코드/인용구는 드래그 복사 허용

스킨 설정에서 style.css 사용으로 하고 입력

/*블로그 불펌방지 및 특정영역 허용*/
code {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
blockquote {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}

애드센스 삽입위치들

/** 오른쪽 플로팅 고정광고 CSS **/
@media (max-width: 1770px){
#asideRight { display : none;}
}
#asideRight { 
    position:fixed;
    right:0;
    top:0;
    z-index:999;
}
#asideRight { 
margin-top: 0px;
height:100%;
width: 300px;
}

<!-- 오른쪽 플로팅 고정광고 시작-->
<aside id="asideRight" class="asideRight">
<div id="chaseRight" style="top:0px;">

<!-- 애드센스1 -->

<!-- 애드센스22 -->

</div>
</aside>
<!-- 오른쪽 플로팅 고정광고 끝 -->

애드센스 소스는 wrapper 앞쪽에 붙여넣기

본문상단 광고는 본문치환자 앞에, 본문하단 애드센스는 본문 치환자 밑이 아닌 아래 프로필영역 지정된 다음에 넣어서 좌우폭 길게 출력되도록

<div class="act-wrapper fc-shadow" id="activities">
<!--본문하단 애드센스-->
<section class="info-wrapper for-article-act">

</section>
</section>
    <!--댓글아래 애드센스-->  
</div>
</article>    
</s_permalink_article_rep>
</s_article_rep>

+210509 추가

베타4 버전 적용해서 쓰는 중인데, 추가로 수정한 부분이 있어서 기록해놓는다.

사이드바 포스트잇 기본색 수정

관리자 메뉴 스킨편집에서 포스트잇1,2,3 색상 설정하는 것 외에 기본색상으로 나오는 사이드바가 있는데, 방문자 표시 또는 방문자 그래프 플러그인을 사용했을 경우이다. 기본색상이 회색으로 되어 있어서 노란색으로 설정한 사이드바에 어울리지 않는 것 같아서 파스텔톤의 하늘색으로 변경해주었다.

#sidebar .module:not([class*=fc-sticker]) {
    background-color: #EBFCFF
}

style_main.css 에서 요 부분의 백그라운드 칼라를 변경해주면 포스트잇으로 설정한 색상외에 사이드바 모듈 기본 배경색으로 지정되는 부분이 바뀐다. 현재 사이드바 방문자 그래프의 배경색이 이것임

구독하기 버튼 (네비게이션) 우측하단 → 좌측하단으로 이동

<!--변경전-->
        [data-interface=mouse][data-safe-area=off] #links {
        position: fixed;
        z-index: 990;
        left: 100%;
        bottom: 18px;
        height: 34px;
        transform: rotate(270deg) translateY(2px);
        transform-origin: 0 100%
    }

<!--변경후-->    
        [data-interface=mouse][data-safe-area=off] #links {
        position: fixed;
        z-index: 990;
        left: 0%;
        bottom: 18px;
        height: 34px;
        transform: rotate(90deg) translateY(2px);
        transform-origin: 0 100%
    }

나는 내 티스토리 아이디로 로그인해서 블로그를 보니까 구독 버튼이 어딨는지 모르고 있었는데, 비로그인 상태나 비구독자가 접속시 네비게이션 버튼으로 구독하기 버튼이 있었다. 이게 우하단 벽에 붙어있어서, 데스크톱 버전에서 플로팅 고정광고 뒤에 가려지는 경우가 생긴다. 그래서 왼쪽으로 옮김

그밖에 포스팅에 포함시켜놨던 이미지 테스트 내용은 삭제하였다. 베타3 버전까지 있었던 문제인데 이제는 해결되었으니.

그밖에 예전 블로그 포스팅 드래그로 카피해와서 편집기에 넣고 업로드하는 방식으로 이전한 것들이 있는데 걔중에 이미지 사이즈가 매우 작게 나오는 문제가 있다. 새로고침하면 정상적으로 나오기도 하고 뭔가 이상한데 이건 아직 원인을 모르겠다. 전체가 다 그런게 아니라 몇몇 글만 해당되는 문제라 일단 냅두고 하는중…