티스토리 뷰

티스토리 #1 스킨 수정

티스토리 #1 스킨이 구글사이트 속도체크에서 높은 점수가 나와 당분간 이 기본 스킨을 사용하려 합니다.

사용하기 전에 제 입맛에 맞게 수정 할 예정이며 기록형으로 티스토리 #1스킨 수정한 내용을 이 포스트에 지속적으로 업데이트 할 예정 입니다.

 

마지막 업데이트: 2020/07/24

 

제목 폰트사이즈 수정하기

글을 써보니 제목 폰트사이즈가 너무 커서 줄을 넘어가는 경우가 생겨서 보기에 안좋네요.

솔직히 너무 큰건 사실 입니다. 이 부분 수정은 CSS를 수정해 주면 됩니다. 

 

방법: 스킨편집 >> CSS 에서 스타일시트를 수정해 주었습니다.

제목 크기가 커서 줄 바꿈이 되는 현상

 

CSS 151째줄 정도, tit_post 를 검색해도 됩니다.

font-size: 40px; => font-size: 25px; 으로 수정 했습니다. 

 

 

 

제목기준 상하 간격 줄이기

제목을 기준으로 윗부분, 아랫부분에 쓸데없이 간격이 큰것 같아서 줄여 줬습니다.

아래 화살표 쳐진 부분 입니다. (수정 후 모습입니다)

 

.skin_view .area_title{margin-bottom:29px;padding:10px 0 10px;border-bottom:1px solid #ebebeb;text-align:center}/* 제목위 간격 줄이기 20200722 */
.skin_view .area_title a { text-decoration:none }
.skin_view .tit_category a {font-weight:bold; color:#3db39e}
.skin_view .tit_post{margin-top:7px;font-size:25px;font-weight:bold;color:#000;line-height:50px} /* title font size 20200722 */

 

아래 빨간색으로 밑줄 친 부분이 수정한 부분 입니다.

148라인의 padding: 68px 0 45px; => padding: 10px 0 10px;

윗쪽 안쪽 여백(10px), 아랫쪽 안쪽 여백(10px)로 변경한 모습입니다.

 

151라인은 위에 언급한 타이틀 폰트사이즈 줄인 모습입니다. font-size: 40px => font-size: 25px

 

 

카테고리에 글수 나타내기

우측 상단에 있는 카테고리를 누르면 글수가 안나옵니다. 이것을 아래와 같이 글수가 나오도록 수정해 보겠습니다.

 

카테고리에 글수 나타남

 

CSS 에서 78번째 줄 쯤에 아래 줄친 부분을 찾아서 주석처리 해 주면 카테고리 뒷부분에 숫자로 포스팅 개수가 나옵니다. * 주석처리란 기능을 못하도록 처리하는 것으로 다음과 같이 앞뒤를 감싸주면 됩니다.

 /* 소스내용 */

 

 

 

티스토리 블로그 탑(TOP) 버튼 만들기

요즘 블로그 퀄리티가 좋아지고 있어서 장문의 글들이 많습니다. 애드고시 통과를 위해 1000자~2000자를 채우기 위한 것도 있고 구글이 좋아하는 정성포스팅을 위해서도 긴 글들이 많아지고 있습니다.

 

긴글을 보면서 스크롤이 아래로 내려 가면 우측에 갑자기 탑(top)버튼이 생겨서 상단으로 바로가기를 편하게 합니다.

 

탑(top)버튼 이미지는 무료 이미지 사이트에서 다양하게 받을 수 있습니다.

다운 받은 버튼 이미지는 스킨편지 >> 업로드 를 통해 업로드 합니다.

 

그런 후 html 편집에서 아래의 소스를 <body>와</body> 사이에 삽입해 줍니다.

전 추가하는 소스는 관리하기 편하게 </body> 바로 위에 입력 합니다.

 

그렇게 하면 바로 반영됩니다. 

<!-- TOP 버튼 -->
<script type="text/javascript">
$(function(){
  $("#gotop").hide();
  // 처음에는 탑이미지를 감춥니다.
  $(window).scroll(function(){
  // 스크롤을 할때
    if($(this).scrollTop() > 100){$("#gotop").fadeIn();}
    //  스크롤이 100 픽셀만큼 내려오면 탑아이콘을 fade in 합니다.
    else{$("#gotop").fadeOut();}
    // 스크롤이 100 픽셀 이하이면 탑아이콘을 fade out 합니다.
  });
});
</script>
<a href="#" id="gotop" style="display:none;position:fixed;bottom:10px;right:10px;z-index:99999999" title="Top"><img src="./images/top_btn.png" border="0"/></a>
<!--
display:none (화면에서 안보이게 합니다)
position:fixed (스크롤이 어느위치에 있든 화면에서 고정된 곳에 위치합니다)
bottom:10px (하단에서 10px 위에 위치합니다)
right:10px (오른쪽에서 10px 왼쪽에 위치합니다)
z-index:99999999 (레이어를 99999999 위에 띄웁니다-탑아이콘을 최상단에 띄우기위해서)
-->

 

 

 

계속 업데이트 예정...

댓글
댓글쓰기 폼