티스토리 꾸미기!
벨로그에서 티스토리로 옮겨볼까 생각한 가장 큰 이유는 커스터마이징의 범위가 넓다라고 생각했기 때문이다. 많은 금손님들이 티스토리 블로그의 스킨도 무료로 올려주시고 다양한 방법으로 꾸밀 수 있는 방법을 소개해주시는 걸 보면서 나도 나만의 블로그를 커스터마이징하고 싶어졌다.
티스토리 스킨 바꾸기
가장 처음 적용한 건 티스토리 스킨이었는데 Bluemiv 님의 Berry 스킨 v3.0.1을 적용해보았다. 블로그에 적용 방법을 전부 안내해주셔서 엄청 간단하게 적용할 수 있었다.
결과는 이런 느낌이다.
스킨을 적용하고 카테고리 마진도 조금 수정했다. Bluemiv 님이 올려주신 스킨 그대로 사용하면 왼쪽 사진처럼 폴더와 그 밑의 분류가 마진 없이 보여지는데 하위 분류를 확실하게 보여주고 싶어서 마진을 줘서 오른쪽 사진처럼 바꿔봤다.
똑같이 적용하고 싶은 분들이 있다면 티스토리 블로그 설정 > 스킨 편집 > html 편집 > css 에서 아래 내용을 수정하면 될 것 같다.
css에서 sub_category_list를 검색해서 아래처럼 margin을 원하는 만큼 추가하면 된다.
/* (변경) 하위 카테고리 마진 추가 */
aside.sidebar #category .tt_category ul.sub_category_list{margin-left: 20px;}코드 블럭 수정(1) - 텍스트 크기 줄이기
내용을 다 작성하고 발행 후에 화면을 확인하지 못하고 있었는데 나중에 확인하고 텍스트 크기가 너무 커서 깜짝 놀랐다. 코드 블럭의 텍스트 크기가 본문 텍스트 크기보다 크다보니 가독성이 너무 떨어져서 수정하게 되었다.
뭔가 옹졸해진 코드 블럭이 되었는데.. 모르겠다.. 일단 코드 공유..
/* (변경) 코드 블럭 코드 라인 높이 수정 */
main .common-article-container .article-body .tt_article_useless_p_margin pre{margin:1rem 0;border-radius:8px;font-size:1rem;line-height: 1.2;}
/* (변경) 코드 블럭 코드 텍스트 크기 수정 */
main .common-article-container .article-body .tt_article_useless_p_margin pre code{font-family:"D2Coding",system-ui,Apple Gothic,sans-serif;padding:1rem;box-sizing:border-box;font-size: medium;}코드 블럭 수정(2) - 코드 블럭 스타일 수정
처음에는 코드 블럭이 보기 힘든 이유가 글씨 크기 때문이라고 생각했는데 블로그를 쓰다보니 더 확실한 이유를 알게 되었다. 왜 처음엔 눈치를 못챘을까.. 아래 사진을 보면 확실히 알 수 있는데 글쓰기를 할 때 화면에서는 코드의 스타일(폰트 색상, 배경색, 주석) 등이 구분이 잘되는데 글쓰기를 완료하고 나면 왼쪽 사진처럼 스타일은 전부 사라지고 주석인지 구분도 안되고 배경색이 흰색이라 글 내용과 구분이 되지 않는다...
개발 공부하는 거 올리려고 시작한 티스토리인데 가장 큰 결함(?)을 눈치채지 못했다... 😱
변경하는 방법은 생각보다 간단한데 티스토리 환경 설정에서 코드 블럭 플러그인을 추가해주면 되는 것이었다.
적용하면 요렇게 색이 이쁘게 변한다. 나는 Atom One Dark 테마를 적용했다.
티스토리 포스트 레이아웃 바꾸기 (미완, 추후 수정 예정)
내가 적용한 스킨인 Bluemiv 님의 Berry 스킨 v3.0.1 스킨은 아래 사진 처럼 리스트 형 레이아웃만 지원하는 것 같다.(내가 잘 모르는 것일수도..) 나는 카테고리에 따라 독서 기록이나 운동 기록 같은 내용은 그리드 형 레이아웃으로 표시를 하고 싶어서 이 부분도 나중에 수정해보려고 한다.
티스토리 잔디 깔기
벨로그에서 티스토리로 블로그를 이전하면서 어떻게 하면 블로그에 글을 꾸준히 쓸 수 있을까라는 고민을 했었다.
그에 대한 나름의 해답으로 블로그에도 깃허브처럼 잔디를 깔 수 있도록 만들어서 매일 매일 포스팅 기록을 남겨보면 어떨까 라는 생각을 해봤다. 방법은 티스토리에 잔디를 깔 수 있는 방법을 소개해주신 '염초코 님의 블로그' 를 따라하기만 하면 되는 것 같았다.
스킨을 수정할때와 마찬가지로 티스토리 블로그 설정 > 스킨 편집 > html 편집 에서 올려주신 코드를 적용하면 되고 적용한 화면은 아래와 같다. 처음에는 프로필 바로 밑에 적용해보려고 했는데 이해를 못해서 약간 헤맸다.
알고보니 달력을 저런식으로 텍스트 그대로 넣으면 안되고 사이드 바에 모듈을 추가하는 것처럼 작성해야 정상적으로 확인할 수 있는 것이었다.
달력도 마찬가지로 몇가지 속성들을 수정해줬다. 바꾼 속성들은 다음과 같다.
- 라이트모드 / 다크모드 별 달력 좌우 이동 버튼의 색상
- 라이트모드 / 다크모드 별 달력 제목 색상
- 포스팅을 했을 때 바뀌는 잔디 색상
- 달력 좌우 이동 버튼과 제목에 밑줄 표시 제거
이렇게 완성!
수정한 달력의 html 전체 코드이다.
<s_sidebar_element><!-- 달력 -->
<div class="calendar">
<h1 class="sr-only"></h1>
<!-- 티스토리 달력 모듈 **을 ##으로 바꿔서 적용! -->
[**_calendar_**]
<script>
// 포스팅 올린 날짜에 색 주기
passed = document.getElementsByClassName('cal_click');
for(i=0;i<passed.length;i++){
day = parseInt(passed[i].href.split('/')[4].slice(6))
// 연속으로 올렸는지 확인
if(i>0 && day==temp+1){
cnt += 1;
} else {
cnt = 0;
}
temp = day;
// 7일마다 반복
cnt = cnt % 7;
if(cnt<1){
color = "#B7E1FF"
} else if(cnt<2){
color = "#a0d3ff"
} else if(cnt<3){
color = "#74A6DB"
} else if(cnt<4){
color = "#507CB7"
} else if(cnt<5){
color = "#335793"
} else if(cnt<6){
color = "#1E3C7A"
} else if (cnt<7) {
color = "#0F1E3D"
}
document.getElementsByClassName('cal_click')[i].style.color = color;
document.getElementsByClassName('cal_click')[i].style.background = color;
// 날짜가 두자릿수인 경우 모양이 깨져서 1로 고정시킴
passed[i].innerText=1;
}
// 아직 포스팅 하지 않은 날짜에도 모양을 주기 위해 <a> 삽입 후 1로 고정시킴
notyet = document.getElementsByClassName('cal_day')
for(i=0;i<notyet.length;i++){
if(notyet[i].innerHTML.includes('</a>')){
continue;
} else {
document.getElementsByClassName('cal_day')[i].innerHTML="<a>1</a>";
}
}
// 이전 달로 가는 버튼
document.getElementsByClassName('cal_month')[0].children[0].innerText="◀ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ";
// 연월 확인
mth = document.getElementsByClassName('cal_month')[0].children[1].innerText.split('/');
if(mth[1][0]==0){
mth[1] = mth[1][1];
}
if(parseInt(mth[1])-1==0){
premth = 12
preyear = parseInt(mth[0])-1
} else {
premth = parseInt(mth[1])-1
preyear = parseInt(mth[0])
}
if(parseInt(mth[1])+1==13){
postmth = 1
postyear = parseInt(mth[0])+1
} else {
postmth = parseInt(mth[1])+1
postyear = parseInt(mth[0])
}
// 월 표기 방식
switch(mth[1]){
case '1':
thismth = 'Jan'
break
case '2':
thismth = 'Feb'
break
case '3':
thismth = 'Mar'
break
case '4':
thismth = 'Apr'
break
case '5':
thismth = 'May'
break
case '6':
thismth = 'Jun'
break
case '7':
thismth = 'Jul'
break
case '8':
thismth = 'Aug'
break
case '9':
thismth = 'Sep'
break
case '10':
thismth = 'Oct'
break
case '11':
thismth = 'Nov'
break
case '12':
thismth = 'Dec'
break
}
document.getElementsByClassName('cal_month')[0].children[1].innerText = thismth;
// 다음 달로 가는 버튼
document.getElementsByClassName('cal_month')[0].children[2].innerText="ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ▶";
// 버튼 및 월에 커서 올렸을 시 안내 문구 수정
document.getElementsByClassName('cal_month')[0].children[0].setAttribute('title',preyear+'년 '+premth+'월의 잔디밭');
document.getElementsByClassName('cal_month')[0].children[1].setAttribute('title',mth[0]+'년 '+mth[1]+'월의 잔디밭');
document.getElementsByClassName('cal_month')[0].children[2].setAttribute('title',postyear+'년 '+postmth+'월의 잔디밭');
</script>
</div>
</s_sidebar_element>아래는 바꾼 css 속성들이다.
/* calendar */
.calendar {-ms-user-select: none;-moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;user-select: none;}
.calendar .tt-calendar {margin-top:8%;margin-bottom:10%;width:280px !important;border-collapse:collapse;}
.calendar .tt-calendar caption {font-size:1em;margin-bottom:10px;height:100%}
.calendar .tt-calendar caption a:first-child, .calendar .tt-calendar caption a:last-child {color:#63aeeb; font-size:0.375em}
/* (변경) 달력 좌우 이동 버튼의 다크모드 스타일 추가 */
.dark-theme .calendar .tt-calendar caption a:first-child,.dark-theme .calendar .tt-calendar caption a:last-child {color:#EAFCFE; font-size:0.375em}
/* (변경) 달력 제목의 밑줄을 없앰 text-decoration */
.calendar .tt-calendar caption a {vertical-align:middle;color:black;text-decoration: none;}
/* (변경) 달력 제목의 다크모드 스타일 추가 */
.dark-theme .calendar .tt-calendar caption a {vertical-align:middle;color:whitesmoke;text-decoration: none;}
.calendar .tt-calendar th, .calendar .tt-calendar td {padding:5px 0; text-align:center;}
.calendar .tt-calendar th {display:none;}
/* font-size = 높이를 결정하는 값이다 */
.calendar .tt-calendar td {font-size:1.3em; color:#bbb;}
.calendar .tt-calendar .cal_click {display:inline-block; padding:2px 8px; border-radius:2px;}
.calendar .tt-calendar td a {display:inline-block; padding:2px 8px; background:#E0E0E0; color:#E0E0E0; border-radius:2px;}
/* width = 너비를 결정하는 값이다 */
.calendar .tt-calendar {margin-top:8%;margin-bottom:10%;width:280px !important;border-collapse:collapse;}달력 추가 수정
매일 매일 글쓰기를 해보니 알게된 버그(?)인데 잔디 색상이 6일이 넘어가니 else 문에 지정한 색상으로 통일되어 버리는 현상이 있었다.
어떻게 할까 고민하다가 임시방편으로 연속값을 의미하는 cnt를 6로 나눈 나머지 색상에 대해 내가 지정한 색상이 보이도록 즉, cnt를 6으로 나눴을 때 나머지가 0~5인 숫자에 대해 내가 지정한 색상이 보이도록 수정했다. 아, 이왕이면 7일이 좋겠다 싶어 7일로 바꿨다.
코드는 위 html 코드에 반영해두었다.
티스토리 블로그 꾸미기 후기
생각보다 쉽고 간단하게 블로그를 꾸미고 바꿀 수 있어서 재미있었다. 염초코 님이 올려주신 블로그를 보면서 공감한 내용인데, 달력에 잔디가 칠해지는 방식을 github에서 하루에 커밋한 만큼 잔디 색이 진해지는 방식으로 바꿔보고 싶었다. (시간이 되면.. 해보도록 하자)
매일 매일 일상을 기록하고 공부한 내용을 정리하고 싶어서 시작한 티스토리 블로그이고 그렇기 때문에 블로그를 쓰는 것 자체만으로 동기 부여 될 수 있도록 환경을 만들어봤다. 앞으로는 꾸준히 기록을 남기는 실천만 남은 것 같다. 해보자 해보자! 화이팅!
추후 수정 예정인 항목들
- 잔디 달력 github 처럼 하루에 쓴 글 갯수만큼 색상이 진해지도록 수정하기
코드 블럭 스킨 - 폰트 색상, 배경 색상, 주석 스타일 수정하기수정 완료 (230109)- 카테고리 별로 레이아웃 다르게 표시되도록 수정하기(그리드 형 추가!)
아마.. 이번 달(2023/01/31)까지는 하지 않을까..?
'일상' 카테고리의 다른 글
| [티스토리 일지] 벨로그에서 티스토리로 이전하기 (0) | 2022.12.21 |
|---|
