마크쿼리 스킨 티에디션 꾸미기 - 1

Posted by Readiz
2014.04.13 18:24 반응형 티스토리/Tistory


마크쿼리 스킨에 Fast TSilde v0.1 넣기


  Fast TSlide는 반응형 스킨 티에디션에서 작동하도록 디자인 된 슬라이드쇼 형식의 티에디션 요소입니다. 반응형 스킨에 알맞는 티에디션 요소가 없어서 제작하게 되었습니다. 모습은 하단과 같습니다. 본 블로그에서 예제확인 가능합니다.



  이에관한 자세한 사항은 아래 링크를 통해 우선 알아보세요.



Fast TSlide v0.1




  이 글에서는 마크쿼리 스킨으로 알려진 Ungki, H님이 제작한 스킨에서 반응형 티에디션 요소인 Fast TSlide를 삽입하는 방법에 대해 알아보겠습니다. 몇몇 분들이 Fast TSlide를 마크쿼리 스킨에 적용하는 법을 여쭤보셔서 포스팅합니다. 기본 적용법은 위 링크를 타고 들어가시면 됩니다. 여기서는 추가적으로 발생하는 Issue에 대해 해결책을 알아보도록 하겠습니다.





최초 적용 모습




 위에 첨부한 글의 가이드라인처럼 넣으면 일단은 이상이 없는 것처럼 보이지만 한가지 문제가 있습니다. 모바일처럼 보이게 하면...



좌상단 버튼 문제




 그림처럼 버튼이 가리는 문제가 생깁니다. 이 문제를 해결하기 위해서는,


	
.menu-link {
  z-index: 1000 !important;
} 
	


  를 style.css에 넣으시면 됩니다. 마크쿼리 스킨의 menu-link라는 부분의 z-index가 낮기 때문에 가려 보이는 현상입니다. 1000정도로 높이면 문제 없이 상단으로 메뉴버튼이 올라갑니다.




메뉴 활성화시 좌우 스크롤바가 나타나는 문제(?)


  사실 좌우 스크롤바가 생기는 것은 마크쿼리스킨 제작자님께서 그렇게 되도록 설정하셨기 때문이구요, FastBoot처럼 좌우 스크롤바를 어떻게하면 숨길 수 있는지 물어보는 분이 있으셔서 코드 한줄 가져와보면..


	
body {
  overflow-x: hidden;
} 
	


  마찬가지로 적용을 위해서는 style.css에 넣으시면 됩니다.








  추가적으로 기존에 강의한 Masonry로 된 벽돌쌓기식 티에디션을 만드는 방법은 아래 링크를 참조하세요.










이 댓글을 비밀 댓글로
    • jimoniko2048
    • 2014.04.13 20:15 신고
    잘보고 갑니다. 전자용품 구입시 다나와 추천하고 갑니다.
  1. 마크쿼리님꺼 스킨에 적용해보셧나보네요 ㅎㅎ
    예전이랑 바뀐게 없는거져?
    • 업데이트 하신다고 하더라구요~
      저도 달려야 하는데.. ㅋㅋ 이젠 안정화좀 많이 시키고 업시키려구요.. ^^
  2. 마크쿼리 스켈레톤 스킨의... 점포트론?? 이라고 하나요?? 그 부분을 잘만 활용하면,,, 다양한 방면에서 활용이 가능할거 같다는 생각을 예전부터 했었는데.... 패스트부트 스킨 적용하고 나서는 ... 다른 스킨을 볼 일이 거의 없어진거 같아요 ㅋ
    • Bootstrap에서 지원하는 기능이라.. 조금만 만지면 얼마든지 넣을 수 있긴한데,
      개인적으로는 상단에 커다랗게 자리잡는 이미지를 그다지 선호하지 않아서요.. ^^
      다른 스킨 안보실 수 있게 꾸준한 업 하겠습니다. ㅋㅋ 기능 추천좀 해주세요~
    • 사람마다 개개인의 취향이 다르니까요 ㅎㅎ 기능 추천이라... 딱히 생각해둔건 없는데...

      뭐랄까요.... 여자들이 좋아하는 방식으로 소소한 재미거리를 군데군데 넣어주면 어떨까 싶네요. 여자들이 좋아하는거라고해서 화사하고 알록달록한건 아니고요 ㅎㅎ

      디테일하지만 사소한것, 여자들은 보통 이러한 요소에 감동을 받는거 같더라고요. 그래서 스킨도 여자를 감동시킬때, 여지의 마음을 움직일 수 있는 성격의 것들을 추가해주면 좋지 않을까 싶습니다. 구체적으로는 설명하기는 조금 어려운데요.

      예를들면 위로가기 버튼이 그러한 요소중에 하나라고 볼 수 있을거 같아요. 정말 사소한 기능의 버튼이니만, 이용자에게는 매우 편리한 기믕을 제공하는거니까요 ㅎ

      그리고 구버전 사용자들에게는 제공할 수 있는 사항들이 제한적이긴 한데, 블로그에서 컨텐츠만 보고 가기에는 뭔가 좀 딱딱한 느낌이 들거든요. 그래서 많이는 아니더라도 약간의 재미를 위한 효과들도 있으면 좋을거 같아요.

      좀 더 구체적인 사항과 요소들이 떠오르면 그때 다시 말씀드릴께요 ㅎㅎ
    • ㅋㅋ 뭐가 재미있을라나요
      지금 티에디션 안쓰고 RSS로 메인화면 꾸미는 것과 media페이지 활용 등 기술적인 부분을 한번 손대보고 있습니다.
      우선은 /media에서 RSS를 긁어와 페이지를 채우는 것을 시도해보고 있는데 생각보다 잘 되네요. 이게 되면 더이상 티에디션을 쓸 필요도 없겠어요.. RSS를 ajax로 긁어오나 티에디션 로딩을 기다리나 시간이 거기서 거기네요. 망할 티에디션 속도.. -.-
  3. 기능한가지 추가하면 어떨까 해서 글 남깁니다.

    티스토리 기본 모바일 페이지 하단에 보면 다른글 보기가 두가지로 출력이 되는데요.
    하나는 카테고리 다른글 보기이고 또 하나가 블로그 인기글 보기 입니다.
    여기에 하나 더 추가 하자면 같은 태그를 쓰는 관련글 보기 기능인데요.
    글 더보기 기능이 이처럼 세분화되어 보여질수 있다면 방문자를 좀더 머물수 있도록 하는데 도움이 되지 않을까 생각합니다.
    표현 방식은 한영역에서 중첩되어 선택시 표현되는 방법인데요.
    http://firejune.com/ 이싸이트 보시면 article, Reactions, Export 영역처럼 각각 인기글, 다른글, 관련글로 표현될수 있으면
    좋을것 같다는 생각입니다.

    그리고 현재 카테고리 다른글 보기 기능도 플러그인을 통한 방식으로 출력되고 있는데 이 역시 새글보기 기능처럼 응용해서 스킨에서 기본으로 표현되어진다면 구지 플러그인을 켤 필요가 없을것이라는 생각입니다.

    또 다른 생각이 나면 글 남기겠습니다. 항상 수고해 주셔서 감사합니다.
    • 위에서 처럼 같은영역에서 세가지 메뉴가 표현되는(이런 기능을 머라고 불러야 할지 모르겠네요) 기능의 페이지 표현의 경우
      방명록이나 댓글창에서도 이용이 가능해 보는데요.
      예를들면 지금 댓글이나 방명록 타입을 두가지 혹은 세가지까지 쓰시는 분이 있습니다.

      1번은 티스토리 자체 댓글창이구요.
      2번은 Disqus 댓글창
      3번은 기타 페이스북이나 트위터 댓글창 등으로 응용해서 사용가능하실것 같습니다.
      별도의 영역을 필요로 하지 않기 때문에 지금처럼 모두 열거되지 않고 깔끔하게 처리될수 있을것 같습니다.

    • 의견감사합니다. 해당 플러그인은 개발할 수 있게 티스토리에서 오픈만 해줘도 좋겠네요. 해주질 않으니.. 대안으로 오픈API를 사용하는 방법을 생각해봐야겠습니다.
      그리고 방명록은 모든 분이 커스텀을 하는건 아니기에 기본지원은 힘들듯하고 강좌식으로 시간나면 탭형식 출력할 수 있도록 포스팅 해보겠습니다.

티스토리 툴바