티스토리 오디세이 스킨 사이드바 크기 변경하기 (본문 크기 조정으로)

티스토리 오디세이 스킨 사이드바 크기 변경하기 (본문 크기 조정으로)

 

안녕하세요 사람사물상황입니다.

 

1. 사이드바 크기 변경방법

사이드바의 크기를 조정할건데요, 기본 설정은 300px로 되어있습니다. 아마도 광고 크기에 맞춰 설정한것 같은데, 그것을 저처럼 좌측으로 사이드바를 옮겼거나 크기 조정을 하고 싶은 상황에서 변경하는 방법입니다.

그런데 그냥 사이드바 크기만 조정하면 "사이드바만" 조정되고 본문은 가만히 있게되서 중간에 텅비어 버립니다.

그래서 본문의 크기를 조절함으로서 사이드바는 자동으로 조절하게 할것입니다.

 

2. 코드 변경

원래는 이랬던 300px의 사이드바의 크기를 본문 코드변경으로 바꿉니다.

 

 

 

스킨편집-html-css-1412행 

/* area-main */
.area-main {
    width: 100%;
    max-width: 640px;


에서  730px로 변경합니다.

 

그럼 다음과 같이 변합니다.

 

 

3. 그에 따른 프로필 세로 크기와, 캘린더 < >의 위치 변경.

그런데 변경을 했더니 프로필과 캘린더의 모양이 조금 이상합니다.

먼저 프로필의 박스의 세로 크기가 조금 기네요. 

 

프로필

 

1493행

.area-aside .box-profile .img-profile {
    width: 140px;
    height: 140px;
    margin: 49px 0 14px 0;
    border-radius: 140px;



    margin: 34px 0 -8px 0;   로 변경하여

 

 

정사각형으로 편안하게 맞췄습니다.

 

 

 

다음은 캘린더 좌우 < > 표시 위치가 줄어들어있습니다.

 

마찬가지로 스킨편집-html-css
1977행에서 < 바꿉니다

content: '〈';
    position: absolute;
    top: -3px;
    left: 60px;
    width: 30px;
    height: 24px;
    background-color: transparent;
    font-size: 12px;
    padding-top: 5px;


left 18로






1989행에서 > 바꿉니다.


    content: '〉';
    position: absolute;
    top: -3px;
    right: 60px;
    width: 34px;
    /* left: -2px; */
    height: 24px;
    background-color: transparent;
    font-size: 12px;
    padding-top: 5px;
}


right 16으로 바꿈

 

 

그랬더니 편안하게 제위치로 바뀌었네요.

 

 

 

그렇게 완성된 모양입니다.

 

끝.