호기심 가득! 모지모지!

티스토리 스킨관련해서 방명록에 질문을 남겨주신 분이 계셔서 간단하게나마 내용 올려봅니다. 기본스킨에서는 위의 이미지에서 보이는 좌측상단의 메뉴버튼을 클릭해야 펼쳐지는데 제 블로그에서는 마우스오버만해도 메뉴가 펼쳐집니다. 요 부분에 대해서 질문을 주셨네요. 마우스이벤트니 당연히 피씨에서만 해당하겠죠?^^ 별거 아니겠지만, 구지 클릭을 할 필요가 없어보여 바꿔봤네요~ 참고로 메뉴 닫을때 X버튼을 클릭하는건 변경하지 않았습니다. 암튼, 이렇게 변경하기 위해선 스킨의 script.js를 변경해야합니다. [파일업로드]에 보시면 아래쪽에 파일이 있습니다. 마우스오른쪽 클릭하셔서 속성에 들어가보시면 아래와 같이 주소가 나옵니다. 위 복사한 주소를 브라우저주소창에 넣으시면 아마 다운을 받으실 수 있을겁니다. 아참!!!..

어느 분의 요청으로 블로그 좌측화면에 방문수추가하는 방법을 간단히 적어보겠습니다. 제 블로그를 기준으로 위와 같이 PC화면(넓은화면)에서 오늘 방문자, 어제 방문자, 총 방문자 수를 표시하는 방법입니다. * 기본 스킨과는 조금 다른 부분이 있을 수 있습니다. 방법은 1. HTML상에 소스를 넣기 2. CSS에 스타일속성을 추가하기 순 입니다. 첫번째, HTML상에 좌측 붙이고자 하는 부분을 찾아 소스를 넣습니다. Today: Yesterday: Total: 는 아시겠지만 티스토리에서 제공하는 치환자입니다. 즉, 이 부분이 알아서 방문자수가 표시되는 부분입니다. HTML 상의 위치는 제블로그 기준이기 때문에 따라하시는 분은 기존 소스를 참고해서 적당한 곳에 붙여주세요. 대략 저 위에 표시된대로 74줄 근처..

티스토리 반응형 스킨을 만지작거리다보니 요즘 대세인 반응형 웹에 대한 자신감이 늘어가는 중!~ 기본은 뭐니 뭐니해도 각 화면별 CSS만 잘 정리해주면 된다는 것~ 이번에 손대볼 곳은 배경이미지입니다. 기본스킨은 배경이미지 하나를 사용하고 있습니다만, 그냥 하나로만 사용하기엔 심심하고 재미가 없죠? 그래서 각 화면별 그리고 펼쳐치는 메뉴쪽 배경을 바꿔 볼 생각입니다. 방법을 간단히 요약하자면, 1. 각 영역별 이미지를 업로드한다. 2. 각각의 CSS상의 이미지 URL을 바꿔준다. 정도입니다. 크게 어렵지 않으니 겁내지 마세요~ㅎ 일단, 교체할 영역을 살펴보죠~ 가장 큰 PC화면에서 볼때 좌측의 배경이미지가 나타나는 부분입니다. 다스베이더가 오토바이를 타고 있는 이미지 보이시죠? 두번째는 중간 크기로 브라우..

오래전에 추가한다 해놓고 크게 쓰임이 있지 않아서 생략했던 내용인데, 댓글로 요청해주신 분이 계셔서 간단히 적어봅니다. 블로그를 하다보면 어쩔 수 없이 방문자수를 계속 지켜보게되더라고요. 다른 블로거님들도 마찬가지일거라 생각됩니다. 물론 크게 신경쓰지 않는 블로거들도 분명 있을테지만요~ 반응형 스킨#2의 경우 모바일버전에서는 표시가 되지 않습니다. 그래서 별도의 특별한 디자인은 하진 않고, 치환자를 적당한 위치에 위치시켜서 추가해봤습니다. 방법은 매우 간단합니다. 일단 아래 사진을 참고해주세요~ 위와 같이 HTML상에 티스토리 방문자 치환자를 추가해줍니다. Today : Yesterday : Total : 순서대로 오늘, 어제, 총 방문자를 나타내는 치환자입니다. 그런 다음, 이제는 CSS상에서 clas..

브라우저의 기본기능 개발자도구를 이용해서 CSS를 쉽게 편집하는 방법을 올려봅니다. 일반적으로 소스보기 후 해당 소스를 하나하나 찾아가며 수정하는 분들이 혹 있으실까바 조금은 편한 방법을 소개해드립니다. 이미 어느정도 HTML을 만질 수 있는 분들은 해당사항이 안될지도 모르겠네요. 위의 사진처럼 익스플로러11 기준, 오른쪽 상단을 보시면 톱니바퀴가 보이실겁니다. 클릭하시고 보시면 메뉴에 개발자도구가 있습니다. (타 브라우저도 비슷한기능들이 있습니다.) 그리고 익스 버전별로 메뉴 모양이 조금씩 다른데 기능은 거의 동일하게 들어가 있습니다. 클릭하시면 아래처럼 브라우저의 하단에 창이 열립니다. 새창으로도 열리기도 하지요~ 옵션에서 변경가능합니다만 설명은 생략할게요~ 개발자도구 창을 보시면 맨앞에 DOM탐색기..

티스토리 스킨 포럼에서 질문이 있어서 답글로만 알려드렸던 내용인데 댓글로 질문을 달아주신 분이 있어서 작성해봅니다. 티스토리스킨 반응형 #2 메인화면, 글목록화면과 게시물안의 이미지에 확대효과주기입니다. 이미지위에 마우스를 가져다 대면 이미지가 살짝 확대되는 효과입니다. 솔직히 너무 많이 주면 버벅일 수도 있어서 이런 효과는 조심해서 주는편이긴한데 나름 괜찮아서 추가해보았습니다. 현재 제 블로그화면들의 이미지를 확인해보시면 어떤 느낌의 효과인지 확인하실 수 있습니다. 본 게시물에 들어간 이미지들 위로 마우스를 가져다 대면 살짝 커지죠? 일단, 위의 CSS는 메인화면 즉, 글 목록화면의 썸네일에 적용되는 소스입니다. 줄 수를 보시고 비슷한 위치에 넣어주시면 됩니다. 소스는 아래 .list_content ...

티블로그를 운영하시는 분들 중에 도메인을 사서 2차주소로 연결해 운영하시는 분들이 계실겁니다. 저역시 도메인 mojimoji.co.kr를 산 뒤 2차주소를 사용하고 있습니다. 모바일과 웹에서 보시면 제 블로그 하단에 애드핏광고가 보이실겁니다. 가끔 대체광고로 제가 넣은 배너도 뜨곤하죠~ㅋ 애드핏광고를 붙이면서 가장 큰 문제가 사이트는 동일한데 주소가 두개라서 애드핏 광고단위를 각 주소마다 생성한 뒤 스크립트를 그냥 붙이면 배너가 작동을 제대로 안한다는 겁니다. 애드핏은 해당 주소값과 매칭이 되어야 배너가 뜨는데요. 서비스에서 제공해준 스크립트를 고대로 붙여넣기만 한다고 알아서 배너가 나오지 않습니다. 이것때문에 별의 별 짓을 다해보고 결국엔 질문까지 남겨 답변을 받았으나.... 늘 그렇듯 아래와 같이 별..

CSS를 조금 아신다는분은 뭐 사실 많이들 아실 내용이긴 하지만, 간단히 border-radius를 넣어 글에 들어간 이미지나 기타 박스형태의 디자인을 라운드형태로 변경해주는 방법입니다. 티스토리 반응형 스킨이 모바일대응에 초점이 맞춰진 바 큰 이미지를 박스형태로 보여주는 디자인이 많은데요. 그런 박스가 너무 딱딱하게 여겨진다는 분들이 따라하면 좋을거같네요. 일단, 위의 이미지처럼 본문에 삽입된 이미지를 포토샵 작업에서 라운드처리를 하지않고도 라운드된 형태로 변경할 수 있습니다. 그리고, 티스토리스킨 반응형#2에서 관련글 리스트의 형태가 위의 그림에서처럼 박스형태인데 그것또한 라운드처리할 수 있습니다. 윗부분은 바로 본문이 들어가는 위치 클래스명이 area_view이군요. CSS창을 열어서 위와 같은 위..

티스토리 반응형 #2 스킨 뜯어고치기~ 재미있군요. 오늘은 늘 신경이 쓰였던 TOP버튼의 추가하기입니다. 글을 읽다 내려가다보면 다시 상단으로 가야하는데 PC에선 그렇게 불편함을 모르겠는데, 이게 모바일에선 상당히 불편시렵습니다. 그래서 오늘은 상단으로 이동하는, 그것도 스크롤효과가 있는 TOP버튼을 붙여봤습니다. 글 오른쪽 아래에 보시면 동그랗게 TOP버튼이 붙어있죠? 요런 작은게 있다 없으면 또 불편하죠~ 특히나, 모바일에선 손가락으로 스크롤하는게 무척 힘이 듭니다;; 자~ 붙여볼까요? 일단, 버튼 이미지 만들기는 귀찮으니 그냥 HTML로 만들었습니다. 모양은 반응형#2 스킨의 아이콘 스타일대로 동그랗게 만들었습니다. 이미지를 사용하실 분은 요기에 배경이미지를 적용하시면 됩니다. * 추가 구글배너나 ..