태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

티스토리 첫페이지 변경

드디어 성공했다 - 티스토리 첫페이지 변경

원본소스 - http://jnicol.github.io/particleground/ (demo) , https://github.com/jnicol/particleground (code)


티스토리의 첫페이지를 만드는 방법중 티스토리에서 제공하는 티에디션, 테터데스크가 있긴하지만 반응형 스킨을 사용하고 있기도 하고 원하는 첫페이지가 아니라 테터데스크를 이용하여 새롭게 첫페이지를 만들었다.


원인은 기존 스킨의 레이아웃에 따른 첫페이지에 적용할   z-index:9999;  position:fixed;를 적절히 조정하는게 관건이었다.
테터데스크에서 조정할 수 있도록 티스토리 블로그 첫페이지를 수정했다. 티스토리의
테터데스크의 옵션창보다는 아래에 위치하고 CCZ-CROSS 스킨보다는 위에 위치하도록...,


이걸 해볼려고 프레임셋, 아이프레임, 스크립터, 별짓 다해도 안되더만, SONYLOVE님 블로그 첫페이지에서 참고하고 SONYLOVE님의 많은 도움으로 해결되었다, SONYLOVE님 감사드려요

SONYLOVE님 블로그와 같이 Test Page, 워프 에니메이션처럼 첫페이지를 꾸밀수도 있습니다.


테스트 페이지

티에디션, 테터데스크에 여러가지 테스트 중인데 ooppa.tistory.com 도메인을 유지하고 기존 스킨을 전혀 안보이게 하면서 원하는 페이지를 보여주고 싶은데 뭔짓을 해도 안되네, 현재 블로그 테스트중이라 ooppa-info.tistory.com 리다이렉트로 넘어가도록 하고 다른 방법을 찾고 있다.

티에디션, 테터데스크의 기능이 매우 제한적이라..., 고민중인데 일단, 꼼수로 당분간 사용해 보자.


ooppa-info.tistory.com


테터데스크를 이용하여 시작페이지를 구성하는 방법은 정상적으로 구현이 되나 로딩시 느린감이 있고 로그인된 경우 딱지가 붙어서 그냥 포워딩방식으로 시작페이지를 유지합니다

저작자 표시 비영리 변경 금지
신고

묘한 오빠

남자의 호칭 중에 "오빠"처럼 묘한 것은 없다

    이미지 맵

    묘한 오빠/블로그 수정 이렇게 했다 다른 글

    댓글 16

      • 아이프레임으로 변경해서 사용해봐도 기존 skin파일을 승계받아야 정상동작하여 기존 #wrap {display:none;}을 지정하면 아무것도 안나옴.

      • 이건 숨기는것보다는.. 차라리 레이어를 이용하는게 좋아요.
        다른것의 위로 뜨게 하는거죠..

        #intro 안에 z-index: 999; 를 추가해보셔요. ㅎㅎ

      • #intro 안에 z-index: 999; 에 넣어도 전 안되던데..., 다시 한번 더 해봐야 겠네요. 원래 스킨이 1000번대가 있어 99999를 해봐도 안되더라고요. 차근차근 다시 한번 해봐야겠습니다.

      • JS 가 바디상에서 움직이니 z-index 로는 안되네요.
        그냥 안보이게 하는 방법을 쓸 수 밖에 없겠어요..;;

      • 일단 스타일에 아래 내용만 추가해 보셔요.

        #main {
        background-color: transparent;
        border: none; box-shadow: none;
        }
        #main-inner {
        background-color: transparent;
        border: none;
        }

      • SONYLOVE님이 알려주신 방법에도 왼쪽상단, 화면에서 첫페이지의 1/3만 나오고 나머지 sidebar위로 보이기는 하나 정상적으로 안나옴.

        연휴에 다른 방법 또 찾아보자

      • CSS를 이렇게 해봐도

        #tistorytoolbarid {
        display:none;
        }

        /*
        CSS Reset
        http://ooppa.tistory.com - demo - page
        */

        * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        }

        #particles {
        background: #16a085;
        font-family: 'Montserrat', sans-serif;
        color: #fff;
        line-height: 1.3;
        width:100%;
        height:100%;
        position:absolute; overflow: hidden; overflow-x:hidden; overflow-y:hidden;
        top:0px; left:0px; right:0px; bottom:0px; z-index:999999;
        -webkit-font-smoothing: antialiased;
        }

        #intro {
        position: absolute;
        left: 0;
        top: 50%;
        padding: 0 20px;
        width: 100%;
        text-align: center;
        }
        #intro h1 {
        text-transform: uppercase;
        font-size: 85px;
        font-weight: 700;
        letter-spacing: 0.015em;
        }
        #intro h1::after {
        content: '';
        width: 80px;
        display: block;
        background: #fff;
        height: 10px;
        margin: 30px auto;
        line-height: 1.1;
        }
        #intro p {
        margin: 0 0 30px 0;
        font-size: 24px;
        }
        #intro .btn {
        display: inline-block;
        padding: 15px 30px;
        margin: 10px 10px 10px 0;
        border: 2px solid #01755E;
        text-transform: uppercase;
        letter-spacing: 0.015em;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        color: #01755E;
        text-decoration: none;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s;
        -moz-border-radius-topleft: 35px; -webkit-border-top-left-radius: 35px; border-top-left-radius: 35px;
        -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px; border-top-right-radius: 15px;
        -moz-border-radius-bottomright: 35px; -webkit-border-bottom-right-radius: 35px; border-bottom-right-radius: 35px;
        -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
        }
        #intro .btn:hover {
        color: #000;
        border-color: #000;
        background-color:#ffcc00;
        }
        #intro .btn2 {
        display: inline-block;
        padding: 15px 30px;
        margin: 0 10px 10px 0;
        border: 0px solid #fff;
        text-transform: uppercase;
        letter-spacing: 0.015em;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        color:#01755E;
        text-decoration: none;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s;
        }
        #intro .btn2:hover {
        color: #000;
        }

        @media only screen and (max-width: 1000px) {
        #intro h1 {
        font-size: 70px;
        }
        }

        @media only screen and (max-width: 800px) {
        #intro h1 {
        font-size: 48px;
        }
        #intro h1::after {
        height: 8px;
        }
        }

        @media only screen and (max-width: 660px) {
        #intro {
        padding: 0 10px;
        }
        #intro h1 {
        font-size: 30px;
        }
        #intro h1::after {
        height: 6px;
        }
        #intro p {
        font-size: 18px;
        }
        #intro .btn {
        font-size: 12px; padding: 10px 30px;
        }
        }

        @media only screen and (max-width: 320px) {
        #intro h1 {
        font-size: 28px;
        }
        #intro h1::after {
        height: 4px;
        }
        }

      • 이렇게 적용해봐도 안됨

        <div id="particles">
        <div id="intro">
        <p><br></p><p><br></p>
        <h1>ooppa.tistory.com</h1>
        <p>남자의 호칭중에 "오빠"처럼 묘한 것은 없다</p><p></p>
        <a href="http://ooppa.tistory.com/notice/1757" class="btn" style="background-color:#ffcc00;border-color: #000; color:#000;">읽어보세요</a>
        <a href="http://ooppa.tistory.com/category/0" class="btn">최신글</a>
        <a href="http://ooppa.tistory.com/tag/%EC%95%8C%EB%A6%BC" class="btn">알림</a>
        <a href="http://ooppa.tistory.com/guestbook" class="btn">비밀, 이야기</a>
        <a href="http://ooppa.tistory.com/1733" class="btn">즐겨찾기</a>
        <p><br></p>
        <p><a href="mailto:anewrich@gmail.com" class="btn2">anewrich@gmail.com</a></p>
        </div>
        </div>

      • 저는 별로 도움이 되지 못한거 같은데 ..
        스스로 잘 해내셨네요.. ㅎㅎ
        테터데스크가 사람들이 잘 몰라서 그렇지 티스토리의 가장 꽃이라 할수 있죠. ㅎㅎ

      • SONYLOVE님 덕분입니다.
        시간을 남에게 나누어주신다는게 보통 어려운 일이 아니란걸 잘 알거든요.

        감사합니다.

        또, 모르는거 있으면 자주 찾아뵐려고 사이드바에 링크도 SONYLOVE님 때문에 하나 만들었습니다. ㅎㅎ

      • 티스토리 시작페이지 변경하는 방법
        - http://brucekim.tistory.com/119
        - http://ooppa.tistory.com/1668
        - http://blog.readiz.com/229

        이 외에도 구글에 검색하면 많네요

        처음에 사용한 스크립터는 아래와 같습니다
        <script type="text/javascript">
        var add = location.href;
        if(add == "http://ooppa.tistory.com/" || add == "http://ooppa.tistory.com/" ){
        location.href="http://ooppa-info.tistory.com";
        }
        </script>

      • 웹을 한다는게 html css js 어느 하나만 알아서는 안되더라고요.
        다 적절히 사용할줄 알아야겠더라고요.
        그래서 저도 요즘 js 에 대해 좀 더 알아보려고 해요.

      • 그러게요. 많이 배워야하는데 전, 요기까지만 하려고요. 끝이 없는 수렁에 빠지는것 같아서요.
        블로그하다 모르면 매일 찾아가겠습니다. SONYLOVE님 블로그는 배울게 너무 많아요 ^^

    *

    *

    이전 글

    다음 글