티스토리 블로그 꾸미기 (feat. 오디세이 스킨)

그동안 블로그를 써오면서 한번도 스킨을 커스터마이징 한적이 없는 것 같아

이번에는 내가 원하는 스타일의 스킨으로 조금씩 변경해보려고한다. 

 

이 글에는 내가 참고한 글들을 정리해보려한다. 

 

글 헤더 변경 (이미지 삭제)

참고 블로그

 

사이드바에 글쓰기, 관리자, 방명록 추가

참고 블로그

 

글, 사이드바 가로 크기 변경

참고 블로그

 

애드핏 광고 배너 크기 설정 문제

다음과 같이 배너가 너무 크다는 생각에 설정에서 크기를 조정해봤지만 변화되는게 없었다. 

그래서 일단 광고를 없애고 나중에 더 알아보려한다. 

 

 

글 수정, 삭제 추가

참고 블로그

 

 

로고 추가 및 타이틀 폰트 변경

참고 블로그

 

뭔가 개발자 느낌을 내보고 싶었다.

 

이모지 다운로드 사이트 / 파비콘으로 변환 및 다운로드 사이트 / 구글 웹 폰트 사이트 

 

다음 코드와 같이 로고와 타이틀의 스타일을 변경하였다.

.header .title-logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px 0;
		font-family: 'Roboto Mono', monospace;
}

.header .link-logo {
    display: flex;
    max-width: 320px;
    font-size: 26px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-height:22px;
}

.header .link-logo img {
    max-height: 26px;
}

.header .box-log {
    position: absolute;
    top: -1px;
    right: 0;
}

모바일에 대한 설정을 따로 해주어야한다.

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
		.header .link-logo img {
			max-height: 16px;
		}
}

 

로고, 타이틀에 타이핑 효과 추가

참고 블로그

 

.header .link-logo {
    display: flex;
    max-width: 320px;
    font-size: 26px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-height:22px;
		border-right: 1px solid black;
		animation: typing 6s steps(31) infinite;
        padding-right: 30px;
}

@keyframes typing {
		0% {
			width: 0%;
		}
		50% {
			width: 100%;
		}
		100% {
			width: 0%;
		}
}

모바일에 대한 설정을 따로 해주어야한다. 

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
    .header .link-logo {
				padding-right: 20px;
        font-size: 16px;
    }
}

 

 

코드 블럭 변경 (배경 색, 스크롤, 라인넘버)

참고 블로그1 / 참고 블로그2

 

오디세이 스킨의 경우 코드 블럭에 다음과 같은 배경 색이 들어가있다. 안 예뻐서 당연히 바꾸고 싶을 것이다. 

거기에 추가로 라인넘버와 스크롤을 추가해줬다. 

 

.article-view pre {
    margin: 20px 0;
    white-space: pre;
		max-width: 700px;
		overflow: auto !important;
		border-radius: 10px;
}

 

글 제목(제목1, 제목2, 제목3) 형광펜 밑줄 효과 추가

참고 블로그

 

나는 색상을 변수로 추가해서 사용하는 방식을 사용하였다. 

✅ 제목1, 2, 3 = h2, 3, 4 임을 주의하자!!

:root {
		--theme-color: #ffe400;
		--theme-color-alpha: rgba(255, 228, 0, 0.5)
}

.article-view h2 {
    font-size: 24px;
    line-height: 1.38;
		display: inline-block;
		background: linear-gradient(to top, var(--theme-color-alpha) 40%, transparent 50%);
}

.article-view h3 {
    font-size: 20px;
    line-height: 1.4;
		display: inline-block;
		background: linear-gradient(to top, var(--theme-color-alpha) 40%, transparent 50%);
}

.article-view h4 {
    font-size: 18px;
    line-height: 1.33;
		display: inline-block;
		background: linear-gradient(to top, var(--theme-color-alpha) 40%, transparent 50%);
}