티스토리 첫화면 간단하게 꾸며보기

그동안 첫화면 꾸미기 기능이 있는데도 사용하지 않았습니다. 원인은 제가 원하는 스타일로 나오지가 않기 때문입니다.

하지만 곧잘 꾸며놓은 블로그를 보면 나도 해볼까....하는 생각이 들었는데 이번에 걍 한번 적용해보면서 간단하게 적용하는법을 알려드립니다.

저의 경우를 말씀드리니 본인들은 각자 알아서 사용하시길 바랍니다.

저는 큰 그림으로 아래와 같은 형식으로 꾸몄습니다.

첫번째 배치

즉 제목부분이 들어가고 이 제목부분은 css 로 살짝 수정해줍니다. 아래부분을 보시면 아시겠지만 최신글 섬네일과 html 직접입력 두가지만 사용해서 공통적으로 보여줍니다.

제목들어가고, 섬네일 들어가고, 그아래 광고가 들어갑니다.

섬네일은 최신글, 포터블, 스킨배포 이렇게 3가지가 들어가고 맨아래 블로그 팁은 텍스트 형으로 들어갑니다.

아이템 배치야 누구나 원하는대로 얼마든지 할수 있습니다.

하지만 염두해두어야 할것이 있습니다. 바로 배치입니다.

뭔가는 공통적으로 적용해줘야하고 배치를 해야합니다. 그래야 일괄적이고 보기에도 좋습니다.

되도록이면 섬네일이면 섬네일로 통일, 텍스트면 텍스트로 통일해야 보기에 좋다는 이야기죠.

여기에 한가지 정도는 해드라인형으로 상단이나,중간에 삽입하는것도 좋습니다.

여기서 저는 섬네일을 선택한것은 바로 광고와의 조합입니다.

광고라는것이 항상 텍스트만 나오는것이 아니기에(물론 강제적으로 하면 할수있지만) 그림과 어울리도록 섬네일을 선택한것입니다.

두번째 제목의 일괄적용.

저는 div id 를 하나 생성해서 스타일을 입혀서 모두 똑같이 적용을 했습니다.

즉 제목부분에 아래와 같이 입력을 했습니다.

최신글

이런식이죠.

즉 최신글이면 최신글, 무설치면 무설치, 또는 스킨배포....카테고리 제목을 적어두어서 매번 최신글이 올라오는 자리에 찾아보기 편하게 .... 그리고 사용하기 편하게 해두었습니다.

즉 코드는 html 직접입력으로해서 그대로 넣고 제목만 바꾸어서 사용하면 됩니다.

그리곤 스타일을 일괄적용해두었습니다. 아래처럼요.

.text-div{background:url(./images/down1.png) no-repeat right center; background-color:#333; color:#fff; padding:20px 10px; font-size:26px; border:1px solid #333;}
.text-div:hover{background:url(./images/down2.png) no-repeat right center; background-color:#EEEEEE; color:#333;}

일단 배경을 블로그색과 비슷한 색으로 주고 화살표의 아이콘을 사용하기 위해 이미지 두개를 사용했습니다.

또 마우스오버 효과를 주기위해 hover 을 사용해서 마우스을 올리면 색이 변하게끔해서 알아보기 쉽게 했습니다.

미리보기를 하자면 아래와 같고 코드는 <div class="text-div">여기에 제목을 넣습니다.</div>입니다.

여기에 제목을 넣습니다.

결론은 이렇습니다.

배치에 신경쓰고, 일괄적으로 제목부분을 적용해서 단락으로 나누어 보기 편하고 찾기 편하게 하였습니다.

응용은 여러분의 몫입니다.

!! 도움이 되셨다면 추천을...마우스를 올려보세요. 우측아이콘은 즐겨찾기 !!