티스토리 Portfolio 스킨 페이지 및 공지사항 상단 레이아웃 깨짐 수정하기

티스토리 기본 제공 스킨인 포트폴리오 (https://www.tistory.com/skin/xf_Portfolio)

 

과거 스킨의 이슈였는지는 모르겠으나, 현재 사용중인 티스토리 Portfolio 스킨의 경우, 상단 이미지가 포함되지 않는 공지사항 및 페이지에서는 레이아웃이 깨져서 표시된다.

헤더에 jQuery 스크립트를 넣어주고, 본문 최하단에 아래 스크립트를 넣어주면 원하는 형태로 제목 및 날짜 부분을 변경할 수 있다.

 

<script>
    if ($(document).has('.inner_header').length > 0) {
        if ($('.inner_header').css('background-image').split(/"/)[1] === document.URL) {
        $('.article_header').css('opacity', 0);
        $('.article_view .tt_article_useless_p_margin').before('<div class="hidden_title">' + $('.article_header .info_text .title_post').text() + '</div><div class="hidden_date">' + $('.article_header .info_text .info .date').text() + '</div>');
    }
}
</script>

 

CSS는 취향에 따라서 배치하면 된다.

 

.hidden_title {
    position: relative;
    width: 100%;
    margin: 120px 0 0 0; font-size: 20px;
    font-weight: 600; color: #333;
}

@media screen and (max-width:1023px) {
    .hidden_title {
        margin: 0 !important;
    }
}

.hidden_date {
    position: relative;
    width: 100%;
    margin: 10px 0 40px 0;
    font-size: 13px;
    font-weight: 300;
    color: #999;
    letter-spacing: -0.02em;
}

 

최근엔 수정이 되었는지 잘 모르겠다. 워낙 오래전에 적용한 스킨이라..

수정된 레이아웃 살펴보기