Daisy's Lifelog 언젠가 내가 두고 온 꿈들이 자라는 그 곳 ♪

blog image

2015.08.05 수정했습니다. ^^


자꾸 묻는 분들이 계셔서,, 


일단 반응형스킨에서 티에디션 제어하는 스타일은(폭값조절) 이미 알려주신 착한분들이 많아요. 관련된 단어 몇개만 검색해도 쪼로록 결과가 뜰겁니다. 

너무 감사하게도 저도 그분들의 팁을 가져다 썼구요, 이번 공개한 스킨에도 일부 적용하였습니다. 


지금 포스팅하는것은 그것들의 내용이 아니라,, 사실 너무 간단한것인데,, 하하


원래 티에디션의 이미지 보실까요??


현재 배포중인 스킨테스트 블로그의 티에디션 화면 입니다. 


썸네일의 기존 비율을 무시하고 고정된 사이즈로 배열을 합니다. 
물론 일장일단이 있겠지만, 제 경우에는 사진본디의 느낌이 사라지는것도 같고, 
해상도를 줄이면 영역만 요상스럽게 쭈그러들어서,, 저렇게 아이의 사진이 영역밖으로 사라지기도 하는게, 싫더라구요. 
티에디션 들어가서 일일이 포지션을 바꾸기도 귀찮고. 

요즘은 또 모바일로 포스팅을 하기도 하다보니,, 더더더 귀찮아서~~ 

현재의 모습으로 구현을 했어요.  



해상도만 다른, 같은 블로그의 같은 첫화면인데, 티에디션의 모습이 다릅니다. 

이걸 어떻게 한거냐고 물으시는데요,, 알려드립니다. 



먼저, 이 스타일의 특징은, 

  1. 티에디션 썸네일이 본래 사진 비율대로 나옵니다. 
    즉, 가로 세로 각 버전대로 삐뚤빼뚤하다는거지요. 
    제 블로그 처음으로 가보시면 주로 세로 사진이 많지만 높이값이 살짝씩 다른것을 볼 수 있습니다. 
  2. 스타일이나 스킨파일을 수정해도 '너비조정'을 클릭할 필요가 없습니다.
    본문쪽 너비에 따라 가변폭을 사용하므로 (이미지도) 너비조정을 할 필요가 없어요. ^^* 
     
그러니 입맛에 맞으시는 분만 사용하시면 되겠습니다 ^^*

그럼 어떻게 만들면 되냐???

  1. 먼저  style_d.css 파일을 다운받아 css 파일을 업데이트 합니다. 
  2. 티에디션에서 아이템을 각각 웹용으로 하나 모바일용으로 하나, 두개를 만듭니다. 
  3. 아이템의 HTML 을 아래 이미지 참조하여 디비전으로 감쌉니다. 

    네,, class="forweb" 은 웹용이고, class="forMobile" 은 모바일용입니다. 

  4. 저장을 하고나면, 각 해상도별로 지정된 아이템만 보일겁니다.
    윈도우 창크기를 조절하면서 잘 적용되는지 확인해봅니다. 끝.  

쉽죠잉????
별거 아닙니다. ^^*
포스팅을 위해 쓰고보니 많은 응용을 할수도 있겠;;; 다만 귀찮고; 힛.

그럼 이만, 총총 ^___^





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

댓글 22 개가 달렸습니다.

  • 비밀댓글입니다

    • BlogIcon Daisy

      읭?? 아이고 이런, 제 설명이 어려웠나요@@;;;

      1. 아뇨.
      맨위 캡쳐화면처럼 웹에서 보이는 아이템과 모바일에서 보이는 아이템이 다르지요? 두 아이템을 차례로 생성하고,
      2. 각각 클래스로 감싸주면 (티에디션 아이템>디자인>html) 끝인데,, 대체 어디가 어려울까요?

      그리고 님 블로그 로고가 제 로고네요??? ^^;;;

    • BlogIcon Daisy

      포스팅 내용을 수정했습니다.
      토니님 다시한번 시도해봐 주세요.

      그리고, 블로그 로고 변경부탁드립니다. ^_^

  • 비밀댓글입니다

    • BlogIcon Daisy

      반가워요^^*
      네 태터데스크에도 잘 되신다니 다행입니다.
      아주 단순한 스킬이에요^^

  • 비밀댓글입니다

    • BlogIcon Daisy

      아! 그럴수가 있겠군요.
      pc에서 보고 후에 답해드릴께요.
      현재 휴가중이라 ^^
      좋은 블로그 운영중이시네요. 리뷰가 깊이가 있어요. 자주 들어가뵐게요 ^^
      오늘은 일단 총총

    • BlogIcon Daisy

      서흔님 ^^
      포스팅 내용을 수정했습니다.
      위 내용중에 있는 css 파일을 다운받아 css 내용을 업데이트 해주세요.
      잘 안되면 다시 알려주세요.

    • BlogIcon 서흔(書痕)

      감사합니다!!

      덕분에 잘 해결했습니다 ㅎㅎ
      능력자시네요 +_+

  • BlogIcon 23FOR


    스킨 바꾸고나서
    새롭게 추가된 태그는 사이드바 태그목록에 안떠요 ㅠㅠ
    해결방법있나요?

    • BlogIcon 23FOR

      스킨 다시 설정하니까
      태그업뎃됐네요;

  • 비밀댓글입니다

    • BlogIcon Daisy

      클래스로 감싸는 이유는 디스플레이만 제어하는것이지 아이템 타입은 티에디션으로 설정합니다 ^^.
      저는 아마도 모바일 뷰는 목록형에서 선택한거 같아요. 목록형 아이템중에 제것과 같은게 있을텐데요. 잘 찾아보시길 ^^~

    • 비밀댓글입니다

  • BlogIcon 소울라이어

    일단 스킨 너무 감사드립니다.
    믿으실지 모르겠지만..웬만하면 안 물어보고 혼자 해보려고 이것저것 다 해보았으니 실패했습니다.
    이틀정도...ㅠ 이해가 안가는게요.
    도대체 2번에서 티에디션에서 각각 웹용으로하나 모바일용으로 하나 이게 도대체 어떻게 되는거죠?
    그러니까....제말은요 어 컴퓨터로 제 홈페이지에서 티에션 들어가면 선택영역이 나오고 거기서 뭐.
    목록형 조합형 등등 정하고 디자인쪽 보면 HTML 있는데요.
    어떻게 2개를 각각 생성하라는지 정말 모르겠습니다 ㅠ

    • BlogIcon Daisy

      그냥 아이템을 두개 생성하는거에요. 가령 하나는 썸네일형으로 하나는 목록형으로. 생성된 아이템의 디자인>html 에서. 썸네일형은 웹용으로 사용하고 목록형은 모바일용으로 사용하기 위해 클래스를 지정하는겁니다.

  • BlogIcon HAWOOL

    우와 멋지신 팁입니다. !

    이 기능은 현재 티에디션에서 아무거나 다 가능한가요..?

    • BlogIcon Daisy

      이 방식은 미디어쿼리로 해상도에 따라 디스플레이를 제어하는것이니, 그 어떤 개체도 다 가능합니다 ^^

  • BlogIcon 2웨인

    기본 반응형 스킨을 3개월째 사용중입니다. 예전에 감사 인사를 남겼는지 확실치 않아 다시 남깁니다. 덕분에 깔끔한 스킨 잘 쓰고 있습니다.
    위에 티에디션 변경은 어째서 인지 저는 변경이 안되네요. 기초 지식이 전무한 상태인데, 쉽다고 설명하시니 쉽나보다 하고 달려든 문제일까요?
    무튼, 이렇게 공개해주신 것 만으로도 너무 감사합니다. 다시 한 번 천천히 도전해 보겠습니다. 남은 추석 연휴 즐거운 시간 보내시기 바랍니다.

  • 비밀댓글입니다

    • BlogIcon Daisy

      잘 하셨네요. ^^
      이미지가 가로형이라 그런듯합니다.
      제목도 한줄로 나오면 좋겠는데 css 를 다룰줄 알아야,,,^^
      타이틀명은 티에디션에 옵션이 있을거 같네요.
      없으면, 티에디션>디자인>html 에서 타이틀 부분을 지워버리세요. ^^

  • 비밀댓글입니다

댓글쓰기