내 생각으로는 개발자분들이 타 블로그보다 티스토리 블로그를 선호하는 이유는 자기자신만의 스킨이나 폰트 등으로 커스텀 가능하다는 점이라고 생각한다.
이에 따라 나 또한 기존 스킨을 사용하면서 조금 바꿨으면 하는 점이 몇개 있었는데
1) 코드 블럭 Font 변경 : D2coding
2) 게시글 max-width 값 변경
3) Book Club 스킨 홈 화면 가로 한 줄 배치 게시글 수 변경
4) 전체 Font-family 변경
4개 정도 되었다.
1) 코드 블럭 Font 변경 : D2coding
가장 우선으로 한 것은 1번, 코드 블럭 폰트를 D2coding로 변경하는 것 이었다. 더 자신만의 커스텀을 좋아하는 개발자들은 따로 JS를 만들어 사용했는데
난 그냥 간단하게
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
margin: 0;
padding: 0;
}이 CSS 부분에서 code를 제외하고 아래와 같이 따로 설정하였다.
code {
font-family: 'd2coding';
}
2) 게시글 max-width 값 변경
게시글을 보다보니 가로축이 너무 좁은 것 같이 이 부분도 간단하게 바꾸었다. Book Club의 default width 길이는 1080px였는데 게시글의 Header과 Body의 max-width를 1680px까지 늘렸다.
#header .inner {
position: relative;
max-width: 1680px;
margin: 0 auto;
}
#container .content-wrap {
max-width: 1680px;
margin: 0 auto;
padding: 0 20px;
}
그리고 max-width를 길리다 보니 오른쪽의 네비게이션과 게시글을 분리 시켜주는 하나의 border 위치가 애매 해졌는데 margin값 변경을 해주었다.
#container .content-wrap:before {
content: "";
position: absolute;
top: 0;
left: 50%;
z-index: 10;
width: 1px;
height: 100%;
margin-left: 400px;
background-color: #eee;
}
3) Book Club 스킨 홈 화면 가로 한 줄 배치 게시글 수 변경
이 스킨의 디폴트는 가로 한 줄의 세개의 게시글을 나타냈는데 2번에서 max-width를 바꾸다보니 게시글의 사진이 늘어나 보기가 안좋아 가로 한 줄 게시글 갯수를 4개로 변경하였다.
CSS값을 보니 %를 통하여 3개로 설정 한 것으로 확인 되었고 width값을 100/4 = 25% 이하로 설정하였고 margin 값 또한 수정하였다.
.post-item {
float: left;
width: 23.081081081081081%;
margin: 0 0 2.4% 2.478378378378378%;
}
.post-item:nth-child(4n+1) {
clear: both;
margin-left: 0;
}그리고 3n+1 -> 4n+1로 변경하여 게시글을 정리하였다.
4) 전체 Font-family 변경
'AppleSDGothicNeo' 체도 좋아하지만 'NanumBarunGothic' 체을 더 선호하여 해당 font로 바꾸었다.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css">
HTML에 폰트의 최신 버전을 가져올 수 있도록 하였고
body {
-webkit-text-size-adjust: 100%;
font-weight: 400;
font-family: 'NanumBarunGothic','AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
color: #555;
}
body 쪽의 font-family에 'NanumBarunGothic' 을 추가하였다.
앞으로도 맘에 안들거나 변경하고 싶은 점이 생기면 지속적으로 변경할 예정이다.
이 게시글이 블로거들에게 도움이 되었으면 좋겠고 게시글 업데이트를 진행하며 새로운 블로그를 다시 만들 때 참고 자료로 쓸 것 이다.
댓글