색상 선택 공통

아래 스킨 옵션을 설명하는 부분에서 색상을 입력하는 부분이 나옵니다.

색상 입력은 제시되는 색상을 선택해도 되지만, 직접 색상 코드를 입력해도 되며 투명도를 지정하길 원한다면 #??????의 뒤에 00 ~ FF를 더 붙여 설정하면 투명도가 설정됩니다.
예 - #00000000 = 블랙 투명도0 / #00000080 = 블랙 투명도 50% / #000000FF = 블랙 투명도 100% 

단 일부 브라우저에서는 지원하지 않기 때문에, 기타 브라우저를 사용하시는 분은 아래 스킨 옵션이 아닌 CSS나 html의 style에서 opacity나 rgba등을 사용해 직접 수정해야 할 수 있습니다.
또한 지원하지 않는 브라우저에서는 제가 설정한 색상과 사이즈가 적용되도록 해두었기 때문에 스킨 옵션에서 사이즈와 색상을 변경해도 변경되지 않는다면 스킨 옵션 안내 섹션 아래 별도 안내를 따라 css를 수기로 변경해주세요.

첫 페이지를 특정 글로 설정

티스토리에 접속 시 가장 첫 화면을 특정 페이지로 보여주고 싶은 경우 설정합니다. 입력하지 않을 경우 이 기능은 off 됩니다.
네이버 웹마스터 도구에 등록을 하셨다면 리디렉션으로 인지하여 검색 결과에 좋지 않은 결과를 줄 수 있습니다.

예 )

• 공지 게시판 - https://sweet-myo.tistory.com/notice → notice 입력
• 공지 게시판의 특정 글 - https://sweet-myo.tistory.com/notice/3 → notice/3 입력
• 특정 글 - https://sweet-myo.tistory.com/356 → 356 입력

넓이

스킨 내부 요소의 넓이를 설정합니다. 단위는 px입니다.
넓이를 변경한 후에는 아래 안내 중 썸네일 비율 설정을 통해 썸네일 사이즈를 알맞게 설정해주고 (목록형만 사용시 불필요),
관리 > 콘텐츠 - 설정 > 에디터 가로 폭은 [ ] px로 설정합니다. 에서 변경한 사이즈를 입력해주시는게 좋습니다 (새 에디터 사용시 불필요)

디폴트 색상

• 배경색 - #FFFFFF
• 기본 폰트 - #444444
• 포인트 - #B58B71
• 스크롤바 - #EEEEEE

배경 이미지, 모바일 배경 이미지

스킨의 배경을 이미지로 설정합니다. 
모바일의 경우 가로로 긴 이미지보다는 세로로 긴 이미지를 권장하며, 모바일 웹 특성상 배경이미지가 정상적으로 깔리지 않아, 뒤에 배경처럼 보이는 박스하나를 둔 것이라 생각하시는 것과는 조금 다를 수 있습니다.
특히 삼성브라우저와 같이 위 아래로 스크롤 시 위나 아래에 툴바 영역이 생겨 브라우저 화면이 좁아지는 경우 이미지의 사이즈가 변동이 됨을 확인할 수 있습니다.
PC와 모바일 모두 1개의 이미지가 꽉차도록 설정되어있으며 작은 이미지를 패턴으로 사용하길 원하는 경우 아래 안내를 따라 수정합니다.

CSS - body

body { // pc버전 배경
	background-color: var(--bg);
	-webkit-background-size: cover; /* 삭제 */
	-moz-background-size: cover; /* 삭제 */
	-o-background-size: cover; /* 삭제 */
	background-size: cover; /* 삭제 */
	background-attachment: fixed; /* 삭제 */
	background-repeat: no-repeat; /* 삭제 */
}

.mbg { // 모바일 배경
        position: fixed;
        display: block;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-size: cover; /* 삭제 */
        background-position: center center; /* 삭제 */
        z-index: -1;
    }

로고

카테고리 상단의 로고 이미지를 변경합니다.

타이틀 로고

텍스트로 된 블로그 이름을 이미지로 변경합니다. 투명화된 png파일을 권장합니다. 최대 높이 50px로 설정되어 있습니다.

소개글

소개글이나 적고 싶은 글을 설정합니다

마우스 커서(png)

원하는 이미지를 마우스 커서로 사용합니다.
투명화처리된 png나 gif파일을 권장하며 cur파일인 경우 (링크)에서 png파일로 변환 후 업로드 해 사용할 수 있습니다.
이 옵션은 cursors-4u같은 사이트에서 제공하는 소스는 보안설정이 되어있지 않아 적용을해도 정상적으로 보이지 않기 때문에 파일을 다운 받아 업로드 해 사용할 수 있도록 제작했습니다.

부드러운 스크롤

마우스 휠을 이용해 스크롤 할 때 부드럽게 멈추도록 설정합니다.

부드러운 화면 전환

화면이 전환 될 때 (페이지가 변경될 때) 부드럽~게 전환이 되도록 합니다.

새 글 아이콘

관리 > 콘텐츠 - 카테고리 관리 > 카테고리에 새글 발행 여부를 [ 표시합니다 ] 를 설정을  꼬옥 하셔야하고,
기본으로 설정된 아이콘의 변경을 원하는 경우 Themify / FontAwesome 중에서 원하는 아이콘을 찾아 <i class="아이콘이름"></i> 와 같은 식으로 입력하거나,
이미지인 경우 <img src="이미지url" alt="새글아이콘"> 이러한 형식으로 입력합니다.
이미지로 입력할 경우 반드시 콩알만치 작은 이미지를 넣어줘야 스킨이 틀어지지 않습니다.

공지 게시판 이름, 방명록 이름

각각의 이름을 지정합니다. 입력하지 않을 경우 나타나지 않습니다.
입력을 했으나 나타나지 않는 경우, 순서를 변경하고 싶은 경우 관리 > 꾸미기 - 사이드바에서 on, off와 순서를 모두 변경할 수 있습니다.

원고지 모드

일반적인 글 형태에서 원고지 형태로 변경합니다. 일부 아닌 일괄 적용 됩니다.
에디터에서 작성하신 글 중 html모드에서 보았을 때 < p > < /p > 안에 있는 글만 적용이 되고, 첨부한 이미지, 동영상, 인용구, 접은 글, 줄 바꿈 모두 안됩니다.
에디터에서 작성한 글을 복사해서 글만 붙여넣기 된다고 보시면 됩니다. 언젠가 실력이 더 늘어서 이를 해결할 방법이 생각이 나면 고쳐보도록 하겠습니다 ㅠㅠ

또한 원고지모드 사용시 일부 브라우저에서 원고지와, 글의 위치가 맞지 않을 수 있습니다.
제가 확인했을 땐, 익스플로러에서는 세로 선이 안보이고, 모바일 삼성 브라우저에서는 줄이 맞지가 않네요.. 이 외 크로미움 기반으로 한 모바일 브라우저에서는 대부분 맞는 것으로 보이는데.. 삼성 브라우저가.. 문제입니다.

원고지 색상

원고지 라인의 색상을 변경합니다 (디폴트 색상 : #F99999)

단축키 - 글쓰기 모드

단축키 w 의 기본 글쓰기 모드는 기존 에디터로 설정되어 있습니다.
관리 > 콘텐츠 - 설정 > 새로운 글쓰기를 [ 사용합니다 ] 로 설정하신 경우 또는 새 에디터를 기본으로 사용하시는 경우
이 옵션을 활성화 하면 w 의 기본 글쓰기 모드가 새 에디터로 변경됩니다.

단락 앞 뒤 공백

관리 > 콘텐츠 - 설정 > 단락 앞뒤에 공백을 [ 사용하지 않습니다 / 사용합니다 ]
또는 기존 에디터의 문단 간격 없음을 지원하는 기능으로
글 작성 시 문단(긴 글) 또는 단락을 띄울 때 엔터 한번으로 단락을 나누어 간편하게 사용을 원하시는 분은 on - 이 경우 단순 줄 바꿈은 shift + enter,
그냥 엔터를 여러번 처서 단락을 나누시는 분은 체크를 off 하시면 됩니다.

스킨 기본 기능으로 넣을 수도 있었지만 기존에 엔터 여러번 쳐서 단락을 나누시던 분은 불편함을 느낄 수 있어 옵션화했습니다.

댓글 작성순 → 최신순

티스토리의 댓글 시스템은 나중에 달린 댓글이 아래로 달리는 시스템입니다.
이를 최신순으로 변경을 원할 경우 사용하는 옵션입니다.

SNS ID

아이디를 입력하면 카테고리 메뉴 왼쪽 상단에 각 SNS 아이콘으로 표시되며, 입력하지 않으면 나타나지 않습니다.
유튜브는 ID만 입력하는 것이 아닌 채널 주소(url)을 전부 입력합니다

원하는 웹폰트를 찾아 아래 웹폰트 소스를 지우거나 하단에 붙여넣기 한 후 폰트 명을 변경해줍니다.
일부 부분에 폰트를 직접 설정해 놓은 곳이 있으니 font-family를 검색해 확인 후 함께 변경하도록 합니다.

@font-face { /* 타이틀 폰트 */
    font-family: 'HSBombaram';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/HSBombaram.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face { /* 전체 폰트 */
    font-family: 'Iropke Batang';
    font-style: normal;
    font-weight: 400;
    src: url(//cdn.jsdelivr.net/font-iropke-batang/1.2/IropkeBatangM.eot);
    src: url(//cdn.jsdelivr.net/font-iropke-batang/1.2/IropkeBatangM.eot?#iefix) format('embedded-opentype'), url(//cdn.jsdelivr.net/font-iropke-batang/1.2/IropkeBatangM.woff) format('woff'), url(//cdn.jsdelivr.net/font-iropke-batang/1.2/IropkeBatangM.ttf) format('truetype');
}

/* 전체 폰트 */
html,
th,
td,
input,
select,
textarea,
button,
#tt-body-page blockquote,
#tt-body-page blockquote p,
#tt-body-page blockquote[data-ke-style='box'],
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless,
figure figcaption,
figure[data-ke-type='video'] figcaption,
code,
blockquote,
blockquote p {
    font-family: 'Iropke Batang', sans-serif; /* 전체 폰트 */
    line-height: 2; /* 줄 간격 */
    font-size: 13px; /* 폰트 사이즈 = 원고지 모드 사용시 폰트 사이즈 변경 비추 */*/
    color: #444; /* 전체 폰트 색상 익스플로러 대응 */
    color: var(--text); /* 전체 폰트 색상 - 추가 옵션 설정용 */
}

스킨 파일 중 myo_script.js를 메모장으로 열어 아래 소스를 참고한 후 원하는 수치로 변경 후 파일 업로드하세요.
(파일 업로드 후에도 변화가 없으면 크롬, 웨일 기준 컨트롤+쉬프트+R을 동시에 눌러 새로고침 or 쿠키, 캐시 삭제 or html에서 myo_script.js?ver=1.0 등 버전 표시를 붙여 업로드 시 마다 버전 숫자를 변경합니다)
2000은 페이지가 보여지는 속도, 1000은 다른 페이지로 넘어가기 전 페이지가 닫혀지는 속도입니다.

if ($('.smooth-screen').length) {
    jQuery(function ($) {
        $("#container").fadeIn(2000).css("display", "flex");
        $("a").click(function (event) {
            event.preventDefault();
            linkLocation = this.href;
            $("#container").fadeOut(1000, redirectPage);
        });

        function redirectPage() {
            window.location = linkLocation;
        }
    });
}

익스플로러에서도 색상 및 넓이가 적용되길 원하시는 분께서는 아래 안내를 참고하여 CSS에서 직접 변경해주세요

var(--bg) /* 배경색 */
var(--text) /* 전체 폰트 색 */
var(--point) /* 포인트 색상 */
var(--scroll) /* 스크롤바 색상 */
var(--manu) /* 원고지 라인 색상 */

html - <i class="fa fa-???></i> , CSS - font-family: "fontAwesome"; 로 되어있는 곳은 아래 사이트를 참고하세요
https://fontawesome.com/v4.7.0/icons/

html - <i class="ti-???"></i> , CSS - font-family: "themify"; 인 경우 아래 사이트를 참고하여 변경하시면 됩니다.
https://themify.me/themify-icons

이 사이트의 경우 css에서 사용하는 코드가 기재가 되어있지 않기 때문에 수동으로 찾아야하는데요

위 사이트에서 필요한 아이콘 위에서 마우스 우클릭 > 검사를 한 후 나오는 창에서 선택 되어있는 span 클래스를 열면 ::before 이란 단어가 나오는데
이걸 클릭하면 우측에 나오는 css창에 적혀진 content:"/영숫자" 를 복사해 스킨의 CSS에서 수정하고 싶은 아이콘을 변경하면 됩니다.

- 첫 페이지를 특정 글로 설정

티스토리에 접속 시 가장 첫 화면을 특정 페이지로 보여주고 싶은 경우 설정합니다. 입력하지 않을 경우 이 기능은 off 됩니다.

예 )
특정 글 - https://sweet-myo.tistory.com/356 → 356 입력

- 스킨 넓이 (디폴트 600)

스킨의 넓이를 변경합니다. 단위는 px이며 높을 수록 넓게, 낮을 수록 좁게 설정됩니다.

- 색상 선택 공통

아래 스킨 옵션을 설명하는 부분에서 색상을 입력하는 부분이 나옵니다.
색상 입력은 제시되는 색상을 선택해도 되지만, 직접 색상 코드를 입력해도 되며 투명도를 지정하길 원한다면 #??????의 뒤에 00 ~ FF를 더 붙여 설정하면 투명도가 설정됩니다. 
예 - #00000000 = 블랙 투명도0 / #00000080 = 블랙 투명도 50% / #000000FF = 블랙 투명도 100% 

단 일부 브라우저에서는 지원하지 않기 때문에, 기타 브라우저를 사용하시는 분은 아래 스킨 옵션이 아닌 CSS나 html의 style에서 opacity나 rgba등을 사용해 직접 수정해야 할 수 있습니다.

• 배경색 (디폴트 #F2BF5E) - 스킨의 배경 색상을 설정합니다
  
• 기본 폰트 색상 (디폴트 #444) - 전체적인 폰트의 색상을 설정합니다
  
• 포인트 색상 1, 2 (디폴트 #32A670 #D9644A) - 스킨의 포인트 색상을 설정합니다
• 스크롤바 색상 (디폴트 #32A670) - 스크롤바의 움직이는 부분 색상을 설정합니다
• 네비게이션 배경 색상 (디폴트 #39BF81) - 메뉴창의 배경 색상을 설정합니다

- 마우스 커서(png)

원하는 이미지를 마우스 커서로 사용합니다.
투명화처리된 png나 gif파일을 권장하며 cur파일인 경우 (링크)에서 png파일로 변환 후 업로드 해 사용할 수 있습니다.
이 옵션은 cursors-4u같은 사이트에서 제공하는 소스는 보안설정이 되어있지 않아 적용을해도 정상적으로 보이지 않기 때문에 파일을 다운 받아 업로드 해 사용할 수 있도록 제작했습니다.

- 배경이미지

스킨의 배경을 이미지로 설정합니다. 1개의 이미지가 꽉차도록 설정되어있으며 작은 이미지를 패턴으로 사용하길 원하는 경우 아래 안내를 따라 수정합니다.

CSS - body

body {
	background-color: var(--bg);
	-webkit-background-size: cover; /* 삭제 */
	-moz-background-size: cover; /* 삭제 */
	-o-background-size: cover; /* 삭제 */
	background-size: cover; /* 삭제 */
	background-attachment: fixed; /* 삭제 */
	background-repeat: no-repeat; /* 삭제 */
}

- 로고

스킨 상단에 동그란 이미지를 변경합니다.

- 타이틀 로고

텍스트로 된 블로그 이름을 이미지로 변경합니다. 투명화된 png파일을 권장합니다.

- 소개글

클릭했을 때 카테고리 메뉴가 나타나는 버튼이며, 입력하지 않은 경우 三 모양의 아이콘으로 대체됩니다.
줄 변경을 원하는 경우 줄 변경을 하고 싶은 구간에 위 예시와 같이 <br>을 적으면 됩니다.

- 방명록 이름

방명록의 이름을 지정합니다. 입력하지 않을 경우 나타나지 않습니다.

- 메뉴 사용

생성된 모든 카테고리를 자동으로 불러오는 것이 싫고, 메뉴를 자유롭게 설정하고 싶을 때 적당합니다.
메뉴를 사용할 경우 티스토리에서 단일 메뉴로 지원하기 때문에 서브 카테고리와 같은 기능은 제공하지 않습니다.

설정 방법
블로그 관리 > 꾸미기 - 메뉴

설정한 카테고리가 아닌 홈 / 태그 / 미디어로그 / 위치로그 / 방명록 으로 카테고리가 뜨는 분은 이 옵션을 끄거나 설정을 변경해주세요!!!
(기본 설정을 off로 해놨는데 ㅠㅠㅠ 티스토리가 자꾸 on으로 적용시킵니다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ)

- 형태

전체 카테고리 게시판의 형태를 설정합니다.
기본은 갤러리형으로 되어있으며, 목록형 중 하나를 선택할 수 있습니다.
전체 카테고리가 아닌 부분 목록형 등으로 설정하기 위해서는 스크립트 수정이 필요하며 아래 별도 안내 되어있습니다.
( 부분 목록형, 부분 웹진형 등은 사용자마다 사용하는 형태, 카테고리 등이 다양하므로 스킨옵션을 통해 간편화 할 예정이 없습니다)

- 노이미지, 보호글

이미지가 없는 글, 보호글의 썸네일(미리보기 이미지)를 원하는 이미지로 변경합니다.
첨부된 파일이 없는 경우 기본 이미지로 대체 됩니다.

- 단축키 - 글쓰기 모드

단축키 w 의 기본 글쓰기 모드는 기존 에디터로 설정되어 있습니다.
관리 > 콘텐츠 - 설정 > 새로운 글쓰기를 [ 사용합니다 ] 로 설정하신 경우 또는 새 에디터를 기본으로 사용하시는 경우
이 옵션을 활성화 하면 w 의 기본 글쓰기 모드가 새 에디터로 변경됩니다.

- 단락 앞 뒤 공백

관리 > 콘텐츠 - 설정 > 단락 앞뒤에 공백을 [ 사용하지 않습니다 / 사용합니다 ]
또는 기존 에디터의 문단 간격 없음을 지원하는 기능으로

글 작성 시 문단(긴 글) 또는 단락을 띄울 때 엔터 한번으로 단락을 나누어 간편하게 사용을 원하시는 분은 on - 이 경우 단순 줄 바꿈은 shift + enter,
그냥 엔터를 여러번 처서 단락을 나누시는 분은 체크를 off 하시면 됩니다.

스킨 기본 기능으로 넣을 수도 있었지만 기존에 엔터 여러번 쳐서 단락을 나누시던 분은 불편함을 느낄 수 있어 옵션화했습니다.

- 프로필 사진

댓글, 방명록에 프로필 사진을 표시합니다.
on 할 경우 티스토리 관리 > 플러그인 > 블로그 아이콘 설정 -> 64x64 설정이 반드시 필요합니다.

- SNS ID

아이디를 입력하면 카테고리 메뉴 왼쪽 상단에 각 SNS 아이콘으로 표시되며, 입력하지 않으면 나타나지 않습니다.

익스플로러에서도 색상이 적용되길 원하시는 분께서는 아래 안내를 참고하여 CSS에서 직접 변경해주세요
CSS파일을 메모장 같은 곳에서 열어 바꾸기를 통해 일괄 변경 후 적용하면 쉽게 색상을 변경할 수 있습니다.

var(--bg) /* 배경색 */
var(--text) /* 기본 폰트 색 */
var(--point) /* 포인트색1 */
var(--point2) /* 포인트색2 */
var(--scroll) /* 스크롤바 색 */
var(--nav) /* 카테고리 메뉴 배경 색 */

CSS

원하는 웹폰트를 찾아 아래 웹폰트 소스를 지우거나 하단에 붙여넣기 한 후 폰트 명을 변경해줍니다.
일부 부분에 폰트를 직접 설정해 놓은 곳이 있으니 font-family를 검색해 확인 후 함께 변경하도록 합니다.

/* 웹폰트 */
@import url('https://fonts.googleapis.com/css?family=Song+Myung|Righteous');

@font-face {
	font-family: 'BareunBatang';
	font-style: normal;
	font-weight: 400;
	src: url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kpa/BareunBatang/BareunBatangOTFM.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kpa/BareunBatang/BareunBatangOTFM.woff') format('woff');
}

@font-face {
	font-family: 'BareunBatang';
	font-style: normal;
	font-weight: 700;
	src: url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kpa/BareunBatang/BareunBatangOTFB.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kpa/BareunBatang/BareunBatangOTFB.woff') format('woff');
}

@font-face {
	font-family: 'BareunBatang';
	font-style: normal;
	font-weight: 300;
	src: url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kpa/BareunBatang/BareunBatangOTFL.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/orgs/othrs/kpa/BareunBatang/BareunBatangOTFL.woff') format('woff');
}

.bareunbatang * {
	font-family: 'BareunBatang', serif;
}

/* 전체 폰트 */
html,
th,
td,
input,
select,
textarea,
button,
#tt-body-page blockquote,
#tt-body-page blockquote p,
#tt-body-page blockquote[data-ke-style='box'],
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless,
figure figcaption,
figure[data-ke-type='video'] figcaption,
code {
	font-family: 'BareunBatang'; /* 폰트 */
	line-height: 1.7; /* 줄 간격 */
	font-size: 14px; /* 폰트 사이즈 */
	color: var(--text); /* 기본 폰트 색상 */
}

html

블로그 관리 > 꾸미기 - 스킨 편집 > 스킨 옵션 > 목록 형태 > 썸네일형, 목록형, 웹진형 중 원하는 타입으로 변경 후
밑에는 해도 되고 안해도 되지만 하면 좋은 작업입니다. 

카테고리 이름에 text, web 등이 있다면 반드시 진행해주세요 

$(function () { // 부분 목록
	var ptn = location.pathname;
	if (ptn == '/category/text' || ptn == '/category/gallery/sub-text' || ptn == '/category/text/sub-text2') {
		$(".myoskin").attr("id", "myo_bbs");
	}
});

html에서 

아래 소스를 참고해 /category/카테고리명' || ptn =='/category/카테고리명 입력
1개일 경우 || 포함 뒷부분은 삭제 

카테고리 명이 영문 숫자를 제외한 다른 언어인 경우
해당 메뉴에서 마우스 우측 클릭 → 링크주소복사 (크롬or크로미움 기반 브라우저 해당) 를하여 /category/%EB%91%90%EB%B2%88%EC%A7%B8 처럼 입력하면 됩니다. 
(익스 플로러에서 한자, 일본어 등 기타 언어를 사용한 카테고리의 페이지를 넘기면 아래 스크립트가 적용이 되지 않는 다는 제보가 있습니다. 이 부분 확인해주세요)

$(function () { // 부분 목록
	var ptn = location.pathname;
	if (ptn == '/category/text' || ptn == '/category/gallery/sub-text' || ptn == '/category/text/sub-text2') {
		$(".myoskin").attr("id", "myo_bbs");
	}
});

html - <i class="fa fa-???></i> , CSS - font-family: "fontAwesome"; 로 되어있는 곳은 아래 사이트를 참고하세요
https://fontawesome.com/v4.7.0/icons/

html - <i class="ti-???"></i> , CSS - font-family: "themify"; 인 경우 아래 사이트를 참고하여 변경하시면 됩니다.
https://themify.me/themify-icons

이 사이트의 경우 css에서 사용하는 코드가 기재가 되어있지 않기 때문에 수동으로 찾아야하는데요

위 사이트에서 필요한 아이콘 위에서 마우스 우클릭 > 검사를 한 후 나오는 창에서 선택 되어있는 span 클래스를 열면 ::before 이란 단어가 나오는데
이걸 클릭하면 우측에 나오는 css창에 적혀진 content:"/영숫자" 를 복사해 스킨의 CSS에서 수정하고 싶은 아이콘을 변경하면 됩니다.

- 목록 배열 변경 > 배열을 변경하면 반드시 아래 썸네일 비율을 참고하여 썸네일의 사이즈를 줄이는 것을 권장합니다

#myo_gal .item {
   float: left;
   margin: 0 ?% ?% 0; /* 썸네일 사이 여백 0 우 하 0 */
   width: 사이즈 입력%; /* 퍼센트로 입력할 것을 추천 50% 미만이면 한 줄에 2개, 33.3% 미만이면 한 줄에 3개, 25% 미만이면 한 줄에 4개 나온다고 보시면 됩니다. */
}
#myo_gal .item:nth-child(?n) { /* 위에서 썸네일을 한 줄에 2개 나오게 했으면 2n, 3개 나오게 했으면 3n, 4개 나오게 했다면 4n 으로 입력하면 됩니다. */
   margin-right: 0;
}

- 썸네일 비율 변경

html에서 C600x300이나 비슷해 보이는 부분을 모두 수정합니다. 
본문 영역 넓이를 늘려 썸네일 크기가 늘어나 깨지는 경우 더 큰 사이즈로 변경합니다 (사이즈가 커질 수록 로딩이 느려짐, 늘릴 수록 움짤 플레이가 짧아질 수 있음 = 스킨으로 인한 것이 아님) 
참고 http://cocosoft.kr/349 ( 이 스킨은 R000x0 사이즈로는 추천하지 않습니다.) 

썸네일에서 움짤이 너무 짧은 분은 위 두가지를 모두 병행하여 불러오는 썸네일의 용량을 줄이면 개선될 수 있으니 참고하세요