티스토리 기본 스킨만으로 예쁘게 만들기

Poster 스킨만큼 잠재력 높은 스킨이 또 없습니다.

Poster 스킨을 예쁘게 만드는 법을 알아보겠습니다.

 

 

1. 커버 설정

Poster 스킨은 커버 기능이 최고의 하이라이트라고 할 수 있는데,

안 쓰는 분이 많더라고요 😅

꾸미기>스킨 편집으로 들어가셔서

 

"커버"를 눌러주세요!

 

"커버 아이템 추가" 를 눌러주세요!

  

"슬라이더" 로 설정하고 "저장" 버튼을 눌러주세요!

 

그리고 한 번 더 "커버 아이템 추가"를 눌러주시고

 

"리스트" 로 설정하고 저장해주세요!

 

훨씬 더 깔끔해졌음을 알 수 있습니다.

 

적용하기 전 모습

 

 

 

또 (저 사진에는 이미 적용되어 있지만) 버튼이 딱딱하지 않고 부드럽게 border-radius를 설정해주겠습니다!

코딩 모르시는 분들도 쉽게 따라하실 수 있어요~ 

"html 편집"을 눌러주시고,

 

</head> 바로 위에

	<style>
		#header h1 {
			font-weight:400
		}
		p, a, h1, h2, h3, h4, h5, h6, span, .category,.post-meta {
      transform: skew(-0.1deg);
    }
		code {
			word-spacing:3px
		}
		.btn, .view {
			transition: 0.2s;
			border-radius:5px;
		}
		img, textarea, button, .next, .prev, .thum, figure {
			border-radius:5px
		}
		.table-wrap th {
			transform: skew(-0.1deg);
		}
		button {
			outline:none
		}
	</style>

라고 입력해주세요!

 

(이렇게 하시면 됩니다!)

 

그럼 버튼과 댓글창 등등이 둥글둥글 귀여워지고,

버튼 오버효과가 좀 더 부드럽게 나타나는 것을 확인할 수 있습니다.

깨져보이는 폰트가 잘 보이는건 덤!

 

마지막으로 "나 티스토리에 있는 폰트들 다 싫어! 깔끔한 폰트로 통합할거야!" 하시는 분들은

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css">
	<style>
		#header h1 {
			font-weight:400
		}
		p, a, h1, h2, h3, h4, h5, h6, span, .category,.post-meta {
      transform: skew(-0.1deg);
			font-family: 'NanumSquare', sans-serif !important;
    }
		code {
			font-family: 'NanumSquare', sans-serif !important;
			word-spacing:3px
		}
		.btn, .view {
			transition: 0.2s;
			border-radius:5px;
		}
		img, textarea, button, .next, .prev, .thum, figure {
			border-radius:5px
		}
		.table-wrap th {
			transform: skew(-0.1deg);
		}
		button {
			outline:none
		}
	</style>

를 </head> 위에 입력하시면 됩니다~

(제 티스토리가 바로 이렇죠!)

 

마지막으로 이것들은 다 이 스킨의 모바일 모드에 적용이 안되기 때문에

모바일로 자동변경을 허용하지 않게 만들겠습니다.

꾸미기>모바일로 들어가셔서,

 

사용하지 않음으로 설정하고,

 

저장!

 

모바일에서도 예쁜 모습이 적용됨을 알 수 있습니다 :D

 

 

 

좋은 팁이 되었길 바랍니다!

(댓글로 궁금한 점을 달아주시면 답변드리겠습니다~)