반응형
오래간만에 스킨을 바꾸어 보았습니다.
한번 스킨을 적용하게 되면 자신의 입맛에 맞추어서 바꾸다가 보니, 다른 스킨으로 바꾸기가 쉽지 않은데, 한 3시간정도 투자를 하니 스킨을 바꾸고, 이전것의 기능과 비슷하게 추가, 수정 등을 할 수 있더군요.
제공되는 스킨을 그냥 사용하시는것도 괜찮은 선택이지만, 스킨을 내 입맛대로 조금씩 바꾸고 싶으신 분이라면 참고하시면 좋을듯 한데, 스킨을 만들거나 그런 이야기는 아니고, 제 경험상 스킨을 변경한후에 어떻게 수정하고 바꾸어야 하고, 유의할점은 무엇이 있는지를 간단히 적어 보겠습니다.
1. 변경하기 전에 기존 스킨을 저장해 두십시요.
새로 추가된 기능인데, 저장을 하면 html, css, 사이드바, 화면출력까지 저장이 됩니다.
다시 복원을 해야 하는 경우도 생길수 있으니 꼭 저장을 하시기 바랍니다.
사이드바중에서 태그입력기로 자신이 코드로 입력한것은 사용자 모듈에 저장을 해두세요.
새로운 스킨을 적용하면 기존의 사이드바의 태그입력기들은 사라지니, 사용자 모듈에 저장을 한후에 다시 복원을 하면 됩니다.
화면출력 부분도 저장이 안되고, 초기화가 되니, 화면 캡쳐등을 해놓고, 나중에 참고를 하시면 좋습니다.
2.좀 테스트를 해보고, 하나씩 추가해서 제대로 만든후에 적용을 하고 싶다면,
블로그를 하나 더 만들어서 테스트를 하십시요.
티스토리는 아이디 하나당 5개의 블로그를 만들수 있는데, 블로그를 테스트용으로 하나 더 만들어서 광고도 붙여보고, 수정할것을 다 수정해본후에 skin html/css 편집 파일 등을 복사해 오면 됩니다.
3. 본문 스타일 편집하기
스킨 위자드라는것이 있어서 어느정도 수정이 가능하지만 한계가 있습니다.
제대로 변경을 하려면 style.css 를 수정해야 하는데,
가장 많이 수정하는것이 본문 내용 부분의 폰트종류, 크기, 줄간격 등을 수정 합니다.
sytle.css 를 복사해서 메모장에 넣고 article 부분을 찾아서 입맛에 맞게 수정해 주시면 됩니다.
이외에도 다른 부분을 수정하고 싶다면, 브라우저에서 소스보기를 통해서 해당 부분이 어떤 div id로 되어 있는지를 찾아서 sytle.css 에서 해당 부분을 수정해주면 됩니다.
4. wysiwyg.css 파일을 생성하기
본문을 수정하게 된다면, 글을 쓸때와 볼때의 모양이 다르고는 합니다.
이런것을 위해서 wysiwyg.css 파일이라는것을 만들어서
html/css 편집 -> html 업로드에 올리시면 됩니다.
이 파일의 내용이 글쓰기할때 보여지는 화면을 수정해줍니다.
위와 같은 형식이며, 위의 .article {} 과 같은 내용으로 만들어서 올리면 되고,
글쓰기를 한후에 modify 버튼을 눌러서 보이는것과 글쓰기의 양식이 같다면 편리합니다.
5. IE, firefox, 크롬 등 여러 브라우저로 확인해 보기
본인이 사용하는 하나의 브라우저로만 보기를 하면 어떤 브라우저에서는 제대로 되지만,
어떤 브라우저에세는 안되는 경우도 있으니 여러 브라우저에서 확인을 해보시면 좋습니다.
6. 테그 제대로 열고 닫기
간혹 사이드바에 위젯을 넣는데, 모양이 좀 치우쳐서 <center>와 같은 테그를 삽입하는데,
귀찮아서 </center> 테그를 안넣은 경우가 종종 있습니다.
제 스킨같은 경우는 파이어폭스에서는 잘되지만, 인터넷익스폴로어에서는 본문글들이 모두 가운데 정렬이 되더군요.
근데 제대로 확인을 안해서 반나절을 그냥 방치해 두었다는...-_-;;
티스토리(Tistory), 스마트폰용 모바일웹 스킨 공개
세부적인 내용들은 다음뷰나 구글에서 검색해보시면 많은 분들이 포스팅을 해놓았으니 참고하시고, 만약 스킨을 변경하신다면 위 사항정도는 꼭 점검해주시면 좋지 않을까 싶습니다.
한번 스킨을 적용하게 되면 자신의 입맛에 맞추어서 바꾸다가 보니, 다른 스킨으로 바꾸기가 쉽지 않은데, 한 3시간정도 투자를 하니 스킨을 바꾸고, 이전것의 기능과 비슷하게 추가, 수정 등을 할 수 있더군요.
제공되는 스킨을 그냥 사용하시는것도 괜찮은 선택이지만, 스킨을 내 입맛대로 조금씩 바꾸고 싶으신 분이라면 참고하시면 좋을듯 한데, 스킨을 만들거나 그런 이야기는 아니고, 제 경험상 스킨을 변경한후에 어떻게 수정하고 바꾸어야 하고, 유의할점은 무엇이 있는지를 간단히 적어 보겠습니다.
1. 변경하기 전에 기존 스킨을 저장해 두십시요.
새로 추가된 기능인데, 저장을 하면 html, css, 사이드바, 화면출력까지 저장이 됩니다.
다시 복원을 해야 하는 경우도 생길수 있으니 꼭 저장을 하시기 바랍니다.
사이드바중에서 태그입력기로 자신이 코드로 입력한것은 사용자 모듈에 저장을 해두세요.
새로운 스킨을 적용하면 기존의 사이드바의 태그입력기들은 사라지니, 사용자 모듈에 저장을 한후에 다시 복원을 하면 됩니다.
화면출력 부분도 저장이 안되고, 초기화가 되니, 화면 캡쳐등을 해놓고, 나중에 참고를 하시면 좋습니다.
2.좀 테스트를 해보고, 하나씩 추가해서 제대로 만든후에 적용을 하고 싶다면,
블로그를 하나 더 만들어서 테스트를 하십시요.
티스토리는 아이디 하나당 5개의 블로그를 만들수 있는데, 블로그를 테스트용으로 하나 더 만들어서 광고도 붙여보고, 수정할것을 다 수정해본후에 skin html/css 편집 파일 등을 복사해 오면 됩니다.
3. 본문 스타일 편집하기
스킨 위자드라는것이 있어서 어느정도 수정이 가능하지만 한계가 있습니다.
제대로 변경을 하려면 style.css 를 수정해야 하는데,
가장 많이 수정하는것이 본문 내용 부분의 폰트종류, 크기, 줄간격 등을 수정 합니다.
.article {
width: 610px;
margin: 0;
padding: 19px 0 30px 0;
overflow: hidden;
color: #5c5c5c;
font-family: /*@post-body-font-family=font-family:;*/font-family: dotum;/*@*/
font-size: /*@post-body-font-size=font-size:;*/font-size: 14px;/*@*/
font: 14px "맑은 고딕", "돋움", Dotum, Verdana, AppleGothic, Sans-serif;
line-height:165%;
}
width: 610px;
margin: 0;
padding: 19px 0 30px 0;
overflow: hidden;
color: #5c5c5c;
font-family: /*@post-body-font-family=font-family:;*/font-family: dotum;/*@*/
font-size: /*@post-body-font-size=font-size:;*/font-size: 14px;/*@*/
font: 14px "맑은 고딕", "돋움", Dotum, Verdana, AppleGothic, Sans-serif;
line-height:165%;
}
sytle.css 를 복사해서 메모장에 넣고 article 부분을 찾아서 입맛에 맞게 수정해 주시면 됩니다.
이외에도 다른 부분을 수정하고 싶다면, 브라우저에서 소스보기를 통해서 해당 부분이 어떤 div id로 되어 있는지를 찾아서 sytle.css 에서 해당 부분을 수정해주면 됩니다.
<div id="container">
<!-- 블로그 타이틀 모듈 -->
<h1><a href="/"><span>희망을 보고, 나는 쓰네...</a></h1>
<!-- close header -->
<div id="blogMenu">
위에서 분문 타이틀 부분을 수정하고 싶다면, container 부분을 찾아서 수정해 주면 됩니다.<!-- 블로그 타이틀 모듈 -->
<h1><a href="/"><span>희망을 보고, 나는 쓰네...</a></h1>
<!-- close header -->
<div id="blogMenu">
4. wysiwyg.css 파일을 생성하기
본문을 수정하게 된다면, 글을 쓸때와 볼때의 모양이 다르고는 합니다.
이런것을 위해서 wysiwyg.css 파일이라는것을 만들어서
html/css 편집 -> html 업로드에 올리시면 됩니다.
이 파일의 내용이 글쓰기할때 보여지는 화면을 수정해줍니다.
@charset "utf-8";
body {
width: 610px;
margin: 0;
padding: 19px 0 30px 0;
overflow: hidden;
color: #5c5c5c;
font: 14px "맑은 고딕", "돋움", Dotum, Verdana, AppleGothic, Sans-serif;
line-height:165%;
}
body {
width: 610px;
margin: 0;
padding: 19px 0 30px 0;
overflow: hidden;
color: #5c5c5c;
font: 14px "맑은 고딕", "돋움", Dotum, Verdana, AppleGothic, Sans-serif;
line-height:165%;
}
위와 같은 형식이며, 위의 .article {} 과 같은 내용으로 만들어서 올리면 되고,
글쓰기를 한후에 modify 버튼을 눌러서 보이는것과 글쓰기의 양식이 같다면 편리합니다.
5. IE, firefox, 크롬 등 여러 브라우저로 확인해 보기
본인이 사용하는 하나의 브라우저로만 보기를 하면 어떤 브라우저에서는 제대로 되지만,
어떤 브라우저에세는 안되는 경우도 있으니 여러 브라우저에서 확인을 해보시면 좋습니다.
6. 테그 제대로 열고 닫기
간혹 사이드바에 위젯을 넣는데, 모양이 좀 치우쳐서 <center>와 같은 테그를 삽입하는데,
귀찮아서 </center> 테그를 안넣은 경우가 종종 있습니다.
제 스킨같은 경우는 파이어폭스에서는 잘되지만, 인터넷익스폴로어에서는 본문글들이 모두 가운데 정렬이 되더군요.
근데 제대로 확인을 안해서 반나절을 그냥 방치해 두었다는...-_-;;
티스토리(Tistory), 스마트폰용 모바일웹 스킨 공개
세부적인 내용들은 다음뷰나 구글에서 검색해보시면 많은 분들이 포스팅을 해놓았으니 참고하시고, 만약 스킨을 변경하신다면 위 사항정도는 꼭 점검해주시면 좋지 않을까 싶습니다.
반응형