새로운 티스토리 반응형 스킨으로 변경 (튜닝 추가)

구 티스토리 스킨은 오래되었고 요즘 웹환경과 호환이 되지 않아서 반응형으로 바꿨는데

기존에 쓰던 반응형 스킨은 어딘가 모자란 부분이 있는것 같아 검색하던중 아주 좋은 스킨을 발견하게 되어

블로그를 새롭게 단장했다

 

프로그래밍 다루는 블로그에 알맞게 좋은 가독성과 쓸데없는 장식 없이 깔끔하고 컴팩트해서 더욱 좋은것 같다.

티스토리 자체 구글 애드센스 연동 기능도 별 문제없이 호환된다.

 

 

설치하고 개인적으로 튜닝 좀 거쳤다. (튜닝하는법 아래 참고) 프로필 사진 모듈 추가 및 해당 프로필에 구 티스토리 스킨처럼 글쓰기 관리자 링크 추가해 쉽고 빠르게 글쓸수 있도록 해 두었다. 타이틀은 그냥 텍스트로 바꾸는등 개인 입맛에 맞게 튜닝한 부분도 있다.

 

제작자분이 개인 블로그에 만드는 과정을 상세히 정리해 두었기 때문에 HTML, CSS 공부하는 사람들은 참고해볼만 하다

 

해당 스킨은 Github에 올려져있고 Github 페이지란에 블로그 링크들 포함되어 있으니 Github 링크를 참고하면 된다.

 

https://github.com/nOo9ya/tistory-one

nOo9ya/tistory-one

설치법은 최대한 간단히 설명함

 

0. 위에서 받은 스킨 적당한곳에 압축해제

1. 티스토리 관리자메뉴 왼쪽 메뉴의 스킨편집 클릭

2. 오른쪽 html편집 버튼 클릭

3. 위에 받은 스킨 폴더의 html 파일 메모장으로 열어서 내용 복사후 티스토리 스킨편집란의 html 에디터에 복사 (컴퓨터 아님 티스토리 상임 꼭 확인) 그다음 오른쪽의 적용 버튼 누름

이곳에 붙여넣어야 함

4. 티스토리 스킨에디터 상단의 CSS 클릭

이쪽 클릭

5. 받은 스킨 폴더의 css 파일 메모장으로 열어서 내용 복사후 티스토리 스킨에디터 css에 붙여넣기 (위그림 참고하여 붙여넣기)

6. 그다음 스킨에디터 상단의 파일업로드 클릭 (버튼 위치 위그림 참고)

7. 파일업로드 란의 맨 아래 왼쪽의 +추가 버튼 클릭 후 받은 스킨 폴더 내의 index.xml 파일 선택

8. 그다음 다시 +버튼 눌러서 파일선택창 뜨면 받은 스킨 폴더 내의 image 폴더의 내용물 모두선택

9. 업로드 끝나면 스킨 적용 완료됨

 

 

아래는 내가 프로필이나 블로그 타이틀 등등 입맛에 맞게 튜닝한 부분들이다. 쓰고싶은 사람들은 

스킨 설치 후 아래 참고해서 적용해주면 된다.

html 파일 xml 파일을 올릴까 했는데 제작자 아닌곳에서 통째로 올리는건 예의가 아닌것 같아서 업로드는 할수 없음

 

1. 티스토리 스킨에디터 CSS란에서 /* category */ 라고 주석되어있는 부분 (ctrl f 눌러서 검색해서 찾을수 있음)

바로 윗줄에 아래 내용 붙여넣기

.blogger-profile { 
margin: 0px auto 0; 
} 
.blogger-profile .txt-profile { 
display: flex; 
margin: 5px 0 0; 
font-size: 1em; 
color: #383838; 
line-height: 20px; 
} 
.blogger-profile .txt-desc { 
display: flex; 
margin: 0px 0 0; 
font-size: 0.8em; 
color: #383838; 
line-height: 20px; 
} 
.blogger-profile .control-panel { 
display: block; 
color:#ff8149; 
margin: 0px auto; 
text-align: center; 
font-size: 0.75em; 
line-height: 20px; 
} 
.blogger-profile .thumb-profile img, .blogger-profile .thumb-profile-small img { 
  display: block; 
margin: 0px auto; 
width: 80px; 
height: 80px; 
border-radius: 50%; 
border: 5px solid #f8f8f8; 
} 
.blogger-profile .thumb-profile-middle img { 
  display: block; 
margin: 0px auto; 
width: 150px; 
height: 150px; 
border-radius: 25%; 
} 
.blogger-profile .thumb-profile-big img { 
  display: block; 
margin: 0px auto; 
width: 100%; 
height: auto; 
}

2. 티스토리 스킨에디터 HTML 란에서 <!-- Blog Options --> 주석 부분 찾아 바로 아래줄에 다음 내용 붙여넣기

<s_sidebar> 
   <s_sidebar_element> 
    <!-- 프로필 --> 
    <div class="blogger-profile"> 
        <h1>PROFILE</h1> 
		<div class="thumb-profile<s_if_var_profile-img-size>
        </s_if_var_profile-img-size>"> 
			<img src="https://tistory1.daumcdn.net/tistory/2841177/attach/21fa918caf7e4b7cbd00fbe77f3c5aa1" class="img-profile" alt="프로필사진"> 
		</div> 
		<span class="txt-profile">코브pg</span> 
		<p class="txt-desc">프로그래밍, 소프트웨어 개발 관련 블로그입니다</p> 
		<p class="control-panel" class="admin" target="_blank" id="footerAdmin">
        <a href="https://kovepg.tistory.com/manage">관리자</a> 
        <a href="https://kovepg.tistory.com/manage/entry/post">글쓰기</a></p> 
	</div>
</s_sidebar_element> 
</s_sidebar>

 

3. 티스토리 스킨에디터 HTML란에서 가장 아래 다음 코드 부분 삭제

 <div id="footer">
            <div class="footer-nav">
                <a href="https://kovepg.tistory.com/tag">태그</a>
                <a href="https://kovepg.tistory.com/guestbook">방명록</a>
                <a href="https://kovepg.tistory.com/manage" class="admin" target="_blank" id="footerAdmin">관리자</a>
            </div>
            <p class="copyright">Blog is powered by kakao / Designed by 
            <a href="http://tistory.noo9ya.com" target="_blank">nOo9ya</a></p>
        </div> <!-- footer close -->

4. 아래 내용대로 HTML 내의 해당 부분 변경

<a href="https://kovepg.tistory.com/" class="blog-logo">
       <span class="title">코브pg의 프로그래밍 블로그</span>
              <img src="https://tistory1.daumcdn.net/tistory/2841177/attach/21fa918caf7e4b7cbd00fbe77f3c5aa1" width="175" height="56" class="img-profile" alt="코브pg의 프로그래밍 블로그">
</a>



부분에서 <img src="https://tistory1.daumcdn.net/tistory/2841177/attach/21fa918caf7e4b7cbd00fbe77f3c5aa1" width="175" height="56" class="img-profile" alt="코브pg의 프로그래밍 블로그"> 
부분 삭제 

(원인은 잘 모르겠지만 프로필 모듈 추가 이후로 스킨 헤더가 제대로 표시되지 않아서 
그냥 텍스트 타이틀로 처리함 튜닝하느라 힘써서 이거까지 해결은 못하겠다)

5. 티스토리 스킨에디터의 파일업로드 기능으로 아래 수정된 xml 파일을 다운받아 티스토리 파일업로드를 통해 업로드 (원본 스킨 기반으로 수정했으며 업로드시 이름같으면 자동 덮어쓰기 됨)

index.xml

0.00MB