본문 바로가기
IT & Internet/Blog Tips

티스토리 오디세이(Odyssey) 스킨 변경 사항 기록

by juranus 2023. 8. 25.
반응형

티스토리 오디세이(Odyssey) 스킨을 적용한 후 변경사항을 기록합니다. 폰트 변경, 스킨 변경, 스타일 변경 등.

2016년 ~ 2023년 2월까지 방치되어 휴면상태였던 블로그를 2023년 3월에 다시 살렸고, 다시 포스팅을 시작했습니다. 오디세이 스킨으로 결정을 했고 적용을 했는데, 여기저기 바꾸고 싶은 것들이 있어서 그 기록을 남깁니다. 

(기록을 하지 않으면 내가 무얼 바꿨는지 기억하기 불가능)

Miguel_Á._Padriñán
ⓒ pexels

 

티스토리 Odyssey 스킨의 변경사항 기록

2023.08.25

  • 목차 추가함. 목차 추가에 대해서는 별도로 포스팅 예정

2023.08.19

  • G Translate 번역기 추가
  • 목차 추가했다가 다시 제거함. 
    • 브라우저 폭이 줄어들 때 처리하는 방법을 몰라서 더 공부한 후 적용 예정
<!-- HTML -->


<!-- sidebar 02 -->
            <s_sidebar>
              <s_sidebar_element>
                  <!-- G Translate 번역 메뉴 -->
                  <div class="gtranslate_wrapper"></div>
                  <script>window.gtranslateSettings = {"default_language":"ko","native_language_names":true,"languages":["ko","es","pt","fr","zh-CN"],"wrapper_selector":".gtranslate_wrapper","flag_size":24,"alt_flags":{"pt":"brazil"}}</script>
                  <script src="https://cdn.gtranslate.net/widgets/latest/fd.js" defer></script>
                  


<!-- tocbot 목차 추가하기 // 지금은 모두 막아두었음 -->
<!-- </head> 앞에 추가 -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js">	</script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">



<!-- toc 목차 Line 번호 255 근처 -->
             <div class='toc'></div>
<!-- toc -->                  


 <!-- toc script start 목차 </body> 바로 앞에 -->
<script>
    	const contentBodySelector = '.article-view'
		var content = document.querySelector(contentBodySelector)
		var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
		var headingMap = {}

		Array.prototype.forEach.call(headings, function (heading) {
				var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
									 .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
				headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
				if (headingMap[id]) {
					heading.id = id + '-' + headingMap[id]
				} else {
					heading.id = id
				}
			})

		tocbot.init({
			tocSelector: '.toc',
			contentSelector: contentBodySelector,
			headingSelector:'h1, h2, h3',
			hasInnerContainers: false
		});

		$(document).ready(function(){
			$('.toc').addClass('toc-absolute');

			var toc_top = $('.toc').offset().top - 165;
			$(window).scroll(function() {
				if ($(this).scrollTop() >= toc_top) {
					$('.toc').addClass('toc-fixed');
					$('.toc').removeClass('toc-absolute');
				} else {
					$('.toc').addClass('toc-absolute');
					$('.toc').removeClass('toc-fixed');
				}
			});
		});
	</script>
  <!-- toc script end-->


/* tocbot 목차 CSS  */
.toc-absolute {
  position: absolute;
  margin-top: 24px;
}
.toc-fixed {
  position: fixed;
  top: 165px;
}

.toc {
  left: calc((100% - 1060px) / 2 - 250px);
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
}

.toc-list {
  margin-top: 14px !important;
  font-size: 0.9em;
}

.toc > .toc-list li {
  margin-bottom: 14px;
}

.toc > .toc-list li:last-child {
  margin-bottom: 0;
}

.toc > .toc-list li a {
  text-decoration: none;
}

2023.06.18

  • 테이블 내부의 줄간격 너무 좁아서 변경
.article-view table tr th,
.article-view table tr td {
    font-size: 0.9em;
    padding: 7px;
    border-left: 1px solid #dadce0;
    line-height: 1.5em; /* Cris 2023.06.에 추가함, 테이블 내부 줄간격 */
}

 

2023.05.29

  • 제목 스타일, 본문 1&2 스타일 적용
  • 테이블안의 글자 크기 조정 0.9em
.article-view h2 {
    clear: both;
    width: fit-content;
    font-size: 1.6em;
    line-height: 1.5em;
    margin: 20px 0px 20px;
    border-bottom: 1px solid #ABB2B9;
    border-left: 14px solid #540c97;
    border-top-left-radius:12px;
  /*border-bottom-left-radius: 6px; */
  /* 테두리 둥근처리 숫자로 조정가능  */
    padding: 0px 10px 4px;
}

.article-view h3 {
    clear: both;
    width: fit-content;
    font-size: 1.45em;
    line-height: 1.3em;
    margin: 20px 0 20px;
    border-bottom: 1px solid #ABB2B9;
    border-left: 12px solid #e378a8;
    border-top-left-radius: 10px; 
   /* border-bottom-left-radius: 6px; */
  /*  테두리 둥근처리 숫자로 조정가능  */
    padding: 0px 10px 4px;
}

.article-view h4:not(.another_category h4) {
    clear: both;
    width: fit-content;
    font-size: 1.30em;
    line-height: 1.2em;
    /* margin: 20px auto; 가운데 정렬 시키는 코드 */
    border-bottom: 1px solid #ABB2B9;
    border-left: 10px solid #858ae3;
    /*border-right: 10px solid #808B96;*/
    border-top-left-radius: 8px;
   /* border-bottom-left-radius: 6px; */
   /*  테두리 둥근처리 숫자로 조정가능  */
    padding: 0px 10px 5px;
}

/* 본문1 Paragraph 폰트 스타일 적용하기 */
#tt-body-page p[data-ke-size='size18'],
p[data-ke-size='18'] {
	font-size: 1.2em;
    line-height: 1.875em;
}

/* 본문2 Paragraph 폰트 스타일 적용하기 */
#tt-body-page p[data-ke-size='size16'],
p[data-ke-size='16']{
	font-size: 1.1em;
    line-height: 1.875em;
}

.article-view table tr th,
.article-view table tr td {
    font-size: 0.9em;
    padding: 7px; /*동작하지 않음, 왜? */
    border-left: 1px solid #dadce0;
    line-height: inherit; /* 모르겠음, Cris 2023.03.30에 추가함, 테이블 내부 줄간격 */

 

 

2023.05.27

  • 사이드바 카테고리 폰트 사이즈 변경 13 → 16, 15
  • 카테고리 다른글 안보이게 하기
  • 카테고리의 다른글 플러그인의 폰트 설정
  • 카테고리의 다른글 플러그인의 링크 밑줄 안보이게 변경
  • 관련글의 썸네일 높이 변경 auto → 170px
.area-aside .box-category .tt_category .link_tit,
.area-aside .box-category .tt_category .category_list .link_item {
    margin-bottom: 11px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.64;
    color: #777;
}

.area-aside .box-category .tt_category .link_tit:hover,
.area-aside .box-category .tt_category .category_list .link_item:hover {
    font-size: 16px;
    font-weight: 500;
    color: #333 !important;
    text-decoration: underline;
}

.area-aside .box-category .tt_category .category_list .link_sub_item {
    position: relative;
    display: none;
    margin-bottom: 5px;
    margin-left: 22px;
    font-size: 15px;
    line-height: normal;
    color: #999;
}

.article-view h4:not(.another_category h4) {
    clear: both;
    width: fit-content;
    font-size: 1.25em;
    line-height: 1.2em;
    border-bottom: 1px solid #ABB2B9;
    border-left: 10px solid #858ae3;
    padding: 0px 10px 5px;
}

/* 카테고리의 다른글 이전글/현재글/다음글 안보이게 하기 행 번호 2979*/
.article-page {
    margin-bottom: 46px;
    border-bottom: 1px solid #e8e8e8;
    // 안보이게 처리
    display: none;
}



/* 카테고리의 다른글 폰트 크기 수정, 행 번호 525 */
.article-view .another_category h4{
    font-size: 1.0em !important;
}
.article-view .another_category h4 a {
    text-decoration: none
}

.article-view .another_category th,
.article-view .another_category td{
    font-size: 0.9em !important;
    padding: 0px 0px 8px !important;
}

/* 썸네일 높이를 auto에서 170px로 수정 행 3166 */
.article-related .thumnail {
    height: 170px;
    padding-top: 60%;
}

 

2023.05.21, 인용구 스타일 변경

인용구 스타일을 변경함

/* 인용문 스타일 1의 속성 변경 */
#tt-body-page blockquote[data-ke-style='style1'] {
    text-align: center;
    background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0;
    padding: 34px 0 0 0;
    font-size: 18px;
    color: #333;
    line-height: 23pt;
    border: 0 none;
}

/* 인용문 스타일 3의 속성 변경 */
#tt-body-page blockquote[data-ke-style='style3'] {
    border-left: 8px solid #afbef1;
    background: #fdfdfd;
    text-align: left;
    padding: 15px 25px 15px 25px;
    color: #666;
    line-height: 1.75;
}

 

 

2023.05.01, 키자드와 블서치에 백링크 등록 1 ~ 262

블서치 (blogsearch.kr)

키자드 - 티스토리 백링크 등록 (keyzard.org)

 

 

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

'IT & Internet > Blog Tips' 카테고리의 다른 글

[오디세이 스킨] jquery 자동 목차 TOC 만들기  (0) 2023.08.27

관련글

티스토리툴바