[square] 자주 묻는 질문
Square final 버전과 호환이 되지 않는 부분이 많습니다.
수정 전 참고해주세요 !
등록된 답변 개수 - 33개
1. 사이드바
style.css 파일에서 #sidebar h1
을 검색하거나, 70번째 줄로 이동하고,
그 바로 밑줄에 #sidebar h1 a { color: 색상값; }
을 추가하면 됩니다.
style.css 파일에서 #sidebar
를 검색하거나, 65번째 줄로 이동해주세요.
#sidebar { 생략 }
안에 background-color: #fff;
값을 조절하여 색상을 바꿀 수 있고, background-image: url('이미지 주소');
를 추가해 배경 이미지를 넣을 수 있습니다.
배경 이미지 추가 관련 소스는 구글링 하면 많이 나와요.
style.css 파일에서 #sidebar .category
검색 또는 75번째 줄로 이동하면 카테고리 관련 소스가 나옵니다.
아래 소스로 교체해주세요.
#sidebar .category ul { margin: 0; } #sidebar .category ul li { list-style: none; } #sidebar .category ul li ul { padding: 0; } #sidebar .category ul li ul li ul { margin: 0 0 0 15px; padding: 0; } #sidebar .category ul li ul li ul li:before { content: "\F0DA"; font-family: "FontAwesome"; font-size: 10px; font-size: 1.0rem; padding-right: 5px; }
style.css 파일에서 #sidebar .category ul li ul li ul li:before
를 검색하거나 79번째 줄로 이동하여 padding-right: 5px;
우측에 color: #색상값;
을 추가하면 됩니다.
skin.html 파일의 <div id="sidebar">
부분에 http://www.tistory.com/guide/skin/step3#3-14 이 글을 참고해서 넣으면 됩니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
skin.html 파일 46번째 줄에 있는
<h1><a href="[#_blog_link_#]">[#_title_#]</a></h1>
를
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
<div class="title_image"><a href="[#_blog_link_#]"><img src="이미지주소" alt="[#_title_#]"></a></div>
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
이렇게 교체하고,
style.css 파일에서 #sidebar h1
를 검색한 후 그 바로 다음줄에
#sidebar .title_image { text-align: center; }
를 추가하면 됩니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
강조한거 잘 보이죠?
style.css 파일
#sidebar .blank { clear: both; width: 100%; height: 100px; }
height: 100px;
값을 조절하면 됩니다.
초록 : 어제 방문자
파랑 : 오늘 방문자
빨강 : 총 방문자
입니다.
#sidebar
에 font-size: 숫자px;
font-family: 서체명;
을 추가하면 됩니다.
구조상 불가능합니다. 완전히 새로 짜야하기 때문에 도움 드리기 힘듭니다.
가능은 하겠지만 굉장히 복잡합니다. 저도 설명하기 힘들고요.
애초에 제작할 때 사이드바를 우측으로 옮긴다는건 생각도 하지 않았던 기능입니다.
큰 틀은 있는 그대로 써주시면 감사하겠습니다.
style.css 파일에서 #sidebar .search input
를 검색하거나 86번째 줄로 이동하면 다음 소스가 있습니다.
#sidebar .search input { padding: 10px; width: 60%; border: none; border-bottom: 1px dashed #ccc; }
이곳에 background-color: 컬러값;
을 추가하면 됩니다.
만약 배경색을 투명하게 지정하고 싶으면 background-color: transparent;
를 추가하면 됩니다.
2. 본문
style.css 파일에서 #head .date
를 검색하거나, 113번째 줄로 이동해주세요.
#head .date { position: absolute; bottom: -44px; left: -10px; padding: 10px; font-size: 13px; font-size: 1.3rem; color: #fff; background-color: #555; cursor: default; } #head .date:before { position: absolute; top: 0; left: -6px; width: 0; height: 0; content: " "; border-top: 20px solid #555; border-left: 6px solid transparent; } #head .date:after { position: absolute; bottom: 0; left: -6px; width: 0; height: 0; content: " "; border-bottom: 20px solid #555; border-left: 6px solid transparent; }
이런 소스가 나옵니다. 붉게 표시한 부분의 색상값을 변경하면 됩니다.
#head .date:before
가 왼쪽 위 화살표,
#head .date:after
가 왼쪽 아래 화살표입니다.
style.css 파일에서 #head h2
를 검색하거나, 110번째 줄로 이동하면
#head h2 { display: inline-block; margin: 0 0 50px; padding: 0 5px 3px; font-size: 20px; font-size: 2.0rem; font-weight: 400; color: #444; line-height: 200%; border-bottom: 1px dashed #ddd; text-shadow: 1px 1px #dedede; word-break: break-word; }
이런 소스가 있습니다.
글자 크기는 font-size: 20px;
과 font-size: 2.0rem;
을 조절하고, 두께는 font-weight: 400;
을 600으로 바꾸면 글씨가 두꺼워집니다.
style.css 파일에서 .entry
를 검색하거나, 155번째 줄로 이동하면 글씨 크기 관련 소스가 나옵니다.
style.css 파일에서 .entry a.tx-link
를 검색하거나, 192번째 줄로 이동하면
.entry a.tx-link, .entry a.key1 { font-weight: 600; cursor: pointer; }
이런 소스가 있습니다. font-weight: 600;
속성을 지우면 됩니다.
style.css 파일에서 .list ul li
를 검색하거나 137번째 줄로 이동해주세요.
그 바로 다음줄에
.list ul li a { color: 색상값; }
를 넣으면 됩니다.
style.css 파일에서 #body
를 검색하거나 117번째 줄로 이동하면 내부 여백을 조절하는 padding: 20px 15px 18px;
값이 나옵니다.
값은 이렇습니다. padding: (위)px (좌우)px (아래)px;
style.css 파일에서 #head
검색 또는 109번째 줄로 이동해주세요.
padding-top: 100px;
값을 원하는 값으로 조절하면 됩니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
skin.html 파일에서 [#_article_rep_date_#]
를 검색하고 다음 소스로 교체해주세요.
※ 총 2곳을 수정해야합니다.
※ 총 2곳을 수정해야합니다.
※ 총 2곳을 수정해야합니다.
※ 총 2곳을 수정해야합니다.
※ 총 2곳을 수정해야합니다.
<script type="text/javascript"> datestr='[#_article_rep_date_#]'.substr(0,10); document.write(datestr); </script>
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
다음으로 [#_notice_rep_date_#]
를 검색하고
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
<script type="text/javascript"> datestr='[#_notice_rep_date_#]'.substr(0,10); document.write(datestr); </script>
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
이렇게 변경하세요.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
샾샵썁썊샯쌻 "#" 은 하나씩 더 들어가야합니다.
설마 이렇게 강조했는데도 못봐서 안된다는건 아니죠? 설마
IE8 이하에선 작동하지 않는 방법입니다.
#body
에 background-color: rgba(255,255,255,0.5);
를 추가하면 됩니다.
rgba 컬러값은 http://html-color-codes.info/Korean/ 이곳에서 확인하시고, 0.5 는 투명도를 나타냅니다.
#content-inner
에 margin: 0 auto;
만 추가하면 됩니다.
style.css 파일 제일 하단에 다음 소스를 추가하면 됩니다.
.article { font-family: "나눔고딕"; }
"나눔고딕"
은 원하는 폰트명으로 바꿔서 사용하세요.
3. 기타
분명히 스킨 배포 게시글에 "다운받은 티스토리 스킨 적용 방법" 에 빨갛게 제발좀 읽어달라고 적어놨는데도 이런 오류가 나타나 이 글을 읽고 계시다면 정말 사람 힘빠집니다.
images 폴더 내 파일 누락 문제입니다.
스킨 설치 관련 글을 반드시 읽어주세요.
완벽히 이해할 때까지 두 번 세 번 읽어주세요.
style.css 파일에서 #recent-post h4
를 검색하거나 284번째 줄로 이동해주세요.
그 바로 다음줄에 아래 소스를 추가해 사용하면 됩니다.
#recent-post h4 a { color: 색상값; } #recent-post h4 a:hover { color: 색상값; }
관련 정보를 잘 정리한 글이 있어 링크를 겁니다.
가변 크기 단위 > rem 부분을 읽으시면 이해 가능할거예요.
스킨에서 글씨 크기 설정할 땐 px 값이 25 라면 rem 값은 2.5가 되어야 합니다.
4개가 가장 예쁘게 나오긴 합니다만, 늘리고 싶으신 분은 [ 관리자 화면 > 화면 설정 > 화면출력 > 사이드바 > 최근 글 ] 에서 갯수를 조절하면 됩니다.
skin.html 파일 376번째 줄 부터 390번째 줄 까지
<s_sidebar_elements> <div id="recent-post"> <h4><a href="/category">+ Recent posts</a></h4> <ul> <s_rctps_rep> <li class="box"> <a href="[#_rctps_rep_link_#]" class="thumb"> <img src="./images/blank.png" alt="post image"> <span class="title">[#_rctps_rep_title_#]</span> </a> </li> </s_rctps_rep> </ul> </div> </s_sidebar_elements>
이 부분을 제거하면 됩니다.
2.0 버전부터 추가된 기능 중 데스크톱에서 사이드바를 숨기능 기능과, 본문 하단 최근 게시물의 썸네일 높이를 좀 더 키워주는 명령어가 있습니다.
sidebar-off 와 recent-post-long 인데요,
skin.html 파일 상단에 보면 다음 소스가 있습니다.
<!DOCTYPE html> <html lang="ko" class="default">
사이드바를 숨기고 싶으면
<!DOCTYPE html>
<html lang="ko" class="default sidebar-off">
이렇게 추가하고, 둘 다 적용하고 싶다면
<!DOCTYPE html> <html lang="ko" class="default sidebar-off recent-post-long">
이렇게 적용하면 됩니다.
띄어쓰기에 주의하세요.
skin.html 파일에서
<s_list> 생략 </s_list>
부분을
<s_article_rep> 생략 </s_article_rep>
밑으로 통채로 이동시키면 됩니다.
글 작성시 HTML 편집 모드에 다음 소스를 추가해주세요.
<style> #paging { display: none; } </style>
티에디션은 별로 추천하진 않습니다만,
그래도 사용하시겠다면 style.css 파일 제일 하단에 다음 소스를 추가해주세요.
#ttCanvas * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } #ttCanvas img { max-width: none; }
추가로 티에디션은 반응형 지원이 되지 않아 스마트폰으로 볼 경우 화면이 잘려서 보입니다.
티에디션을 반응형으로 만들지 못하는 이유.png
일부 유저들은 반응형으로 만들어서 사용하고 있다는게 함정
2015.09.04 13:24 1차 업데이트
2015.09.04 19:10 2차 업데이트
2015.09.04 20:35 3차 업데이트
2015.09.05 20:36 4차 업데이트
2015.09.06 13:37 5차 업데이트
2015.10.28 20:35 스킨 버전업에 따른 가이드 수정
2015.12.14 12:03 6차 업데이트
2015.12.28 14:01 7차 업데이트
2016.01.04 15:06 특정 답변 표기 오류 수정 - 죄송합니다.
2016.01.05 17:39 8차 업데이트
2016.02.10 15:49 9차 업데이트