xylospers_note11.zip
노트분위기를 낼려고 만들어 봤습니다.
버전이 1.1이라는 것은 1.0도 있다는 것인데, 지금보다 더 허접하여 1.1이 되어서 공개합니다.-_-;;
본인 홈페이지에 방문자가 별로 없어, 다양한 상황에서의 테스트가 이루어지지 않았기 때문에 100% 제대로 돌아간다고 보장할 순 없습니다.
1.1.1 기준으로 만들어져있으며, 사이드바기능도 이용할 수 있습니다.
스킨만 두고서는 xhtml1.1 유효성 통과가 가능하기 때문에, 사이드바에 xhtml1.1 유효성 통과 배너를 넣어두었습니다만, 필요없거나, 플러그인등 때문에 유효성 통과가 불가능한 경우는 사이드바 설정에서 제거하시면 됩니다.
그리고 처음에는 그냥 사이드바의 내용이 다닥다닥 붙어서 나올꺼라고 생각됩니다.
플러그인중에 사이드바에 공백을 넣어주는 플러그인을 이용하여 적당히 벌려주세요.
처음에는 그냥 margin넣었었는데, 이쪽이 좀더 유연할 듯하여 margin을 걍 빼버렸습니다.
최상단의 xylosper's notebook 이라는 이미지는 images/title.jpg 파일입니다.
적당히 이파일을 수정하면 상단 이미지가 변경됩니다.
블로그 제목을 텍스트로 내고 싶은 분은
<!-- header start -->
<div id="header">
<h1><a href="[##_blog_link_##]"><img src="./images/title.jpg" alt="[##_title_##]" width="500" height="65" /></a></h1>
</div>
<!-- header close -->
이부분에서, <img src="./images/title.jpg" alt="[ ##_title_##]" width="500" height="65" /> 를 [ ##_title_##]로 바꾸고, 적당한 스타일을 입혀주시면 됩니다.
마지막으로, 현재 컨텐츠 폭은 500픽셀로 맞추어져 있습니다만, 이미지를 올릴 경우, 주변의 테두리 때문에, 이미지는 최대 488로 해주어야 레이아웃을 벗어나지 않습니다.
매번 이미지 크기 지정해주는게 귀찮으신 분은 style.css 파일을 여셔서, .imageblock 을 다음과 같이 내용을 지우거나 주석처리해주세요.
(변경전) .imageblock { background-color:#eee; border:1px solid #ddd; padding:5px; margin:5px 0; }
(변경후) .imageblock { /*background-color:#eee; border:1px solid #ddd; padding:5px; margin:5px 0; */}
Posted by xylosper
