티스토리 오디세이 스킨 편집을 해두었는데, 보관 처리를 해두지 않아서 다시 편집하며, 나중에 어느 부분을 건드렸는지 기억하기 위해 과정 기록..
모든 출처는 하단에 남겨두었습니다.
0. 모바일 스킨 적용
모바일에서도 내가 바꾼 스킨을 그대로 지정하고 싶다면,
<모바일>에서 "사용하지 않습니다" 로 바꾸어준다.
티스토리 어플에서는 스킨 반영이 안된다고 합니다. (사용안해봐서 몰랐다, 어차피 보통 검색하여 접하게 되기 때문에 상관 없을 것 같다.)
1. 상단 이미지 제거
본문의 상단 이미지를 없애는 방법이다.
CSS에서 #tt-body-page .main를 검색하여
#tt-body-page .main {
padding-top: 40px;
}padding-top 크기를 조절해준다.
/* .article-header:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
} */.article-header:before 부분 삭제
.article-header {
/*
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 400px;
margin-left: -50vw;
padding: 0 20px;
background-size: cover;
background-position: 50% 50%;
*/
background-image: none!important; /* 해당코드 추가 */
}.article-header 부분을 위처럼 수정해준다.
.article-header .inner-header {
max-width: 1020px;
margin: 0 auto;
margin-bottom: 45px;
padding-bottom: 20px;
border-bottom: 1px solid #d3d3d3;
}.article-header .inner-header에서 color 속성을 지워 색상을 검정이 되도록 하고, margin, padding 조절과 기준선을 표기한다.
/* .article-header .box-meta {
position: absolute;
bottom: 56px;
width: 100%;
max-width: 780px;
z-index: 2;
} */.article-header .box-meta 없애준다.
@media screen and (max-width: 1060px)
#tt-body-page .main {
padding-top:40px;
}마지막으로 위처럼 수정해준다.
그 후엔 제목 폰트가 크기 때문에 폰트 사이즈를 조절해준다.
.article-header .title-article {
display: block;
width: 100%;
max-width: 760px;
/* margin: 0 0 33px 0; */
font-size: 25px; /* 제목 폰트 사이즈 변경 */
font-weight: 400;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
word-break: keep-all;
}
2. 상단 수정/삭제 추가
상단 제목 부분에 수정과 삭제를 추가한다.
<span class="date">2022. 5. 19. 18:24</span>HTML에서 위 코드 다음 줄부터 아래의 코드를 넣어준다.
<span>
<s_ad_div>
<a style="color: #000000; text-decoration: none;" href="">수정</a>
<a style="color: #000000; text-decoration: none;" href="#" onclick="">삭제</a>
</s_ad_div>
</span>
3. 본문 넓게 바꾸기
본문이 조금 좁게 느껴져서 CSS에서 수정하여 넓혔다.
/* area-main */
.area-main {
width: 100%;
max-width: 800px; /* 더 넓게 설정 */
}프로필 박스 크기도 조금 수정했다.
.area-aside .box-profile .img-profile {
width: 140px;
height: 140px;
/* margin: 49px 0 14px 0; */
margin : 30px 0 -8px 0;
border-radius: 140px;
}자세히 기억은 안나는데, 아마 이 부분에서 달력 모듈의 "< >" 부분이 어긋나는 것으로 기억하는데, 수정해주는 방법이 있긴 한데,, 나는 달력 모듈을 안쓴다..ㅎ,,,ㅎㅎㅎ,,
4. 이전글/다음글 리스트로 수정하기
이전 글과 다음 글만 표기하는 것이 아닌, 해당 카테고리에 있는 글들을 표기할 수 있도록 수정
먼저 해당 플러그인을 적용시켜주어야 한다.
/* // article-tag */
/* article-page - 상세페이지 이전다음글 */
.article-page {
/*
margin-bottom: 46px;
border-bottom: 1px solid #e8e8e8;
*/
display : none;
}CSS에서 article-page를 위처럼 코드를 변경해준다.
.article-page {display: none}
.another_category {display: block;}
.article-view .another_category {display: block;padding: 16px 20px 14px}
.article-view .another_category h4 {margin: 0 0 13px !important;font-size: 0.875em !important}
.article-view .another_category h4 a {text-decoration: none}
.article-view .another_category table tr,
.article-view .another_category table tr th,
.article-view .another_category table tr td,
.article-view .another_category table {border: 0}
.article-view .another_category th {padding: 2px 0 !important;font-size: 0.875rem !important}
.article-view .another_category th a.current {color: #333 !important}
.article-view .another_category td {padding: 2px 0 !important;font-size: 0.75rem !important}
/* 댓글 수 표시 숨김 */
.article-view .another_category span {display: none}
/* 날짜 숨김 */
.article-view .another_category td {display: none}그 후 위 코드를 추가해준다.
5. 폰트 적용 & 크기 조절
1. 폰트 적용
눈누
상업용 무료한글폰트 사이트
noonnu.cc
우측 코드를 복사하여 CSS에 그대로 붙여 넣어준다.
그 후 body에 원하는 글씨체의 font-family 부분을 넣어주면, 티스토리 전체에 해당 폰트가 적용된다.
2. 크기 조절
- 제목
.article-view h1 {
font-size: 32px;
line-height: 1.1em;
}
.article-view h2 {
font-size: 24px;
line-height: 1.1em;
}
.article-view h3 {
font-size: 22px;
line-height: 1.1em;
}
.article-view h4 {
font-size: 20px;
line-height: 1.1em;
}h3과 h4 크기를 2px 키우고, 간격은 모두 통일시켜주었다.
h1은 글 제목, h2는 제목 1, h3은 제목 2, h4는 제목 3을 의미한다.
글 제목의 크기를 변경하고 싶다면, h1 말고 article-header .title-article에서의 font-size를 조절해주면 된다.
- 본문
#tt-body-page p[data-ke-size='size18'], p[data-ke-size='size18']
{
font-size: 18px; /* 원하는 크기로 변경 */
}
#tt-body-page p[data-ke-size='size16'], p[data-ke-size='size16']
{
font-size: 16px;
}
#tt-body-page p[data-ke-size='size14'], p[data-ke-size='size14']
{
font-size: 14px;
}이 코드는 순서대로 본문 1, 본문 2, 본문 3의 font-size를 지정해줄 수 있는데, 없는 것도 크기가 만족스러워서 따로 추가해주지는 않았다.
ul과 ol에서의 font-size 조절은 리스트 형태에서의 글씨 크기를 조절한다.
- 모바일
- 제목
모바일에서 그대로 스킨이 적용되면 글씨의 크기가 너무 크게 느껴지므로 따로 재설정해주었다.
.article-view h4 {
font-size: 20px;
line-height: 1.1em;
}
@media screen and (max-width: 1060px) {
.article-view h2 {
font-size: 20px;
line-height: 20px;
}
.article-view h3 {
font-size: 18px;
line-height: 20px;
}
.article-view h4 {
font-size: 16px;
line-height: 20px;
}
}.article-view h4 아래에 모바일에서 적용될 수 있도록 따로 크기와 간격을 설정해주었다.
h2는 제목 1, h3은 제목 2, h4는 제목 3을 의미한다.
- 본문
.article-view p {
margin-bottom: 28px;
font-size: 16px;
line-height: 26px;
color: #555;
}
@media screen and (max-width: 1060px) {
#tt-body-page p[data-ke-size='size18'], p[data-ke-size='size18']
{
font-size: 15px;
line-height: 20px;
}
#tt-body-page p[data-ke-size='size16'], p[data-ke-size='size16']
{
font-size: 14px;
line-height: 20px;
}
#tt-body-page p[data-ke-size='size14'], p[data-ke-size='size14']
{
font-size: 13px;
line-height: 20px;
}
}.article-view p 아래에 모바일 버전에서의 폰트 크기를 조절해주었다.
6. 코드 블록 편집
1. 코드 블록 테마 설정
- 준비 과정
테마를 설정하기 전, 코드블럭 주변에 회색 테두리가 생기는데 이 부분을 없애주었다.
.article-view pre {
padding: 0px;
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: rgba(34, 85, 51, 0.87);
white-space: pre-wrap;
}padding이 20px로 설정되어있는데, 이 부분을 0으로 설정해주면 테두리를 없애줄 수 있다.
티스토리 플러그인에서 <코드 문법 강조>를 적용시킬 수 있는데, 이 플러그인이 적용되어있다면 해제시켜준다.
highlight.js
Version 10.7.2 This is a patch release. The only change is that deprecation messages are throttled and shown only once.
highlightjs.org
위 사이트에서의 Get version을 누르고 cdnjs를 복사한다.
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script> <!-- 추가해주기 -->HTML에서 <head> 안에 위 코드를 추가해준다.
- 테마 고르기
highlight.js demo
highlightjs.org
이 사이트에서 원하는 테마를 고른다.
< 테마 추천 >
base16/ashes
base16/danqing
base16/gruvbox dark pale
base16/material palenight
base16/ocean
base16/oceanicnext
base16/phd
base16/tomorrow night
base16/woodland
github dark
hybrid
lioshi
night owl
obsidian
stackoverflow dark
원하는 테마명을 default 대신 넣어준다. 대문자는 소문자로, 공백은 -로 대체하여 적어준다.
pre > code {
border-radius: 10px;
line-height: 1.7;
font-family: 'adobaonlyR';
font-size : 18px;
}코드 블록의 테두리를 둥글게, font 변경 등 css를 추가해주었다.
모바일에서는 글씨가 조금 작게 보여야 편하기 때문에 따로 적용해주어야 한다.
@media screen and (max-width: 1061px) {
pre > code {
font-size : 12px;
}
}위 코드에 이어서 12px로 지정해주었다.
2. 코드 블록 스크롤 추가
가로로 길어진 코드가 가독성이 떨어지게 넘어가는 것을 스크롤을 추가하여 보기 편하게 해주도록 한다.
code {
white-space: pre;
max-width: 850px;
max-height: 950px;
overflow: auto !important;
}CSS에 위 코드를 추가해준다.
3. 코드블럭 라인 넘버 추가
GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js
Line numbering plugin for Highlight.js . Contribute to wcoder/highlightjs-line-numbers.js development by creating an account on GitHub.
github.com
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>HTML의 <head> 안에 위 코드를 추가해준다.
.article-view > table {
border: 1px solid #dadce0;
border-collapse: collapse;
}
.article-view table > thead tr {
background: rgba(0, 0, 0, 0.05);
font-size: 16px;
color: #000;
}
.article-view table > tr th,
.article-view table > tr td {
padding: 7px;
border-left: 1px solid #dadce0;
}
.article-view table > tr {
border-bottom: 1px solid #dadce0;
}CSS에서 table에서 >를 추가하여 테이블이 깨지는 것을 수정한다.
/* 라인넘버 추가 */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc;
vertical-align: top;
padding-right: 5px !important;
}
.hljs-ln-code {
padding-left: 10px !important;
}CSS 맨 하단에 위 코드를 추가한다.
7. 사이드바 왼쪽 이동
티스토리의 오디세이 스킨은 사이드바가 오른쪽에 위치해있다. 개인적으로 TOC를 왼쪽에 추가해주었다가 둘의 위치를 바꿔주는 것이 더 편한 것 같아서 먼저 사이드바를 왼쪽으로 이동시켜주었다.
(근데 요즘 다시 TOC를 왼쪽, 사이드바를 오른쪽으로 바꿔줄까 생각중이다. 글을 읽을 때 왼쪽에서부터 읽으니까, TOC가 계속 따라다니는게 거슬려서 오른쪽으로 바꿔준 것인데, 새로고침할 때마다 사이드바의 위치가 즉시 반영되지 않고 시간이 좀 걸리면서 반영되어서 거슬린다.)
<style>
@media screen and (min-width: 1061px) {
.wrap-right .area-aside {
margin: 32px 80px 0 0;
}
}
</style>
<script>
var _main = document.querySelector('.main');
var areaMain = document.querySelector('.area-main');
var areaAside = document.querySelector('.area-aside');
_main.insertBefore(areaAside, areaMain);
</script>위 코드를 <body> 내에 추가시켜주었다.
8. TOC 추가
GitHub - tscanlin/tocbot: Build a table of contents from headings in an HTML document.
Build a table of contents from headings in an HTML document. - GitHub - tscanlin/tocbot: Build a table of contents from headings in an HTML document.
github.com
<!-- tocbot -->
<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">
<!-- tocbot -->위 코드를 HTML에서 <head> 내에 추가해준다.
<!-- toc -->
<div class='toc toc-fixed'></div>
<!-- toc -->그리고 위 코드를 <!-- 에디터 영역 --><div class="article-view"> 위에 넣어주었다.
(main 내부나 article-view 내에 넣어도 문제는 없었다.)
<!-- toc script start -->
<script>
// set heading id
function makeHeading(headings){
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; }
});
}
var headingMap = {};
var headings = document.querySelector('.article-view').querySelectorAll('h1, h2, h3');
makeHeading(headings);
document.addEventListener("DOMContentLoaded", function() {
// toc addon
tocbot.init({
// Where to render the table of contents.
tocSelector: '.toc',
// Where to grab the headings to build the table of contents.
contentSelector: '.article-view',
// Which headings to grab inside of the contentSelector element.
headingSelector: 'h1, h2, h3',
// For headings inside relative or absolute positioned containers within content.
hasInnerContainers: false
});
});
$("div.toc.toc-fixed").hide(0);
$(window).scroll(function() {
if (Math.round( $(window).scrollTop()) > 200) {
$("div.toc.toc-fixed").show(250);
} else {
$("div.toc.toc-fixed").hide(250);
}
});
</script>
<!-- toc script end--></body> 위에 해당 코드를 추가해주었다.
h1는 글 제목이라 넣어주어도 반영되지는 않고, 제목 3으로도 TOC를 사용해주고 싶다면, h4를 추가해주면 된다.
다만, 노란색 부분이 h4로 설정되어 있어 TOC에 추가되는 편이니 비추천
/* tocbot */
.toc-absolute {
position: absolute;
margin-top:165px;
}
.toc-fixed {
position: fixed;
top: 60px;
}
.toc {
right: calc((100% - 850px) / 2 - 330px);
width: 200px;
padding: 10px;
box-sizing: border-box;
}
.toc-list {
margin-top: 10px !important;
font-size: 0.9em;
}
.toc > .toc-list li {
margin-bottom: 8px;
}
.toc > .toc-list li:last-child {
margin-bottom: 0;
}
.toc > .toc-list li a {
text-decoration: none;
}CSS에서 tocbot에 대한 코드를 추가해준다. 원하는 위치와 폰트 간격을 조정해주었다.
9. 편리한 수식 입력
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>위 코드 html head 안에 추가
$$ 안에 수식을 넣으면 문단 가운데 형태로, $안에 수식을 넣으면 문장 안에 표현할 수 있다.
$$ a_n $$
$a_n$이다.!
마무리
완성된 스킨은 꼭 "보관" 해주기.
스킨 편집에 도움이 아주 많이 된 포스팅 출처입니다. 감사합니다. 😍