[ Tistory ] 도메인 구입과 22년도 리뉴얼한 티스토리 설정

먼저 달라진 점은 Gabia에서 제 이름으로 된 도메인을 구입하여

sangjun.xyz --> psj-study.tistory.com로 2차 도메인을 통해 접속되게 만들었습니다.

 

앞으로 블로그에 접속하실 때 sangjun.xyz 많은 이용부탁드립니다.ㅎ

 

 

1. 티스토리 스킨 변경

- 후보로 봐둔 4가지 #심플형 스킨들 중에 결국 베이스 캠프로 갈아타게 되었다.

베이스 캠프로 정한 이유는 이렇다.

1. IT카테고리에 어울리는 UI를 가지고 있는가

2. 스킨이 올드해보이지 않고 부드러운 느낌을 가지고 있는가

3. 모바일에서 UI가 깔끔하게 구현되어 있는가로 결국 최종 선택된 것이 베이스 캠프였다.

 

후보로 뽑은 나머지 스킨들도 정말 많은 분들이 이용하시는 좋은 스킨임은 틀림없다.

 

2. 이전 스킨에서 쓰던 설정들 Migration

- 소스코드 하이라이터 ( head부분에 삽입 )

	<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark-reasonable.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>

- 소스코드 테두리 둥글게

code {
    border-radius: 5px;
    font-family: "Consolas", "Sans Mono", "Courier", monospace;
    font-size: 1.0rem;
    line-height: 130%;
    margin: 0.5rem auto;
}

- 소제목 서식 적용 --> 베이스 캠프 소제목 적용에 버그가 있어 실패

 

3. 베이스 캠프 설정 커스터마이징

- 본문과 이미지들 그림자 설정

--> 베이스 캠프 CSS내 에서는 본문의 이미지에 따로 img태그를 붙이지 않아서 img전체에 효과를 준 다음에

적용되지 않아야할 클래스들의 효과는 제거해줬다. 자바스크립트로 가능할 수 있는데 귀찮다..ㅎ

img{
	   box-shadow: 0px 0px 10px 5px #cccccc;
     border-radius:8px;
}

.menu-opener img{
	     border-radius:0;
     box-shadow: none;
}
#side-menu .panel .close-btn img{
		     border-radius:0;
     box-shadow: none;
}
.category-list .link_tit img {
		     border-radius:0;
     box-shadow: none;
}
.category-list .link_item img{
		     border-radius:0;
     box-shadow: none;
}
.category-list .sub_category_list img{
		     border-radius:0;
     box-shadow: none;
}
.comment-holder .author-meta img{
		     border-radius:0;
     box-shadow: none;
}
.comment-holder .author-meta .name img{
		     border-radius:0;
     box-shadow: none;
}
.logo-holder img {
		     border-radius:0;
     box-shadow: none;
}
.related-articles img{
		     border-radius:0;
     box-shadow: none;
}
.prev-next-article img{
		     border-radius:0;
     box-shadow: none;
}