반응형
오래간만에 스킨을 수정해봤습니다.
항상 누군가 만들어놓은 스킨들을 받아다가 위치만 살짝 쿵 바꿔서 사용했는데 이번에는 그래도 조금 더 많이 건드려봤습니다.
아직까지도 위치가 제대로 잡히지 않은 것 같고, 세부적인 부분은 CSS와 자바스크립트를 잘 몰라서 깔끔하지 못한 경향이 많지만 그래도 이리저리 많이 수정을 했네요 ^ ^
수정을 한 김에 이 스킨에 들어간 간단한 팁등을 설명할까 합니다.
서민당 스킨의 베이스가 된 기본 스킨틀
서민당 스킨은 기본적으로 티스토리에서 제공해주는 1개의 스킨과 추가로 개발되어진 스킨하나를 짬뽕해서 만들어졌습니다.
메인 베이스가 된 스킨은 Tistory Studio (White)와 추가된 스킨은 Whiteground (Red)였습니다.
좌측이 Tistory Studio (White)의 좌측에 있던 사이드바를 개인적으로 좋아하는 우측으로 옮기고 작은 검색창과 카테고리를 이미지가 크고 단단해 보이는 Whiteground (Red)의 이미지로 변경했습니다.
사이드바의 박스 스타일이 전체적으로 제가 구상하고 있던 네모 반듯한 이미지와 맞아떨어져 Tistory Studio (White)를 사용하게 되었습니다.
여기서 팁!
좌측 사이드바 우측으로 이동하기
위 파랗게 표시된 부분이 본문이 우측, 사이드바가 좌측을 나타내고 있는 것입니다. 이 부분을 수정하면 간단히 좌우가 변경됩니다.
큼지막하며 멋진(?) 이미지
서민당의 로고가 없는 관계로 안드로이드를 임시로 사용중에 있습니다.
이 로고밑에는 큼지막한 이미지들이 있는데, 혹시 새로고침을 해보셨다면 이 이미지들이 수시로 바뀌는 것을 알 수 있습니다.
큰 이미지로 제가 한 포스팅을 링크를 시켜놨죠 ^ ^
원하는 위치에 넣어주시면 됩니다. 뭐....... 굳이 헤드부분에 사용안하셔도 되요 0ㅁ0b
간단한 상단 카테고리 메뉴
사실 카테고리에서 그나마 잘 사용하는 부분들을 상단으로 올려봤습니다. 우측으로 가기에는 귀찮기도하고 다른 블로그들을 보니 롤오버가 이쁘게 되어있어 부럽기도 했습니다.
그래서 간단한 이미지로 대충 만들어 붙였는데, 개인적으로 나쁘지 않더군요. ㅎㅎㅎ
롤오버 이미지는 많이들 사용되는 기법이죠.
인터넷에서 롤오버 이미지라고 검색만 한다면 소스는 간단하게 구하실 수 있습니다.
그래서 그 간단한 소스를 정리했습니다.
이 이미지들을 블로그의 사이즈에 맞게끔 잘라서 배열을 하면 깔끔하게 정리가 됩니다. ^ ^
페이스북 소셜 댓글창
소셜 댓글창은 라이브리를 처음으로 사용을 해봤는데, 로그인과 함께 불편함점이 은근이 있는 것 같아서 때어버리고 제가 주로 사용하는 sns인 페이스북 댓글창을 달았습니다.
물론 이 댓글창도 잘 사용되어지지는 않지만 그래도 제일 깔끔하면서도 제가 주로 사용하는 sns라 달아놨습죠 ^ ^
이 댓글창은 나름 길고 복잡한 부분이 있어서 제가 다는데 참고한 랩하는 프로그래머 티몰스님의 블로그를 링크하겠습니다.
블로그를 보면서 진행을하면 아주 간단하게 설치가 완료됩니다. ^ ^
소셜 사이트를 연계한 프로필
사이드바를 설정하면서 딱딱 맞게 떨어지는 박스형태로 구성했습니다.
그래서 페이스북 명함을 사용할 예정이었는데, 이놈이 사이즈를 조절하면 화면이 박살이 나는 것이라 어쩔 수 없이 이미지만 거의 동일하게 제작하고 제 페이스북으로 링크시켰습니다.
이 블로그의 가장 큰 목표는 반듯하고 깔끔함이었기에 어쩔 수 없이 틀만 따왔고, 트위터의 경우도 마찬가지로 간단하게 이미지를 만들어 제 트위터 계정으로 링크시켰습니다.
여기서도 롤오버를 적용시켰습니다.
여기서 팁!
이미지 랜덤 출력과 링크걸기
최초 위의 이미지를 하려고 했지만 사이즈 변경시에 바보같이 나와서 그냥 캡쳐된 이미지를 이용 제작하였죠 ^ ^
스킨변경을 마치며
나름 이것저것 많이 건들인 것 같은데 적고보니 별 것 안했네요.
또 파이어폭스, 익스, 크롬등에서 확인은 해봤지만 별 문제는 없는 것 같았습니다. 그래서 나름 잘 사용할 예정이지만 언제 어디서 오류가나서 스킨이 박살날지 모릅니다.
혹여나 문제점이나 이상한 점이 발견되신 분들은 댓글 좀 부탁드리겠습니다.
이것때문에 주말 이틀을 날려먹었네요 ^ ^;;;
사이드바의 박스 스타일이 전체적으로 제가 구상하고 있던 네모 반듯한 이미지와 맞아떨어져 Tistory Studio (White)를 사용하게 되었습니다.
여기서 팁!
좌측 사이드바 우측으로 이동하기
style.css
#container {width: 전체가로px;}
#header {width:헤드가로px; height:헤드세로px;}
#content {width:본문px; float:right;}
#sidebar {width:사이드바px; float:light;}
#footer {width:풋터가로px; height:풋터세로px; clear:both;}
#container {width: 전체가로px;}
#header {width:헤드가로px; height:헤드세로px;}
#content {width:본문px; float:right;}
#sidebar {width:사이드바px; float:light;}
#footer {width:풋터가로px; height:풋터세로px; clear:both;}
위 파랗게 표시된 부분이 본문이 우측, 사이드바가 좌측을 나타내고 있는 것입니다. 이 부분을 수정하면 간단히 좌우가 변경됩니다.
큼지막하며 멋진(?) 이미지
서민당의 로고가 없는 관계로 안드로이드를 임시로 사용중에 있습니다.
이 로고밑에는 큼지막한 이미지들이 있는데, 혹시 새로고침을 해보셨다면 이 이미지들이 수시로 바뀌는 것을 알 수 있습니다.
큰 이미지로 제가 한 포스팅을 링크를 시켜놨죠 ^ ^
이와같은 이미지가 총 4개가 랜덤으로 돌아가고 있습니다.
사실 자바스크립트를 이용해 슬라이드 형식으로 만들고 싶었는데, 실력부족이라 소스를 만들지도 구하지도 못해 임시방편으로 그냥 랜덤으로 돌리고 있는 겁니다 .^ ^;;;
여기서 팁!
이미지 랜덤 출력과 링크걸기
<script language="JavaScript">
<!--
function random_imglink(){
var myimages=new Array()
// 이미지들을 설정 하세요
myimages[1]="이미지경로(1)"
myimages[2]="이미지경로(2)"
myimages[3]="이미지경로(3)"
myimages[4]="이미지경로(4)"
// 각 이미지들의 링크를 설정 하세요
// 티스토리 내부에서 이미지를 불러온다면 ex) "./images/banner_01.PNG" 이렇게 불러오면 됩니다.
var imagelinks=new Array()
imagelinks[1]="링크경로(1)"
imagelinks[2]="링크경로(2)"
imagelinks[3]="링크경로(3)"
imagelinks[4]="링크경로(4)"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>
</td>
※이 소스 부분은 어느 블로거님께서 올려주신건데 주소를 잃어버렸습니다.
혹시 본글의 주인분이시면 링크부탁드려요 0ㅁ0;;;
<!--
function random_imglink(){
var myimages=new Array()
// 이미지들을 설정 하세요
myimages[1]="이미지경로(1)"
myimages[2]="이미지경로(2)"
myimages[3]="이미지경로(3)"
myimages[4]="이미지경로(4)"
// 각 이미지들의 링크를 설정 하세요
// 티스토리 내부에서 이미지를 불러온다면 ex) "./images/banner_01.PNG" 이렇게 불러오면 됩니다.
var imagelinks=new Array()
imagelinks[1]="링크경로(1)"
imagelinks[2]="링크경로(2)"
imagelinks[3]="링크경로(3)"
imagelinks[4]="링크경로(4)"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>
</td>
※이 소스 부분은 어느 블로거님께서 올려주신건데 주소를 잃어버렸습니다.
혹시 본글의 주인분이시면 링크부탁드려요 0ㅁ0;;;
원하는 위치에 넣어주시면 됩니다. 뭐....... 굳이 헤드부분에 사용안하셔도 되요 0ㅁ0b
간단한 상단 카테고리 메뉴
사실 카테고리에서 그나마 잘 사용하는 부분들을 상단으로 올려봤습니다. 우측으로 가기에는 귀찮기도하고 다른 블로그들을 보니 롤오버가 이쁘게 되어있어 부럽기도 했습니다.
그래서 간단한 이미지로 대충 만들어 붙였는데, 개인적으로 나쁘지 않더군요. ㅎㅎㅎ
롤오버 이미지는 많이들 사용되는 기법이죠.
인터넷에서 롤오버 이미지라고 검색만 한다면 소스는 간단하게 구하실 수 있습니다.
그래서 그 간단한 소스를 정리했습니다.
여기서 팁!
이미지 랜덤 출력과 링크걸기
<img src="기본 이미지경로(4)" onMouseOver="this.src='마우스가 올라왔을때의 이미지경로(4)'" onMouseOut="this.src='마우스가 없을때의 이미지경로(4)'" style="cursor:pointer;" onclick="location.href='링크경로' ">
이 이미지들을 블로그의 사이즈에 맞게끔 잘라서 배열을 하면 깔끔하게 정리가 됩니다. ^ ^
페이스북 소셜 댓글창
소셜 댓글창은 라이브리를 처음으로 사용을 해봤는데, 로그인과 함께 불편함점이 은근이 있는 것 같아서 때어버리고 제가 주로 사용하는 sns인 페이스북 댓글창을 달았습니다.
물론 이 댓글창도 잘 사용되어지지는 않지만 그래도 제일 깔끔하면서도 제가 주로 사용하는 sns라 달아놨습죠 ^ ^
이 댓글창은 나름 길고 복잡한 부분이 있어서 제가 다는데 참고한 랩하는 프로그래머 티몰스님의 블로그를 링크하겠습니다.
블로그를 보면서 진행을하면 아주 간단하게 설치가 완료됩니다. ^ ^
소셜 사이트를 연계한 프로필
사이드바를 설정하면서 딱딱 맞게 떨어지는 박스형태로 구성했습니다.
그래서 페이스북 명함을 사용할 예정이었는데, 이놈이 사이즈를 조절하면 화면이 박살이 나는 것이라 어쩔 수 없이 이미지만 거의 동일하게 제작하고 제 페이스북으로 링크시켰습니다.
이 블로그의 가장 큰 목표는 반듯하고 깔끔함이었기에 어쩔 수 없이 틀만 따왔고, 트위터의 경우도 마찬가지로 간단하게 이미지를 만들어 제 트위터 계정으로 링크시켰습니다.
여기서도 롤오버를 적용시켰습니다.
여기서 팁!
이미지 랜덤 출력과 링크걸기
페이스북 명함 만들기 바로가기
트위터 롤오버 이미지시 링크 새창으로 이동부분
<...................... onclick="location.href='링크경로' "> 현재 페이지에서 열기
<...................... onclick="window.open('링크경로')"> 새창으로 열기
<...................... onclick="location.href='링크경로' "> 현재 페이지에서 열기
<...................... onclick="window.open('링크경로')"> 새창으로 열기
스킨변경을 마치며
나름 이것저것 많이 건들인 것 같은데 적고보니 별 것 안했네요.
또 파이어폭스, 익스, 크롬등에서 확인은 해봤지만 별 문제는 없는 것 같았습니다. 그래서 나름 잘 사용할 예정이지만 언제 어디서 오류가나서 스킨이 박살날지 모릅니다.
혹여나 문제점이나 이상한 점이 발견되신 분들은 댓글 좀 부탁드리겠습니다.
이것때문에 주말 이틀을 날려먹었네요 ^ ^;;;
반응형
댓글