(스킨 변경하면서 이것저것 손댈 때 잊지 않으려고 적어두는 포스팅)
티스토리 오디세이 스킨 썸네일 정사각형으로 비율 조정
티스토리 오디세이 목록 썸네일 정사각형으로 변경하는 법
티스토리 오디세이 글 목록 썸네일 정사각형으로 변경하는 법을 소개해드리겠습니다. 티스토리의 경우 다음 검색 노출 시 썸네일이 정사각형(1:1) 비율로 노출이 되는데 오디세이 스킨의 경우
tistory-secret-note.tistory.com
CSS
아래 코드를 블로그 관리→ 꾸미기 → 스킨 편집 → CSS 맨 아래에 넣어주기
/* 썸네일 정사각형 시작 */
.article-type- .thumbnail, .article-type-thumbnail .thumbnail {
width: 100px;
height: 100px;
/* 조금 더 큰 썸네일을 원한다면 width, height 값을 변경해주세요. (ex. width: 150px; height: 150px;) */
background-image: none;
}
.article-type-common .thumbnail .img-thumbnail {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 썸네일 정사각형 끝 */
썸네일 생성 : 미리캔버스
워크스페이스 - 미리캔버스
손쉽게 협업 가능한 간편한 무료 디자인 플랫폼, 미리캔버스에 초대합니다.
www.miricanvas.com
티스토리 오디세이 스킨에 수식 적용
- latex 수식을 자주 쓰는 편이라, 편리함을 위해 수식 적용시키기
블로그 관리→ 꾸미기 → 스킨편집 → html 편집
<head>와 </head> 사이에 아래 코드 넣어주기
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
티스토리 블로그에 수식 넣는 두 가지 방법 (MathJax, CodeCogs)
티스토리 블로그에 수식을 넣고싶을 때가 있을거에요. 아래와 같은 두 가지 방법이 있는데요, 각각 장단점이 있기 때문에 원하시는 번호로 가셔서 방법을 보시면 됩니다. 개인적인 추천은 둘 다
forestunit.tistory.com
티스토리 오디세이 스킨 포스팅 제목 글자 크기 변경
- 포스팅 제목이 길어지면 ...로 변하는데, 제목이 잘리지 않게 하고자 수정하는 코드
- 아래 코드에서 font-size, font-weight를 조정해주면 된다.
- 글자 크기 기본값은 48px 라서 포스팅 제목이 잘리는 것이었음 !
블로그 관리→ 꾸미기 → 스킨편집 → CSS 편집 → article-header 검색
.article-header .title-article {
display: block;
width: 100%;
max-width: 760px;
margin: 0 0 33px 0;
font-size: 38px;
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;
}
[오디세이 스킨] 글 제목 폰트크기 수정(PC판)
글 제목 폰트크기를 변경 전/후 비교 오디세이 스킨 기본설정을 사용하면, 글 제목이 여백이 있음에도 불구하고 다음 줄로 넘어갑니다. 폰트 크기를 수정하면 아래처럼 예쁘게 한 줄로 나옵니다
malwareanalysis.tistory.com
티스토리 오디세이 스킨 본문 여백 늘리기
- 오디세이는 본문 너비가 작고 자동으로 중간정렬 되기 때문에, 가독성이 조금 떨어진다고 생각했다.
- 따라서 본문 너비를 넓히고 메뉴도 오른쪽으로 옮기기 위한 방법을 가져왔다.
블로그 관리→ 꾸미기 → 스킨편집 → CSS 편집 → area-main 검색
.wrap-drawer .area-main {
max-width: 800px;
margin: 0 auto;
}
/* main */
.main {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
/* area-main */
.area-main {
width: 100%;
max-width: 800px;
}
/* ----- media query - mobile ----- */
@media screen and (max-width: 1061px) {
#container {
margin-top: 0;
}
.area-main {
max-width: 100%;
padding: 0 20px;
}
}
/* area-aside */
.area-aside {
width: 300px;
티스토리 Odyssey Skin 본문 너비(폭) 늘리는 방법
Odyssey skin은 티스토리에서 스킨 변경을 통해 기본적으로 사용할 수 있는 스킨 중 하나인데요. 반응형과 목록 광고 형태가 지원되며, 깔끔한 디자인으로 인해 여러 블로그에서 많이 사용되는 스
wildeveloperetrain.tistory.com