티스토리 스킨 08 (V1.0) - 나눔 종료

8번째 스킨입니다.

5번과 6번 스킨은 단순하거나 예쁘지 않은 것 같아 넘겼고, 7번 스킨은 공유 예정이 없어 바로 8번 스킨이에요. 아시다시피 웹 제작을 배우고 제작한 게 아닌 마구잡이식으로 만들고 있기 때문에 미흡한 점 이해하실 분만 받아주시고, 복잡한 수정에 관한 질문은 죄송하지만 답변드리기 어렵습니다.

뭘 알아야 자세하고 친절하게 답변드릴 텐데 저도 몰라서 그러기 어렵네요..

스킨 특징 및 설정

제주고딕, Lato

반응형 + 모바일 ( 태블릿은 PC와 동일 )

갤러리형 + 목록형 ( 리스트형 or 웹진형 )

크로미움 기반 브라우저 지원

서브카테고리

공지 게시판

노이미지 썸네일을 본문 출력하도록 변경 가능

댓글과 방명록에 프로필사진 적용 가능

유튜브 등 기타 썸네일 자동으로 긁어오지 못함ㅠㅠ

★ 본문 수정 및 날짜는 본문 타이틀에 마우스 올리면 나타남 ★

스킨 설정

표시 : 글 목록을 6 이상 6의 배수로

형태 : 목록+내용

상세 스크린샷 

카피라이트 색상 변경은 OK / 삭제는 NO

수정 OK / 수정 후 재배포 NO

재배포 및 N차 공유 NO (너무 허접해서 그러니 양해 바랍니다.)

나눔으로 받아가신 분들께 알려드리는 오류

container의 width 수치를 제가 설정해둔 것보다 넓게 수정 한 경우 댓글 작성과 방명록 작성 부분이 깨지는 오류가 있습니다. 본인 블로그를 로그인한 상태로는 해당 오류는 발견할 수 없습니다. 로그인을 한 다른 블로거가 방문 시 발생하는 문제이며

이를 수정하는 방법은

CSS에서 /* 댓글, 방명록 작성 */

.cmt-write textarea, .guestWrite textarea 에 있는 width:81% 를 82%로 바꿔주시고

.cmt-write .submit, .guestWrite .submit 에 width:16%; 추가 입력,

.cmt-write .submit input, .guestWrite .submit input 의 width:80px 을 100% 로 바꿔주시면 됩니다.

container 수치를 늘리지 않았거나 아무도 안온다 나혼자 쓰는 블로그다 하시면 수정하지 않아도 무관합니다.

CSS에서 아래 색상코드 찾아서 변경

기본 색 : #444

CSS 에서 font-style: italic; 삭제 후 원하는 효과로 변경 

(검색사이트에서 text hover 등으로 검색)

a:hover {
    font-style: italic;
}

CSS에서 폰트 변경은 아래 부분 삭제 후 다른 웹폰트 주소 입력

@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);

폰트 변경 : font-family: 이부분을 바꾼 폰트 명으로 변경

폰트 사이즈 :font-size: 10px; 이 부분만 수정

/* 전체 폰트 */
body, th, td, input, select, textarea, button {
    font-size: 10px;
    font-family: 'Lato', 'Jeju Gothic', sans-serif;
    color: #444;
    line-height: 1.7;
}

CSS에서 아래 부분 #eee 를 다른 색상 코드로 변경

body {
    background: #eee;
}

CSS

body {
    background: #eee;
}

삭제 후 파일업로드 → 아래 내용 붙여넣기

body{
    background: url('./images/파일명.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-attachment:fixed;
}

CSS 아래 주석에 따라 수정 

(크롬 & 크로미움 기반 브라우저만 해당, 익스플로러 및 엣지 등 기타 브라우저는 검색을 통해 해결할 것)

/* 스크롤바 */
::-webkit-scrollbar {
 width:5px; /* 세로 스크롤 넓이 */
 height:5px; /* 가로 스크롤 높이 */
 background:transparent; /* 스크롤바 배경 색상 코드 */
}
::-webkit-scrollbar-thumb {
 width:5px; /* 스크롤바 움직이는 부분  넓이 */
 background:#444; /* 스크롤바 움직이는 부분 색상 */
 border-radius:10px; /* 모서리 둥글게 */
}

CSS에서 아래 부분을 찾아 width: 750px 을 원하는 사이즈로 변경

/* 컨테이너 */
#container {
    margin: 100px auto;
    width: 750px;
    position: relative;
}

CSS에서 width: 67%; 을 원하는 넓이로 변경 (비추)

여백 : padding: 15px 10px;, 테두리: border: 1px solid;

배경색: background: #fff;(배경색 변경 후에는 꼭 .linetitle span, .numbox span 이 부분에 백그라운드 컬러코드와 맞춰줄것 필수 / 투명도는 비추 )

/* 본문 영역 */
#content {
    padding: 15px 10px;
    float: left;
    width: 67%;
    background: #fff;
    border: 1px solid;
    margin-bottom: 50px;
    position: relative;
}

html 에서 첫화면 부분을 찾아 공지 URL 경로 입력

공지를 공지 게시판에 적었으면 /notice 또는 /notice/??? 로,

일반 카테고리에 적었으면 /category/??? 로 수정

<!-- 첫화면 -->
<script>
    var pathArray = location.href.split('/');
    if(pathArray[3] == '') {
        $('html').css('display','none');
        location.href = '/category/경로';
    }
 </script>

기본 URL : html 에서 아래 스크립트 삭제

티에디션 or 태더데스크 : 아래 스크립트 삭제 후 티에디션 or 태더데스크 설정

<!-- 첫화면 -->
<script>
    var pathArray = location.href.split('/');
    if(pathArray[3] == '') {
        $('html').css('display','none');
        location.href = '/category';
    }
 </script>

jpg 파일인 경우 logo.jpg로 파일명을 변경한 후

블로그관리 → 스킨편집 → HTML.편집 → 우측 상단 파일업로드에서 업로드.

jpg 파일이 아닌 경우 CSS에서 아래 부분을 찾아logo.jpg를 파일명과 확장자에 맞춰 변경 후 저장

사이즈 변경은width: 100px;, height: 100px; 수치 변경

동그란 정도를 변경하려면 border-radius: 100%; 수치 변경

삭제는 display:none; 입력

정확하게 했는데도 변경이 되지 않거나 간헐적으로 될 경우

인터넷 쿠키 삭제 or 강제 새로 고침 (크롬, 크로미움 기준 단축키 컨트롤+쉬프트+R)

#aside .logo {
    background: url(./images/logo.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 100%;
}

CSS 

넓이 : width: 150px , 여백: padding: 20px;, 배경색 : background: #fff;, 

본문 영역과의 간격: margin-left: 20px; 수정

#aside {
    width: 150px;
    float: right;
    border: 1px solid;
    padding: 20px;
    background: #fff;
    overflow: hidden;
    position: fixed;
    display: inline-block;
    margin-left: 20px;
}

CSS에서 content 부분을 변경 (참고 : https://fontawesome.com/v4.7.0/ )

카테고리

a.link_item:before {
    content: '\f07b';
    font-family: FontAwesome;
}

서브카테고리

.link_sub_item:before {
    content: '\f07c';
    font-family: FontAwesome;
}

html에서 C200x200 원하는 사이즈로 수정 (사이즈가 커질 수록 로딩이 느려짐)

참고 http://cocosoft.kr/349 

<img src="//i1.daumcdn.net/thumb/C200x200/?fname=">

CSS

#lst_gal .thumb {
    float: left;
    width: 28.8%;
    margin: 10px;
    position: relative;
}

width 수치를 줄이면 가로 썸네일 갯수가 늘어나고 높이면 줄어들음

이에 맞게 margin 수치를 미세하게 조절해서 간격 조절

html 아래 부분 삭제

<!-- 노이미지 --> 
    <script>
        $(function(){
            $(".thumb-link").not(":has(.thumb-img)").prepend("<span class=thumb-img><img src=./images/noimg.jpg></span>");});
   </script> 

후 CSS에서 이 부분을

#lst_gal .thumb .info .text {
    display: none;
    /*display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

밑에 소스로 변경 (display:none을 삭제하고 주석처리를 풀면 됨)

#lst_gal .thumb .info .text {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

카테고리와 날짜까지 표기하려면 아래 부분에서 display: none; 삭제

#lst_gal .thumb .cate, #lst_gal .thumb .info .date {
    display: none;
    margin-right: 5px;
}

CSS에서 아래 부분 삭제 또는 다른 효과로 변경

#lst_gal a:hover img {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    transition: .5s ease;
}

참고 : http://www.blueb.co.kr/?c=2/35&cat=Image&uid=4079

CSS에서 아래 부분 삭제

변경은 다른 이미지를 업로드하여 url 주소 부분에 파일명.확장자와 동일하게 맞춰주시거나 백그라운드 url을 삭제 후 색상코드 입력 등 커스텀

#lst_gal .thumb:hover .hover {
    opacity: 1;
    background: url(./images/hover.png) center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    border-radius: 5px;
    z-index: 9;
}

html에서 lst_gal → lst_web 으로 변경

<div class="list_wrap" id="lst_gal">

html에서 /category/카테고리명' || ptn =='/category/카테고리명 입력

1개일 경우 || 뒷부분은 삭제

카테고리 명이 영문 숫자를 제외한 다른 언어인 경우

해당 메뉴에서 마우스 우측클릭 → 링크주소복사 (크롬or크로미움 기반 브라우저 해당) 를하여 /category/%EB%91%90%EB%B2%88%EC%A7%B8 처럼 입력하면 됩니다.

<!-- 부분 리스트형 --> 
    <script>
        var ptn = window.location.pathname;
        if(ptn == '/category/text' || ptn =='/category/gallery/sub-text'|| ptn =='/category/text/sub-text2'){
        $(".list_wrap").attr("id","lst_web");}
   </script>

CSS에서 display:none; 을 입력,

#lst_web .thumb img {
    border-radius: 100px;
    float: left;
    margin-right: 15px;
    width: 70px;
}

CSS 공지가 나타나는 속도를 조절하기 위해서는 0.0s ~ 3.5s 부분을 자유롭게 조정하면 됩니다.

한 페이지에 6개 정도 설정을 해놨으나 더 필요하신 분은 필요한 만큼 추가하시면 되며

아래로 갈 수록 숫자가 올라가야 위에서부터 차례대로 하나씩 출력됩니다.

.entryNotice:nth-of-type(1) {    animation-delay: 0.0s;}
.entryNotice:nth-of-type(2) {    animation-delay: 0.5s;}
.entryNotice:nth-of-type(3) {    animation-delay: 1.3s;}
.entryNotice:nth-of-type(4) {    animation-delay: 2.0s;}
.entryNotice:nth-of-type(5) {    animation-delay: 2.8s;}
.entryNotice:nth-of-type(6) {    animation-delay: 3.5s;}

html 아래 부분 삭제

<s_notice_rep>
    <div class="entryNotice">
        <div class="date"><span><script type="text/javascript">
            var TDate    = '';    
            YYYY= TDate.substr(0,4);
            MMDD= TDate.substr(5,5);
            document.write(YYYY+"."+MMDD); 
           </script></span> </div>
        <div class="notice-article"></div>
    </div>
</s_notice_rep>

아래 부분 입력

<s_notice_rep>
    <div class="entryNotice">
        <div class="titleWrap">
            <h2><a href=""></a></h2>
            <span class="date"> </span>
        </div>
        <div class="article"></div>
    </div>
</s_notice_rep>

CSS 에서 /* 공지 */ 라고 적혀진 부분의 내용을 모두 삭제 후 하단 내용 입력

타이틀, 날짜, 공지 본문 이라고 적혀진 부분을 원하는대로 커스텀

.entryNotice .titleWrap h2 {타이틀}
.entryNotice .titleWrap .date {날짜}
.entryNotice .article {공지 본문}

CSS

.commentList img, .commentList .cmt-reply img, .guestList img, .guestList .reply img {
    left: 0px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    margin-left: 5px;
    display: none;
}

에서 display: none; 삭제

.commentList .info, .guestList .info {/* margin-left: 40px; */
}

주석 해제

CSS 모바일 관련한 수정은 모두 하단 괄호 안에서 하시면 됩니다.

/* 모바일 영역 */
@media all and (max-width: 768px) {
}

엑박, 압축 파일 받아서 원본 스킨 그대로 적용했는데 스킨이 다르게 나옴

☞ images 폴더 안에 파일을 모두 업로드 해주세요

_M#]

 

이 외 질문은, 스킨 수정에 관한 간단 질문만 공개 댓글로 받습니다. 다른 분들의 빠른 답변과, 제가 중복 답변으로 인해 소모되는 시간을 줄여주세요. 비밀 댓글로 질문하실 경우 답변 드리지 않습니다. 

(질문글이 아닌 경우 비댓OK)

질문 하시기 전에 수정하고 싶은 부분을 마우스 오른쪽 클릭 → 검사 를 누른 후 오른쪽 창에서 html과 css를 수정해 원하는대로 수정을 해보시고 정 안될 경우 질문해주세요. 저 또한 이 부분으로 전문적으로 알지 못하고, 공부한 것도 아니기 때문에 이와 같은 방법으로 스킨을 만들고 제작하고 수정합니다.

또한 질문을 남기실 때 스킨을 적용한 상태로 질문을 주시면 답변에 도움이 되며, 기본 블로그가 아닐 경우 별도로 적용하신 블로그의 주소를 적고, 오류나 잘 되지 않는 부분을 상.세.하.게 적어 주시면 서로 질답 소모시간이 줄어드니 상세하게 적어주세요.

※ 티스토리 특성상 댓글이나 방명록을 로그인하지 않고 비밀글로 작성할 경우 제가 공개 답변이 아닌 비밀답글을 적으면 답글을 확인하실 수 없어 로그인 하신 분만 댓글 작성이 가능하도록 설정했습니다.

😍 잘 사용하겠다는 댓글 or 질문 답변에 대한 피드백을 남겨주시면 힘이 납니다!! (필수 아니예요ㅠ) 😍

긴 글 읽어주셔서 감사합니다 :D