티스토리 반응형 홈페이지에 티에디션 rss로 적용하기
차일피일 미루다가 작심하고 며칠걸려 저의 블로그도 티스토리 반응형 홈페이지로 변신시켰어요. 로딩을 빠르게 하고 폰트나 아이콘 등 되도록 자제하고 png 등도 압축하고~ 나름 가볍고 심플하게 제작하려고 열심히 해 봤네요. 몇가지는 귀찮아서 안했지만.. ㅎㅎ 그런데 비록 버전 0.5 정도로 완성을 한 후 어느 정도 만족감을 느꼈지만, 가만 보니 메인을 이쁘게 치장할 생각으로 티스토리 티에디션을 적용했더니, 열이 슬 나네요.. "이걸 애초부터 생각안하고 이런~!!" 하며 보기 좋게 재수정 작업에 들어가야 했네요. ㅠㅠ
위에가 티스토리 에디션으로, 아래가 rss를 불러와 적용한 모습.
티에디션 스타일시트 건들 생각에 머리아파 하다가 다른 분들은 어떻하나 싶어 찾아보니, 반응형 홈페이지에 일가견이 있으신 readiz님의 공개 스타일을 티에디션에 적용했네요. 하지만, 아무래도 티에디션 자체 버그 같은데... 얼마 사용하다 보면 가로 넓이나 이미지 사이즈가 변해버리는 문제가 발생하네요. 브라우저 가로 넓이 보정이 안먹힌다는 의미죠.. 그렇다고 원하지도 않는 모양새가 보기 않좋아.. 곰곰이 생각하다. "rss 피드를 데리고와 뿌려볼까?" 하는 생각까지 하게 되었네요.
티에디션으로 넓이를 알맞게 지정해도, 얼마후 아래 이미지처럼 가로사이즈, 이미지 사이즈 축소되는 현상이 발생한다.
일단 제목이나 내용을 불러와 뿌려주는 스크립트는 해 보았지만, 맘에 안들어 무료에다 이미지까지 뿌려주고 세세한 옵션을 제공하는 rss 제너레이터 서비스 하는 곳을 찾았답니다.
여러군데 서핑하다 이것도 귀차니즘이 슬슬 발동할 때즘에 발견한 서비스라 이걸 적용해 보았네요. 뭐~ 이정도면 쓸만하다 싶은데요?
저의 블로그 메인은 어떠신지요?^^
메인 첫 두 포스팅은은 티에디션 그대로 적용했고,. 아래 부분은 오른쪽 목록에 맞게 피드 아이템 갯수를 조정했네요.
티스토리 반응형 블로그에 티에디션 rss 적용하는 법을 포스팅해 볼게요.
1. 일단 http://feed.mikle.com/에 접속해 자신 블로그의 rss 주소를 입력하고 세부옵션을 넣습니다. (일본 어느 회사에서 제공하는 서비스 같은데, 무료라니 멋지네요.^^ 저작권)
예) http://baraza.tistory.com/rss
2. 팁을 말씀드리자면, 옵션에서 반응형을 선택하지 마시고, 스크롤 관련 사항도 선택 no, Text & Thumbnail은 선택하시구요. Advanced Settings을 눌러 자신의 기호에 맞게 설정하시면 오른편에 소스 코드가 나옵니다. 그것을 티스토리 티에디션에 붙여 넣기 하시면 됩니다.^^
위처럼 rss 코드가 나오는데, 약간 변경과정을 거쳐야 티스토리 블로그 메인으로 사용할 수 있다.
3. 이제는 티스토리 반응형 블로그에 맞게 몇 가지만 손봐 주면 됩니다.
위의 2번에서 불러온 스크립트 소스 맨위와 아래에 각각
<div style="height: auto; max-width: 800px;>와 </div>를 넣어 주시면 됩니다. (800px에는본인 블로그에 맞는 넓이 숫자를 넣으세요.)
4. 그리고 스크립트 세부설정은 제 티스토리 블로그 기준으로 올려 볼게요.
티스토리 블로그 메인에 rss 피드 아이템을 불러와 완성도를 높여 보자.
rssmikle_frame_width: "99%" (티스토리가 반응형일 경우, 취향에 맞게 수정)
rssmikle_font: "돋움,나눔고딕,NanumGothic,Arial,Helvetica, sans-serif", (자신 블로그에 맞은 폰트 설정)
rssmikle_font_size: "100%" (티스토리 반응형 옵션)
sort: "Rnd" (랜덤으로 함, 제 블로그 상단이 티에디션을 사용한 최신 글 2개라 아래 rss 피드는 중복으로 보이는 것을 피하기 위해 랜덤으로 했네요. - 본인이 피드아이템을 8개로 세팅했다면 그 것 중에 랜덤으로 뿌려 주어요.)
뭐 사실 티에디션 디자인을 안하고 그냥 rss만을 사용해도 괜찮을 것 같네요.)
rssmikle_item_title_length: "80" (이건 제목 글자수)
rssmikle_item_description_length: "200" (이건 내용 글자수)
그리고 마지막으로 datetime_format: "%Y.%m.%d %I" (데이터 포맷 함수 변경.. 2015.03.13 10 식으로 변경됩니다.)
년도 월 등의 날짜가 순서가 맘에 안들고 글 쓴 초까지 나와 버려 위와 같이 변경시켰네요. 아무래도 mikle rss 서비스가 데이터 포맷 날짜 시간 타입을 제대로 모두 지원하지 않는 것 같네요.
이 정도로 하면 아쉽지만 블로그 메인 정렬이 어느정도 이뿌게~ 될 것입니다. 이미지 크기 또한 정렬되구요. 익스플로러8은 문제없이 보이기만 하면 되기에 반응형으로 넘어 왔네요. 그리고 다음 애드핏이 전면형을 지원안하기에... 그런 이유로.. ㅎㅎ
사실 다음 애드핏이 반응형도 지원하고 좀 살아나면 좋겠네요.
그리고 한가지!
혹시 애드센스 쓰시면 반응형으로 변경할 경우 문제가 되네요. 저 같은 경우도 초반 포스팅에 맨 상당 광고가 겹쳐 결국 숨김으로 했다 삭제를 하려고 하네요. 또한 336사이즈도 과감히 숨김 지정했놨구요. 반응형으로 넘어가려 하니 득도 있겠지만 실도 생기긴 하네요..^^
그리고 꽤 접속하는 포스팅은 어쩔 수 없이 몇 개씩만 애드센스 사이즈에 맞게 수정하고 있네요.
이상 rss를 이용해 티스토리 블로그 메인에 적용하는 법이었습니다. 물론 각 포스팅 본문 아래에도 적용해 볼 까 생각해 봤지만, 속도저하를 우려해 수정 대상에서 제외했네요.
생각해 보면 정말 다음 티스토리 서비스가 좋다는 느낌을 지울 수 없는데요. 그런 이유로 애착이 참 많이 가는 블로그에요.^^
panorama.zip
panoramat.txt