[FastBoot]07.티에디션 꾸미기 Vol.1

Posted by ArteLog RATTLE
2017.04.16 18:58 IT/Fastboot

 이제부터 본격적으로 티에디션으로 첫화면 꾸미기를 해봅시다. 제 블로그 첫페이지 티에디션은 갤러리형으로 되어 있습니다. 리스트형이나 타이틀형은 이미지를 좋아하는 저에게 그렇게 큰 매력을 느끼지 못했습니다. 그래서 리스트형이나 타이틀형을 원하시는 분들은 궂이 이 포스팅을 구독할 필요는 없습니다. 자세한 내용은 여기를 클릭하면 보실 수 있습니다.

· 티에디션도 코딩할 수 있다?


 네. 티에디션도 코딩을 할 수 있습니다. 하지만 티에디션 역시 티스토리 블로그처럼 고유 치환자가 있습니다. 즉, 웹퍼블리싱 능력이 갖춰지더라도 티스토리 블로그 치환자 또는 티에디션 치환자를 모르면 티스토리 블로그 스킨을 제작한다는 것은 불가능에 가깝습니다. 제가 직접해보았는데 기본적인 웹퍼블리싱 코딩은 티스토리 치환자의 우선순위에서 밀리기 때문에 팅겨납니다. 쉽게 말해서 '웹퍼블리싱 능력 + 티스토리 치환자'를 완벽히 이해해야한다는 뜻입니다. 하지만 티스토리 스킨 초보자에게 그런 능력을 어느 세월에 키우겠습니까? 웹퍼블리싱도 최소 3개월 이상 걸리는데 말이죠. 이 포스팅을 잘 따라오시면 충분히 구현할 수 있습니다. 큰 틀은 [Ctrl + c], [Ctrl + v]로 끝이나는 것이니까요. 


티에디션 티환자


더보기



자, 일단 티스토리 블로그 티에디션에 들어가보겠습니다. 


 

 기본적으로 티에디션이 적용된 티스토리 블로그는 우측 상단에 '티에디션' 버튼이 있습니다. 저번시간에 티에디션을 적용하는 방법을 포스팅 했으니 이 과정은 넘어가겠습니다. 



 '티에디션' 버튼을 누르면 다음과 같은 화면이 나오는데요. 왼쪽 티에디션 리모콘이 비활성화 되어있죠? 이유는 티에디션을 활성화할 부분이 없어서 그렇습니다. 위 이미지 빨간 테두리 안에 '+'를 눌러주세요.



 활성화 된 티에디션이 나타나 보이죠? 중간에 '아이템을 선택하세요.'라는 문구와 함께 말이죠. 자 여기서 중요한 것은 왼쪽 티에디션 리모콘에 '아이템 → 목록형'에 들어가셔서 아무 아이템을 선택하시면 됩니다. 여기서 TIP은 '목록형'입니다.



 특히 티에디션 리모콘 상단 메뉴에 '디자인'에서 '글제목'을 보시면 글자수를 조정할 수 있습니다. 이 글자수는 후에 수정이 안되기 때문에 반드시 지금 설정하고 가세요. 저는 50자를 썼습니다.


다음 이 파일을 다운 받으시고 티에디션 HTML를 수정해봅시다.




HTML를 수정하기 위해서 [디자인 → HTML]을 클릭해주시면 됩니다.



 HTML 버튼을 클릭하면 다음과 같은 화면이 나오는데요. 안에 식별할 수 없는? 코드들이 있습니다. 뭐 사실 웹퍼블리싱 능력이 있다면 대략적으로 해석은 가능합니다. 티에디션 치환자와 번갈아봐야하는 번거로움이 있지만요. 여튼 저희는 HTML 안에 있는 코드들을 모두 삭제해줍니다. 그 다음 위에서 다운받은 ' FastBoot 티에디션 HTML 소스.txt를 복사해서 붙여넣기만 하면 끝입니다. 



그리고 마무리, 티에디션 리모콘에 있는 '적용'을 누르고 티에디션 맨 위 상단 오른쪽 '적용하기'를 누르면 자신의 블로그에 FastBoot 반응형 티에디션이 적용되는 것입니다. 


카테고리는 티에디션에서 '글선택'에 클릭하여 자신이 보여주고자 하는 카테고리 또는 특정 글을 선택해주시면 끝입니다. 이로써 티스토리 블로그 FastBoot 티에디션 반응형 첫화면 꾸미기 Vol.1을 마치도록 하겠습니다. 가능하다면 카테고리 색상과 글자 크기를 조정하는 방법도 포스팅하겠습니다. 이렇게 되면 복잡한 HTML과 CSS를 겪어야하니 저도 마음의 준비를 하고 포스팅하겠습니다. 감사합니다:)


관련글


[Tistory Tip]브랜드 블로그의 첫걸음, 도메인

[FastBoot]01.제 블로그 스킨은?

[FastBoot]02.FastBoot 스킨등록 방법

[FastBoot]03.사이드바, 어디갔니?

[FastBoot]04.사이드바와 본문 좌우 위치바꾸기

[FastBoot]05.사이드바와 본문 너비 조정하기

[FastBoot]06.티에디션 나타나게 하기



포스터 사진 Readiz Logo


이 댓글을 비밀 댓글로
  1. 제가 이거 티에디션으로 만들었는데 데스크톱에서는 잘 보이는데 모바일로는 타이틀을 만들면 타이틀이랑 게시물들이랑 겹쳐버려요ㅜㅜ 그리고 사진들이 다 크기가 다르게 찍혀버려서 보기 안좋은데 1:1 비율에 다 사진 같은 크기로 나오게 하려면 어떻게 해야하죠? 혹시 방법이 있나요ㅜㅜ 원본 비율로는 제가 1:1로 이미 만들어놓은 썸네일까지 크기가 제각각이라서요..ㅜ
    • 이 작업은 또 다시 수정을 하셔야합니다. 나중에 저녁에 상세히 알려드리겠습니다.
    • 정말 감사합니다! 너무 바쁘시면 안해주셔도 되요! 사진들 비율 달라도 나름 이쁘더라구요 ㅎㅎ
    • 태호베어스님^^ 오늘 제가 바빠서 컴퓨터를 못했네요. 내일은 꼭 해드리도록 노력할게요! 좋은하루되세요:)
    • 아 감사합니다! 전 괜찮으니 편하실 때 해주세요~!
    • 일단, 첫번째 질문인 모바일에서 타이틀을 만들면 타이틀이랑 게시물들이 겹쳐진다는 내용은 모바일로 확인한 결과 겹쳐지는 부분을 확인되지 않았습니다.

      그리고 1:1 비율로 썸네일이 보이게 하려면 티스토리 대표이미지를 1:1로 하셔야 됩니다. 원본 비율이 1:1이 아닐경우 제 각기 다른 비율로 썸네일이 나타나집니다. 예를 든다면 (1000x1000) 또는 (700x700) 등의 비율로 px 단위가 1:1 일 경우에만 썸네일이 1:1로 나타나집니다. 티에디션으로 썸네일 크기를 1:1이 아닌 다른 비율로는 수정하지 못합니다.

      그리고 태호베어스님의 블로그 최근글 썸네일이 다 나타나지 않은 현상이 보이는데 이는 http://artelog.kr/36 주소의 글을 참고하셔서 수정하시길 바랍니다.

      궁금한 내용이 있으시면 아는 한 다 알려드리겠습니다. 감사합니다:)
    • 감사합니다 ㅜㅜ
      근데 그 모바일로 했을 때 안겹쳐지는건, 제가 타이틀을 아예 없애버렸어요.
      없애도 보기 괜찮아서 그냥 이대로 쓰려고요!
      어쨌든 정말 감사드립니다 ㅎㅎ
    • 네. 태호베어스님 블로그가 참 알차게 잘 구성되어져 있더라구요^^ 잘 배우고 자주 소통했으면 좋겠습니다. 감사합니다:)
    • 아르테님 블로그도 제가 맨 처음 스킨 바꾸면서 도움 정말 많이 받았습니다! 감사합니다 ㅎㅎㅎ
      자주 놀러오도록 하겠습니다!!