스킨 개발을 위한 메뉴얼 사이트 


안녕하세요.
고코더 입니다.


티스토리는 스킨을 자유롭게 수정이 가능합니다. 하지만 최소한에 규칙이 있습니다.
해당 규칙을 지키면 티스토리에서 사용이 가능합니다.


 1. 깃허브에 운영하는 티스토리 스킨 페이지 입니다.


 2. 목차를 선택하여 자세한 사용법을 확인 가능합니다.


 3. 하나에 메뉴를 클릭해보았습니다. 스킨에 대한 파일구조에 대한 설명입니다.
나름 이 메뉴얼만 보고 충분히 개발이 가능할거라 생각 됩니다.



스킨을 만들기 위한 모든 정보를 확인 가능합니다. 그리고 깃허브에
이 페이지를 운영하고 있는 것도 재밌습니다. 티스토리 스킨을 개발하고 싶은분은 참조해서 만들어보세요.


마무리


티스토리 스킨도 한번 만들어 보고 싶네요.



















댓글을 달아 주세요



다크모드 알송


안녕하세요.
고코더 입니다.



알송을 키고 음악을 들으면 딴짓하는건 아니지만 눈치가 보일 수 밖에 없습니다.
그래서 잘 눈에 안띄게 하는 방법중 하나가 테마를 어둡게 변경 하는 것 입니다. 
그리고 저는 모든 개발 프로그램을 어둡게 사용하는데 알송이 너무 튀네요.

 1. 알송에서 마우스 오른쪽 버튼을 누르고 스킨 설정으리 이동 합니다. 그리고 알송 v3 블랙펄 스킨을 선택합니다.


 2. 그럼 새카맣게 아주 마음에 드는 색상으로 변경이 되었습니다. 보기좋네요

 3. 다른 스킨도 한번 보여드리겠습니다. 그런데 너무 블링 해서 저랑은 안맞지만  취향인 분들 한번 해보시기 바랍니다. 파스텔 스킨입니다. 편안하고 이쁘네요.


 4. 팔레트 스킨입니다. 예전에 윈엠 느낌이 강력하네요.



마무리


사용자 스킨도 많고 개인이 설정도 가능합니다.









댓글을 달아 주세요


Tistory 스킨 저장하기


안녕하세요.
고코더 입니다.


 1. 티스토리는 CMS형 블로거이기에 스킨을 내 마음대로 수정하거나 만들어 사용이 가능합니다.
그래서 디자이너들이 다양한 스킨을 만들어 배포 합니다.
그리고 해당 디자인을 토대로 내 마음대로 수정도 가능합니다. 그런데 가끔 스킨을 고치다 원본을 수정하다. 돌이킬 수 없는 경우가 가끔 있습니다.
그래서 수정전에 스킨을 백업해두는 일은 매우 중요 합니다.



 2. 관리자 로그인 후에 꾸미기 -> 스킨 변경을 클릭 합니다.

● 3. 그리고 보이는 화면에서 보관이나 다운로드를 클릭하여 백업이 가능합니다.

 4. 보관 버튼을 누르면 스킨명을 통해 저장이 가능하고 

 5. 후에는 스킨 보관함을 통해 백업된 내 스킨을 확인 가능합니다.

 6. 다운로드 버튼을 클릭시에는 zip 파일로 현재 내 스킨을 압축하여 내려받기가 가능합니다.


마무리


원본을 잃어버리기전에 꼭 스킨을 백업하고 작업하세요!!


댓글을 달아 주세요


KoPubDotum-Regular 는 없네요


안녕하세요.
고코더 입니다.

kpub 폰트는 가독성이 매우 좋은 글씨체입니다.
이전에도 제가 다루었던 무료 서체인데요

그래서 스킨을 만들때나 홈페이지를 만들때
Kopub돋음 서체인
아래 CDN 주소를 자주 쓰실거라 생각합니다.


제가 사용하는 flatinum 스킨도
해당 서체를 사용합니다.

그런데 어느날 보니 가독성이 편한 서체가 아닌
일반 서체로 변해 있습니다.

▼ 기본 서체로 변해버린 블로그 
오늘에서야 알아챘습니다.


▼ 오류를 보니 Regular 서체들이 인식이 안되고 있습니다.
이런~~~


▼ 해당 무료 서체 CDN에 Regular 주소의 서체들이 존재하지 않습니다.



▼ 해당 주소를 아래처럼 바꿔 주세요
Regular -> Medium 으로 
위에 코드를 긁어서 모두 페이지 style에 선언해야겠죠?
src: url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Medium.eot);
src: url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Medium.eot?#iefix) format('embedded-opentype'),
url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Medium.woff) format('woff'),
url(//cdn.jsdelivr.net/font-kopub/1.0/KoPubDotum-Medium.ttf) format('truetype');

▼ 해당 CSS를 수정해주면

이제 정상적인 글씨체로 보입니다.


위에 그림이랑 비교해보세요
확실히 글씨체가 좋네요!!




마무리


폰트 하나로 눈이 편해졌네요


댓글을 달아 주세요


square 스킨 최근 글 이미지 오류 


안녕하세요 고코더 입니다.

티스토리의 시작을 스퀘어 스킨과 함께 하고 있습니다.
그런데 오늘 보니  페이지 접근시 하단에 있는 최근 글에 
이미지가 나타나지 않고 있는 오류를 발견했습니다. 
(사실 오류가 아니고 의도 된 디자인 인줄 알았네요)

▼처음은 DIV영역만 보이다 마우스 on 을 하면 글씨만 보입니다.
저도 모르게 최근 글이 보이지 않았던 오류 블로그였습니다. 
어서 고쳐야 겠네요.


▼티스토리 관리자에서 해당 HTML/CSS 편집 메뉴로 이동합니다.


▼제 블로그 기준으로 아래 URL로 이동 됩니다.
그리고 맨아래 있는 "ygal-edit.js" 를 마우스 오른쪽 버튼을 눌러 저장합니다.



▼그리고 텍스트 편집기로 열어보니
코드 소스가 이상합니다.
7번째 줄은 세미콜론이 없고
13번째 줄은 cfile로만 선언 되어 있습니다.



▼위에 소스를 아래처럼 바꾸어 보겠습니다.
7번째줄 :  var z = "image"; 
13번째줄 : var e = '<meta property="og:image" content="http://cfile'; 


▼ 변경한 소스는 아래와 같습니다. 
복사해서 덮어 쓰셔도 됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// ygal.js - yongzz.com
// edit by wallel
$(document).ready(function() {
    $("#recent-post .box").each(function() {
        var i = $(this).find("a").attr("href");
        var j = "R320x0";
        var z = "image";
        var d = $(this).find(".thumb img");
        $.ajax({
            url:i,
            dataType:"html",
            success:function(b){
                var e = '<meta property="og:image" content="https://cfile';
                var x = '<meta property="og:image" content="//m1.daumcdn.net/';
                var g = '"';
                if(b.match(e+"(.*?)"+g)!=null) {
                    a = b.match(e+"(.*?)"+g)[0];
                    a = a.substring(35,a.length-1);
                    a = a.replace("image",j);
                    d.attr("src",a.replace('original',j));
                } else if(b.match(x+"(.*?)"+g)!=null) {
                    a = b.match(x+"(.*?)"+g)[0];
                    a = a.substring(35,a.length-1);
                    a = a.replace("image",z);
                    d.attr("src",a.replace('original',z));
                } else {
                    d.remove();
                }
            }
        });
    });
});
cs

▼ 파일이 준비되었다면 기존 js 는 삭제하시고


▼ 방금 수정한 그 파일을 업로드 합니다.



▼ 캐쉬를 지우고 다시 살펴보니 이제야 정상적인 모습이 보이네요.



가벼운 오류가 있지만 반응성 스킨 중에는 
가장 깔끔한 스킨 같습니다.



마무리


이제 반년 정도 지나니 슬슬 다른 스킨으로 바꾸고 싶어지네요


댓글을 달아 주세요