본문 바로가기
Life/IT 인터넷

티스토리 스킨 꾸미기 및 코드 모음

by sugarlessgum 2023. 11. 17.

 

 

티스토리 스킨 꾸미기 및 코드 모음

티스토리 블로그를 운영하면서 제가 사용 중인 코드들을 모아봤습니다. 여러 코드 중에 불펌을 방지하는 코드나, 자동 목차를 생성해 주는 코드 등 여러 가지 코드를 적용 중이었네요. 다들 유용해서 잘 쓰고 있는 것 같습니다. 보다가 유용해 보이는 코드가 있으시다면 적용해 보세요~!
 

목차

     

     

    1. 스크롤 따라다니는 사이드바

    사용방법

    코드 입력 후 자동 적용됨 
     

    코드 위치

    구분 : css
    위치 :  맨 아래에 코드 추가

    #aside {
  position: sticky;
  position: -webkit-sticky;
  top: -60px;
}

     

    2. 유튜브 반응형 스크립트

    코드 위치

    구분 : html
    위치 :  </body> 상단

    <!-- 유튜브 반응형 스크립트 Start -->
<script>
  $(window).resize(function() {
    resizeYoutube();
  });
  $(function() {
    resizeYoutube();
  });

  function resizeYoutube() {
    $("iframe").each(function() {
      if (/^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src"))) {
        $(this).css("width", "100%");
        $(this).css("height", Math.ceil(parseInt($(this).css("width")) * 480 / 854) + "px");
      }
    });
  }
</script>
<!-- 유튜브 반응형 스크립트 End -->

     

    3. 자동 목차 생성

    사용방법

     (1) jquery.toc.min 업로드
     - 스킨 편집 ▶ 파일 업로드 ▶ 적용하기

    jquery.toc
    0.00MB

     
     

     (2) 코드 입력
    - 아래 코드 위치 참조

     (3) 목차 자동생성 서식 글 작성
     - 서식 관리 ▶ 서식 쓰기 ▶ html 모드로 아래 코드를 입력 ▶ 저장

    <div class="book-toc">
<p data-ke-size="size16">목차</p>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
</div>

     
    (4) 목차 생성하기
     - 원하는 글 ▶ 서식 넣기 ▶ 저장 후 자동목차 생성 확인

     

    코드 위치

    구분 : html
    위치 :  </body> 상단

    <!-- 자동 목차 -->
<script src="./images/jquery.toc.min.js"></script>

<!-- 자동 목차 시작 -->

<script>
const table = '<div class="book-toc"><p>목차</p><ul id="toc"></ul></div>';

if ( $( ".entry-content h2" ).length > 1 ) {

$('.entry-content h2:first-of-type').before(table);
}
</script>
<script>
$(function(){
$("#toc").toc( {content: ".entry-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});

</script>

<!-- 자동 목차 끝 -->

     
    구분 : css
    위치 :  맨 아래

    /* 자동 목차 스타일 */

.book-toc{
	position:relative;
	width:fit-content;
	padding:20px;
	border-radius:8px;
	box-shadow:0 0 15px rgba(0,0,0,0.1);
	border:1px solid #a68c69;
	background-color:#f9f3e9
	}
.book-toc p{
	font-weight:700;
	font-size:1.2em!important;
	color:#8a704c;
	border-bottom:2px solid #a68c69;
	margin-bottom:15px;
	padding-bottom:5px
	}
#toc *{
	font-size:18px;
	color:#7b6145!important
	}
#toc{
	padding:0 20px 0 25px
	}
#toc a:hover{
	font-weight: bold;
	text-decoration: none;
	color:#a68c69
	}
#toc > li{
	padding-left:0;
	text-indent:0;
	list-style-type:none;
	margin-bottom:10px;
	margin-top:7px;
	position:relative
	}
#toc > li:before{
	content:'';
	position:absolute;
	left:-20px;
	top:50%;
	transform:translateY(-50%);
	color:#a68c69
	}
#toc > li > a{
	text-decoration:none;
	font-weight:700;
	border-bottom:1px dotted #a68c69;
	transition:color .3s ease
	}
#toc > li > ul{
	padding-left:20px
	}
#toc > li > ul > li{
	font-size:1em
	}
#toc > li > ul > li > a{
	font-size:1em;
	text-decoration:none
	}
#toc > li > ul > li > ul{
	padding-left:20px
	}
#toc > li > ul > li > ul > li{
	font-size:.92em;
	}
#toc > li > ul > li > ul > li > a{
	font-size:.92em;
	text-decoration:none
}

     

     

    4. 인용구 닫기 따옴표 추가

    사용방법

     인용구 생성 및 글 작성 완료 후 자동으로 닫기 따옴표 추가됨

     

    코드 위치

    구분 : css
    위치 :  맨 아래

    /* 인용구 닫기 따옴표 추가 */
#tt-body-page blockquote[data-ke-style='style1']::after {
  content: '';
  display: block;
  background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0;
  padding-top: 34px;
  transform: rotate(180deg);
}

     

     

    5. 블로그 글 내용 드래그 금지

    사용방법

    코드 입력 후 자동 적용됨. 단, 플러그인에서 마우스 오른쪽버튼 클릭 금지를 적용해제해야 함.
     

    코드 위치

    구분 : css
    위치 :  맨 아래

    /*블로그 글 내용 드래그 금지*/
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}

     

    6. 폰트 스타일 변경

    사용방법

    코드 입력 후  자동 적용됨

     

    코드 위치

    구분 : css
    위치 :  맨 위 부분, 기존 코드 덮어씌우기

    /* 폰트 스타일 */

@charset "utf-8";
@font-face {
    font-family: 'SUITE-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}



/*
 *
 * CSS CONTENTS:
 *
 * 01. Web Font
 * 02. Type Selector Reset
 * 03. Accessibility Navigation
 * 04. Layout Selector
 * 05. Components
 * 06. Entry Content
 * 07. Comment
 * 08. Aside(sidebar)
 * 09. ETC
 * 10. Option(Color Type & List Type)
 * 11. Retina Display
 * 12. Media Screen
 *
 */

/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

/* Type Selector Reset */
body {
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
	font-family: 'SUITE-Regular', sans-serif;
	font-size: 1em;
	line-height: 1.25;
	color: #555;
}
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 100%;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
	margin: 0;
	padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
	display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
	overflow: visible;
	cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
	-webkit-appearance: none;
}
input, select, textarea, button {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 100%;
	border-radius: 0;
}
button {
	overflow: visible;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
ul li {
	list-style: none;
}
img, fieldset {
	border: none;
	vertical-align: top;
}
hr {
	display: none;
}
a, a:link {text-decoration:none; color:#555;}
a:visited {text-decoration:none;}
a:hover, a:focus {text-decoration:underline; color: #222;}
a:active {text-decoration:none;}

    ※ 폰트 사이트 : 눈누

     

    눈누

    상업용 무료한글폰트 사이트

    noonnu.cc

     

     

    7. 상단 로고 크기 변경

    사용방법

     블로그 상단에 로고의 크기를 변경해 줍니다. 원하는 사이즈를 아래 코드 위치에 들어가 가로/세로 크기 조정 가능합니다.

    코드 위치

    구분 : html
    위치 :  (50~100번째 줄 근처) 아래 코드 참고하여 검색 후 확인, 크기 조정

    <a href="https://sugarlessgum.tistory.com/">
<s_if_var_logo>
<img src="" alt="DataT-Base"style="width:250px; height:60px;">
</s_if_var_logo>
<s_not_var_logo>
DataT-Base
</s_not_var_logo>

     

     

    8. 콘솔창(관리자 모드) 차단 스크립트

    사용방법

     (1) 코드 삽입 후 '경고문', '강제 이동시킬 특정 사이트' 입력

    (2) 블로그 이용자가 f12 관리자모드를 실행시킬 경우 경고문과 함께 특정 사이트로 강제 이동됨.
     

     

    코드 위치

    구분 : html
    위치 :  </body> 상단에 추가

    <!--콘솔창 차단 스크립트-->
<script>
!function() {
  function detectDevTool(allow) {
    if(isNaN(+allow)) allow = 100;
    var start = +new Date(); 
    debugger;
    var end = +new Date(); 
    if(isNaN(start) || isNaN(end) || end - start > allow) {
      // 개발자 도구가 open 된것을 감지했을때 실행할 코드 삽입
      alert('개발자 도구가 감지되었습니다!');
      document.location.href="https://sugarlessgum.tistory.com/entry/%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC%EA%B0%80-%EA%B0%90%EC%A7%80%EB%90%98%EC%97%88%EC%8A%B5%EB%8B%88%EB%8B%A4";
    }
  }
  if(window.attachEvent) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        detectDevTool();
      window.attachEvent('onresize', detectDevTool);
      window.attachEvent('onmousemove', detectDevTool);
      window.attachEvent('onfocus', detectDevTool);
      window.attachEvent('onblur', detectDevTool);
    } else {
        setTimeout(argument.callee, 0);
    }
  } else {
    window.addEventListener('load', detectDevTool);
    window.addEventListener('resize', detectDevTool);
    window.addEventListener('mousemove', detectDevTool);
    window.addEventListener('focus', detectDevTool);
    window.addEventListener('blur', detectDevTool);
  }
}();
</script>
<!--콘솔창 차단 스크립트 끝-->

     

     

    9. 제목, 소제목 꾸미기 (좌측 사각블럭, 밑줄)

    사용방법

    코드 입력 후 자동 적용됨 
     

     

    코드 위치

    구분 : css
    위치 :  entry content 부분, 기존 코드 덮어씌우기

    /* Entry Content */

.entry-content h1 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.6875em;
	line-height: 1.5;
	color: #000;
}
.entry-content h2 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;	
  border-style: solid;
  border-width : 0px 0px 1px 14px;
  border-color: #0944b9;
  background-color: #fff;
  padding: 6px 11px;
}
.entry-content h3 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.3125em;
	line-height: 1.5;
	color: #000;
	border-style: solid;
  border-width : 0px 0px 1px 14px;
  border-color: #4374D9;
  background-color: #fff;
  padding: 6px 11px;
}
.entry-content h4 {
	clear: both;
	margin: 29px 0 22px;
	font-weight: 400;
	font-size: 1.125em;
	line-height: 1.5;
	color: #000;
	border-style: solid;
  border-width : 0px 0px 0px 13px;
  border-color: #f77d19;
  background-color: #fff;
  padding: 6px;
}

     

     

    10. 인용문 드래그 허용

    사용방법

    HTML 모드에서 인용문 시작과 끝 부분에 각각 <code>, </code> 입력 시 해당 부분은 드래그 허용됨
     

    코드 위치

    구분 : css
    위치 :  맨 아래

    /*code pre 코드블럭 | blockquote 인용문 드래그 허용*/
code, pre, blockquote {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;user-select: text !important;
}

     

     

    11. 본문 글씨 크기 변경

    사용방법

    원하는 폰트 크기를 아래 코드 위치에서 변경
    ※추천 크기
     font-size : 1.15em
     line-height : 2.3
     

    코드 위치

    구분 : css
    위치 :  Ctrl+F로 'entry-content p' 검색
     - entry-content h1 / h2 / h3 / h4 : ‘제목’ 폰트의 설정
     - entry-content p : ‘본문’ 내용의 글씨 크기

    }
.entry-content p {
	margin-bottom: 32px;
	word-break: break-word;
	font-size: 1.125em;
	line-height: 2;
	color: #555;
}

     

     

    12. 리스트, 표 글씨 크기 변경

    사용방법

    원하는 폰트 크기를 아래 코드 위치에서 변경
    .entry-content ul li : 점 리스트
    .entry-content ol li : 숫자 리스트
    .entry-content table : 표
    ※ 리스트 폰트 추천 크기
     font-size : 1.15em
     line-height : 2.3
    ※ 표 폰트 추천 크기
     font-size : 1em
     line-height : 2
     

     

    코드 위치

    구분 : css
    위치 :  Ctrl+F로 'entry-content ul li' 검색

    }
.entry-content ul li {
	position: relative;
	margin-bottom: 10px;
	font-size: 1.15em;
	line-height: 2.3;
	color: #666;
	list-style: inherit;
}
.entry-content ol {
	list-style: decimal inside;
	margin-bottom: 22px;
}
.entry-content ol li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 16px;
	font-size: 1.15em;
	line-height: 2.3;
	color: #666;
	text-indent: -15px;
	list-style: inherit;
}
.entry-content img.alignleft {
	float: left;
	margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
	display: block;
	margin: 0 auto 22px;
}
.entry-content img.alignright {
	float: right;
	margin: 0 0 22px 22px;
}
.entry-content blockquote {
	margin-bottom: 40px;
	padding: 16px 20px;
	border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
	margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
	margin-top: 0;
}
.entry-content table {
	width:100%;
	margin-bottom: 22px;
	border: 1px solid #e6e6e6;
	border-collapse: collapse;
	font-size: 1.15em;
	line-height: 2.3;
	color: #666;
}

     

     

    13. 제목 바탕 투명도 변경

    사용방법

    제목의 바탕 투명도를 아래 코드 위치에서 조절
    ※추천 투명도
    background-color: rgba(0,0,0,0.55);
     

    코드 위치

    구분 : css
    위치 :  Ctrl+F로 'post-cover:before' 검색

    }
.post-cover:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.25);
}

     

     

    14. 제목 굵기 변경

    사용방법

    제목 폰트의 두께를 아래 코드 위치에서 조절
    ※추천 굵기 (기본값:300)
    font-weight: 750;
     

    코드 위치

    구분 : css
    위치 :  Ctrl+F로 'post-cover h1' 검색

    }
.post-cover h1 {
	max-width: 1080px;
	margin: 0 auto;
	font-weight: 750;
	font-size: 2.125em;
	line-height: 1.2352;
	color: #fff;
}


     

     

    15. F12 관리자모드 차단 스크립트

    사용방법

    코드 입력 후 자동 적용
     

    코드 위치

    구분 : html
    위치 :  </body> 상단에 추가

    <script language="JavaScript">
var _0x5540=['metaKey','event','shiftKey','467012ulvaJz','229983hyzlIQ','97wuigqX','90214ZqbuhT','stopPropagation','keyCode','cancelBubble','765086SkkSuE','preventDefault','ctrlKey','11257IlTibu','onload','addEventListener','platform','1795947LXkqyV','549423qvGApi'];var _0x1400=function(_0xa7dd9f,_0x4099e3){_0xa7dd9f=_0xa7dd9f-0x9b;var _0x554000=_0x5540[_0xa7dd9f];return _0x554000;};var _0x428785=_0x1400;(function(_0x33a4f7,_0x9bee6d){var _0x275a1d=_0x1400;while(!![]){try{var _0x56a62c=-parseInt(_0x275a1d(0xa2))+parseInt(_0x275a1d(0x9d))*-parseInt(_0x275a1d(0xa8))+parseInt(_0x275a1d(0xad))+-parseInt(_0x275a1d(0xa6))+parseInt(_0x275a1d(0xa7))+-parseInt(_0x275a1d(0xa9))+parseInt(_0x275a1d(0xa1));if(_0x56a62c===_0x9bee6d)break;else _0x33a4f7['push'](_0x33a4f7['shift']());}catch(_0x27e007){_0x33a4f7['push'](_0x33a4f7['shift']());}}}(_0x5540,0x90a36),window[_0x428785(0x9e)]=function(){var _0x26e8f7=_0x428785;function _0x383326(_0x1a8d80){var _0x239d3d=_0x1400;_0x1a8d80[_0x239d3d(0xaa)]?_0x1a8d80[_0x239d3d(0xaa)]():window[_0x239d3d(0xa4)]&&(window[_0x239d3d(0xa4)][_0x239d3d(0xac)]=!0x0),_0x1a8d80['preventDefault']();}document[_0x26e8f7(0x9f)]('contextmenu',function(_0x486650){var _0x7d6c4a=_0x26e8f7;_0x486650[_0x7d6c4a(0x9b)]();},!0x1),document['addEventListener']('keydown',function(_0x511cd1){var _0x1d0c94=_0x26e8f7;_0x511cd1['ctrlKey']&&_0x511cd1[_0x1d0c94(0xa5)]&&0x49==_0x511cd1['keyCode']&&_0x383326(_0x511cd1),_0x511cd1[_0x1d0c94(0x9c)]&&_0x511cd1[_0x1d0c94(0xa5)]&&0x43==_0x511cd1[_0x1d0c94(0xab)]&&_0x383326(_0x511cd1),_0x511cd1[_0x1d0c94(0x9c)]&&_0x511cd1['shiftKey']&&0x4a==_0x511cd1['keyCode']&&_0x383326(_0x511cd1),0x53==_0x511cd1['keyCode']&&(navigator[_0x1d0c94(0xa0)]['match']('Mac')?_0x511cd1[_0x1d0c94(0xa3)]:_0x511cd1[_0x1d0c94(0x9c)])&&_0x383326(_0x511cd1),_0x511cd1[_0x1d0c94(0x9c)]&&0x55==_0x511cd1['keyCode']&&_0x383326(_0x511cd1),0x7b==event[_0x1d0c94(0xab)]&&_0x383326(_0x511cd1);},!0x1);});
</script>

     

     

     

    15. 링크 새창으로 열기 일괄 해제 코드

    사용방법

    코드 입력 후 자동 적용
     

    코드 위치

    구분 : html
    위치 :  </body> 상단에 추가

    <script>
$(document).ready(function() {
	Array.from(document.querySelectorAll('a[target="_blank"]')).forEach(link => {link.removeAttribute('target'); link.removeAttribute('rel');});
});
</script>

     

     

     


     

     
     

    끝까지 읽어주셔서 감사합니다.

    공감과 구독, 그리고 댓글은
    저의 블로그 활동에
    큰 원동력이 됩니다.

    오늘도 좋은 하루 보내세요♥

     
     

     
     

     

    AI 그림 사이트(무료)

    "AI 그림"은 인공지능 기술을 사용하여 생성된 그림을 말합니다. 이러한 그림들은 일반적으로 GAN (Generative Adversarial Networks), VAE (Variational Autoencoder) 등의 딥러닝 알고리즘을 사용하여 만들어집니

    sugarlessgum.tistory.com

     

    구글 애드센스 승인 신청 방법 및 광고 코드 연결하기

    구글 애드센스 승인 신청 방법 및 광고 코드 연결하기 애드센스 승인은 블로그를 운영하는데 중요한 단계입니다. 애드센스는 광고 수익을 창출하기 위해 필요하기 때문에 많은 분들이 승인받기

    sugarlessgum.tistory.com

     

    무료 로고 제작 [추천 사이트 3곳]

    무료 로고 제작 사이트 무료로 로고를 제작해주는 사이트 3곳을 소개합니다. 로그인이 필요없고 무료로 제작이 가능하며, 캡쳐하는데도 워터마크나 격자무늬 같은 캡쳐방지가 없는 곳으로만 정

    sugarlessgum.tistory.com

     

    파비콘 변환 사이트 [Favicon.io]

    Favicon.io 소개 파비콘(favicon)은 웹사이트나 웹페이지의 주소창에 표시되는 작은 아이콘을 의미합니다. 웹사이트를 즐겨찾기 해두거나 북마크를 해둘 때 파비콘이 조그만하게 옆에 나타나는데,

    sugarlessgum.tistory.com

     

    조문 위로 문자 모음 및 장례식장 문상 순서

    조문 위로 문자 모음 및 장례식장 문상 순서 조문 문자 모음과 장례식장 문상 순서에 대해 정리해보았습니다. 부득이하게 참여가 힘들 경우 조문 문자를 보내게 되는데요. 최대한 정중한 표현을

    sugarlessgum.tistory.com

     

    저작자표시 비영리 변경금지

    관련글

    티스토리툴바