[simple gray] 자주 묻는 질문
※ 이 가이드는 simple gray 스킨 전용입니다. 다른 스킨에는 적용되지 않습니다.
simple gray 4.0
style.css 파일 상단에 있는
/*@import url(http://fonts.googleapis.com/css?family=Droid+Sans); @import url('./images/font.css');*/
이 소스의 빨간 주석을 해제하면 자동으로 적용됩니다.
style.css 파일 상단에 있는
/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);*/
이 소스의 빨간 주석을 해제하면 자동으로 적용됩니다.
skin.html 파일 25번째 줄에 다음 소스가 있습니다.
<a href="[#_blog_link_#]">[#_desc_#]</a>
[#_desc_#]
를 원하는 문구로 변경하면 됩니다.
#은 하나씩 더 들어가야합니다.
사이드바 위젯 중 "블로그 이미지" 위젯에 블로거와 블로그 소개가 나오게 만들었습니다.
간단한 CSS 수정으로 이 두 정보를 숨겨보겠습니다.
만약 이미지가 늘어나는것만 수정하고 싶다면 아래 방법에서 width
관련 정보만 적용하면 됩니다.
style.css 파일에서 #sidebar .blog_image
를 검색하거나 314번째 줄로 이동하면 다음 소스가 있습니다.
#sidebar .blog_image { padding: 10px 10px 4px; } #sidebar .blog_image img { display: block; margin: 0 auto; max-width: 150px; width: 100%; vertical-align: middle; border-radius: 3px; } #sidebar .blog_image .blogger { display: block; margin: 8px 0 0; text-align: center; font-weight: 600; } #sidebar .blog_image .desc { display: block; margin: 0 0 5px; font-size: 11px; text-align: center; }
우리가 수정해야 할 부분은 미리 강조해둔 부분입니다.
우선, display: block;
을 display: none;
로 변경해 블로거와 소개글을 숨김처리 해주세요.
width: 100%;
로 인해 늘어나는 사진 크기를 width: auto;
로 바꿔 자동으로 가로길이를 측정하게 해주세요.
padding: 10px 10px 4px;
을 padding: 10px;
로 변경해 위젯의 내부 여백을 수정해주세요.
다음으로 "블로그 위젯" 이 하단 사이드바로 이동할 경우 적용되는 CSS를 수정해보겠습니다.
#footerbar .blog_image
를 검색하거나 376번째 줄에 있는 소스를
#footerbar .blog_image { } #footerbar .blog_image img { display: block; max-width: 150px; width: 100%; vertical-align: middle; } #footerbar .blog_image .blogger { display: block; margin: 8px 0 0; font-weight: 600; } #footerbar .blog_image .desc { display: block; margin: 5px 0; font-size: 12px; }
위와 동일하게 width
값과, display
값을 변경하면 됩니다.
댓글 목록은 보시는것처럼 내용이 한 줄 이어도 높이가 좀 있습니다.
이렇게 한 이유는, 댓글 내용이 짧아 틀이 무너지는걸 방지하기 위해 최소 높이를 지정했기 때문입니다.
이 최소 높이가 어디 적용되 있냐면,
이렇게 P
태그에 높이 80px
의 값이 지정되어있습니다.
이 부분을 수정하기 위해선 style.css 파일의 249번째 줄에 있는 다음 소스를 손봐야합니다.
.communicateList p { margin: 0; padding: 5px 0; min-height: 80px; line-height: 180%; }
강조된 min-height: 80px;
값을 수정하면 되는데요, 최소 50px
로 지정해주세요.
50px
미만으로 설정되면 틀이 깨지는걸 확인했습니다.
손쉽게 넣을 수 있습니다.
.communicateList ol li ul li { border: none; margin-top: 0; }
이 뒷부분에 background-color: 원하는색상값;
을 추가하면 됩니다.
skin.html 파일의 401 ~ 410번째 줄을 보면 소셜 아이콘 소스가 주석처리 돼 있습니다.
<!-- <div class="social"> <a href="https://wallel.tistory.com/rss" target="_blank"><i class="fa fa-rss-square"></i></a> <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook-square"></i></a> <a href="https://www.twitter.com/" target="_blank"><i class="fa fa-twitter-square"></i></a> <a href="https://www.flickr.com/" target="_blank"><i class="fa fa-flickr"></i></a> <a href="https://www.youtube.com/" target="_blank"><i class="fa fa-youtube-square"></i></a> <a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus-square"></i></a> <a href="https://www.instagram.com/" target="_blank"><i class="fa fa-instagram"></i></a> <a href="https://www.tumblr.com/" target="_blank"><i class="fa fa-tumblr-square"></i></a> </div> -->
강조한 부분의 글자만 지우면 바로 사용 가능합니다.
style.css 파일 247번째 줄에 다음 소스가 있습니다.
.communicateList .name { font-size: 13px; font-weight: 500; }
font-weight: 500;
을 font-weight: 900;
으로 변경해주세요.
simple gray 3.0
우선, images 폴더 안에 있는 simplegray.css 파일을 텍스트에디터로 열어주세요.
텍스트 에디터가 없는 분들은 메모장으로 여셔도 됩니다.
2번 째, 3번 째 줄을 보시면 주석 처리된 소스가 있습니다. 주석을 제거해주세요.
/*@import url(http://fonts.googleapis.com/css?family=Droid+Sans);*/ /*@import url('./font.css');*/
(빨갛게 표시한 글자를 제거하시면 됩니다.
이 바로 다음 줄에 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
이런 소스가 있습니다.
이 소스를 주석처리 해주세요.
(속도 향상을 위한 처리입니다.)
11번 째 줄을 보시면 font-family: "Nanum Gothic";
이라는 소스가 있습니다.
"Nanum Gothic"
부분을 "Droid Sans", "LSR"
로 변경해주세요.
Ctrl+F 로 "Nanum Gothic"
을 모두 찾으셔서 "Droid Sans", "LSR"
로 변경하시면 됩니다.
저장을 하시고, simplegray.css 파일을 업로드 하신 후 블로그를 새로고침 하시면 폰트가 적용되어 있는걸 확인하실 수 있습니다. :)
무료버전
무료버전은 우측 사이드바가 고정되어 있는 반면,
유료버전은 우측 사이드바를 관리자 화면에서 손쉽게 수정할 수 있습니다.
블로그 우측 하단의 스크롤바를 따라다는 네비게이션도 업그레이드 되었습니다.
전부는 아니지만 스킨 위자드도 지원합니다. :)
그밖의 소스가 수정/보완 되고 모바일 소스가 더욱 최적화 되어있습니다.
style.css 파일에서 #post #article img
를 검색하시면 다음 소스가 나옵니다.
#post #article img, #notice img { border-radius: 30px; transition: .5s; } #post #article img:hover, #notice img:hover { border-radius: 0; }
이 소스를 통채로 지워주세요.
포스트 본문 폭을 조절하기 위해선 2가지 방법이 있습니다.
1) 본문 폭을 늘리고 사이드바 폭을 줄인다.
2) 전체 폭을 늘리고 본문 폭과 사이드바 폭을 적절히 조절한다.
1) style.css 파일 78, 79번 째 줄을 보면 #container #content #left
와 #container #content #right
속성이 있습니다.
이 두 속성에서 width 값을 조절하시면 됩니다. (두 % 값이 합계 100%가 되지 않도록 조절)
2) style.css 파일 42, 43번 째 줄에
#content, #footer #widget-box { max-width: 1000px; }
속성이 있습니다.
max-width
의 값을 키우고, 78 번 째 줄에 #container #content #left
의 width
속성과 79번 째 줄에 #container #content #right
의 width
속성 값을 변경하시면 됩니다.
해당 방법은 http://wallel.com/113 이곳에 따로 포스팅해놨습니다.