[티스토리 스킨] blue2D

티스토리 스킨 공유

(스킨 예시는 현재 블로그입니다.)

2022-12-16일 부로 다른 스킨으로 변경하게 되었습니다.

 

개인 맞춤형으로 만들어서 확장성이 안좋아요. 사용하실분은 아래글을 잘 읽어주세요 :)

* html파일과 css에 주석을 안 지우고 배포해서 수정위치 찾기는 어렵지 않을겁니다

* html,css 는 몇번 끄적여본게 전부인 사람이 만든 스킨입니다. 반응형을 고려하여 만들었으나, 이상한 버그가 있을 수 있어요 

- 스킨 다운및 적용

1. 아래 링크에 들어갑니다. (스타 눌러주시면 감사합니다)

https://github.com/devxb/blue2DTistorySkin

GitHub - devxb/blue2DTistorySkin: 티스토리 심플 스킨입니다.

2. 초록색 code 버튼을 누르시고 Download ZIP을 누르세요

3. 티스토리 블로그 관리 화면에 들어가세요

4. 스킨 변경 버튼을 누르고 스킨등록 버튼을 눌러 이 스킨을 등록해줍니다.

- 2번에서 다운받은 압축파일을 풉니다.

- 압축 해제된 폴더 안에 blue2D라는 폴더로 들어가서 안에 있는 모든 파일을 등록해주세요.

- blue2D안에있는 images안의 모든 파일을 등록해주세요.

5. 등록된 스킨을 적용하여 사용하시면 됩니다

 

- 스킨 편집

1. 본문의 저자 정보 수정하기. (아래사진)

- 다운받은 스킨폴더의 skin.html 파일을 텍스트 편집기(ex.메모장)로 엽니다. (혹은, 티스토리 블로그 관리 메뉴의 스킨편집으로)

- ctrl+F(맥북은 command+F)로 글 저자 정보 텍스트를 찾아주세요 

아래와 같은 코드블록을 찾아서 설명에 맞게 수정해줍시다.

<!-- 글 저자 정보 -->
	<div class = "articleMainAuthor">
		<img class = "articleMainAuthorImg" src = "https://tistory1.daumcdn.net/tistory/4106100/attach/d9b8eae7f0c64d6795603a7ff8c66305"/>
		<div class = "articleMainAuthorInfo">
			<span class = "author"> devxb </span>
			<span class = "blogInfo"> https://medium.com/@develxb </span>
			<!-- 아랫줄 href 에 이동할 사이트를 입력하세요. -->
			<a href = "여기에 이동할 사이트 주소를 입력하면됩니다." class = "additionalBtnWrap">
				<!-- 아랫줄 Github에 보여질 글씨를 입력하세요.-->
				<div class = "additionalBtn" align="center"> <span class = "additionalBtnText"> 여기에 버튼에 보여질 글씨를 입력하면 됩니다. </span> </div>
			</a>
		</div>
	</div>
<!-- 글 저자 정보 끝-->

 

 

2. 개인 프로젝트 홍보용 블록 추가하기

제 블로그 하단을 보면 제 프로젝트 카드들이 있는걸 볼 수 있습니다.

(프로젝트 카드들은 기본적으로 주석처리 되어있어서 적용시 보이지 않습니다.)

 

우선 1번과 마찬가지로 skin.html 파일을 텍스트 편집기(혹은 스킨편집)으로 열어, 아래와 같은 코드블록을 찾아줍시다.

(만약 주석이 걸려있다면 주석을 해제해주세요)

<hr style="border: solid 1px #D9D9D9; border-radius : 15px; width : 600px; margin-top : 20px; margin-bottom : 20px;" align = "center"/>
<div class = "articleListMyProjects">
	<span class = "articleListMyProjectsTitle" align = "left"> <span style = "color : #6470E7; font-size : 24px;"> ❤ </span> My projects </span>
	<div class = "articleListMyProjectsElementWrap">
		<div class = "articleListMyProjectsElement">
			<a href = "https://github.com/devxb/commitcombo">
				<img src = "" class = "articleListMyProjectsImg" align = "center"/>
				<span class = "articleListMyProjectsElementText"> 
					Commitcombo  깃허브 커밋기록을 아름답게 꾸미세요 
					<br> Click here!
				</span>
			</a>
		</div>
	</div>
</div>
<hr style="border: solid 1px #D9D9D9; border-radius : 15px; width : 600px; margin-top : 20px; margin-bottom : 20px;" align = "center"/>

 

아래 코드의 src에 적용할 프로젝트 이미지를 적으시고

<img src = "프로젝트 이미지 주소" class = "articleListMyProjectsImg" align = "center"/>

 

아래 코드에 적고싶은 내용을 적으면 됩니다.

<span class = "articleListMyProjectsElementText"> 
Commitcombo  깃허브 커밋기록을 아름답게 꾸미세요 
<br> Click here!
</span>