180717 티스토리 스킨 #4 제작 일지

뭔가 마무리가 되어가는 기분이네요. 항상 언급하던 완성도는 일단 이제까지 만들어오던 스킨 중에선 가장 높은듯합니다.

사이드바에 소소한 변화를 줬습니다. 프로필 영역과 방문자 영역을 추가하고, 달력을 조금 더 꾸몄습니다.

묘한오빠님 말씀처럼, 반복적으로 영상을 봐야 하는 건 굳이 성질 급한 사람이 아니더라도 귀찮아할 수 있다는 걸 예전부터 인지하고 있었습니다. 이런저런 시도를 해보다 간단하게 높이를 조절하는 것이 가장 깔끔해 보여서 높이를 조절했습니다.

로딩 이미지를 변경했습니다. 이 디자인을 참고했는데, 뭐 크게 비슷해 보이진 않네요.

공감 버튼을 수정했습니다. 앞서 이것을 시도했다가 Sonylove님께서 신고 버튼은 사라지면 안 된다 하셔서 혹시 잘못 수정하다 약관을 위배하게 될까 봐 박스를 중앙정렬만 시켜놨는데, 신고버튼이 보이기만 하면 되는 것 같아 버튼을 조금씩 수정했습니다.

크롬 개발자 도구로 공감 수를 100까지 늘려봤는데, 세자릿수까진 아무 문제가 없어 보이네요.

.container_postbtn {
    display: flex;
    justify-content: center;
}

.container_postbtn label {
    display: block!important;
    height: auto!important;
    line-height: 50px!important;
    padding: 0!important;
    cursor: url(./images/Link.cur), pointer!important;
}

.postbtn_ccl, .container_postbtn .ico_bar, .container_postbtn .ico_sns, .uoc-text {display: none!important}

.postbtn_like {border: 0 !important;}

먼저, 공감 버튼이 든 박스를 중앙정렬합니다.

그 후, !important 떡칠해주며 티스토리가 집어넣은 css들을 없앱니다.

.uoc-icon {
    width: 52px;
    text-align: center;
    border: 1px solid #999;
    border-radius: 200px;
    background-image: url("./images/heart.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.ico_like {opacity: 0}

.uoc-count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFDFD7;
    font-family: 'InterGTM'!important;
}

.ico_report {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

그다음엔 적절히 수정만 하면 끝납니다.

* 그 외 사소한 변화들

- 태그 부분과 아카이브 부분에서 글 목록을 제대로 볼 수 없던 문제를 해결했습니다.

- 텍스트를 입력하는 부분의 높이가 자동으로 조절되도록 하였습니다.

- 그 외 정말 자잘한 변화들...

뭔가 마무리가 되고 있다는 느낌이 강하게 드는 게 처음이네요. 더욱 정진하여 깔끔하게 완성하도록 하겠습니다.