안녕하세요! 최근 스킨 업데이트를 하면서 배경음악 (BGM) 기능이 추가된 스킨이 몇 가지 있습니다.
대부분 mp3 확장자 파일을 사용하지만, 간편하게 유튜브 주소를 사용하는 경우도 있어요. 각 방식마다 장단점이 있으니 아래 내용을 참고해주세요!
✔️mp3 파일(업로드) 방식 장점 - 페이지를 이동해도 끊긴 부분부터 자연스럽게 이어서 재생됩니다. - 로딩 속도가 빠르고 안정적 입니다. 단점 - mp3 파일을 직접 업로드해야 하므로 번거로울 수 있습니다. - (중요)얼마전에 변경된 티스토리 정책상 말일에 주소가 만료되서 새로 복사해서 링크(주소)만 다시 수정해주셔야 합니다.
✔️youtube 주소 방식 장점 - 유튜브 링크 복사만으로 설정이 아주 간단합니다. 단점 - 페이지를 이동하면 영상 로딩때문에 이어듣기가 매끄럽지 않습니다. - 로딩 과정에서 가끔 오류가 나거나 볼륨이 초반에 튀는 현상이 있습니다. - 광고가 함께 들릴 수 있습니다.
사실 저는 개인적으로는 mp3 방식을 더 선호하긴 합니다 ~(⁰▿⁰)~ 그런데 아무래도 직접 mp3 파일을 업로드하는게 은근히 번거롭고 티스토리 주소가 말일마다 갱신되는것도 정말 귀찮더라구요. (테스트 블로그 들어가면 배경음악 안나오고 있어요..१|˚–˚|५)
그래서 때때로 mp3 버전/youtube 버전 둘 다 올려둔 경우도 있어요! (사용하시는 분들이 편한걸로 골라 쓰실 수 있도록..ㅎㅎ)
또 코드도 복사 붙여넣기로 그대로 쓰면 좋긴 한데 스킨 디장니이나 BGM 플레이어 위치, 스타일에 따라 매번 코드를 새로 맞춰야 할 때가 있어서 거의 mp3방식을 사용하긴 합니다 :-Dㅎㅎ
계속 다양한 시도를 해보고 있지만, 혹시 더 좋은 방법이나 개선 아이디어 있으시면 언제든 편하게 글 남겨주세요! 그리고 사용중인 mp3 방식보다 youtube 사용한 bgm을 쓰고 싶다! 글 남겨주시면 따로 추가해드리겠습니다( ◍´꒳`(´꒳`◍ )♡
그리고 업데이트가 끝나면 mp3, youtube 배경음악 추가 코드를 올려볼게요!
mp3 확장자 사용시 (youtube → mp3 다운로드) 1. 변환 사이트 2. 변환 사이트
1. 변환사이트에서 유튜브 주소 → mp3 파일로 변환 후 다운로드
mp3 확장자 사용시수정(mp3 파일 업로드 및 주소복사) 방법
1. 블로그관리 - 글관리 - 글쓰기
2. 글쓰기에서 mp3 파일을 업로드 해줍니다.
3. 꼭 보호/비공개로 글을 올려주세요!
4. 작성한 글을 클릭합니다.
5. mp3 파일 오른쪽 마우스 누른 후 링크 주소 복사 클릭해주세요. 6. 복사한 코드를 url: '' 안에 넣어주시면 됩니다.
* mp3 주소 (티스토리 게시물 업로드) 사용시 말일에 티스토리 주소가 만료되어 월초에 배경음악이 재생되지 않을 수 있습니다. 이런 경우, 4번부터(링크주소복사, 붙여넣기) 다시 설정해주시면 됩니다 (T▽T)
유튜브 주소 사용시 수정 방법 (유튜브 id)
1. 유튜브 영상 주소창에서 ?v=영어& 를 복사하시거나 (영어만!!)
2. 유튜브 영상에서 공유하기 클릭 후 ?si앞에 영어를 복사해주시면 됩니다.( youtu.be/영어?si )
3. 그리고 복사한 영어를 스크립트 수정 ' ' 안에 넣어주시면 됩니다. (videoId 혹은 스킨 마다 다를 수 있으니 스킨 본문을 확인해주세요!)
* 유튜브 주소로를 이용한 배경음악은 간혹 영상 로딩 문제로 재생이 멈출 수 있습니다. 이럴땐 페이지를 새로고침해주시면 정상적으로 재생됩니다.
소리가 들리지 않을때!
1. 크롬 - 주소창 - 사이트 설정
2. 소리 - 허용으로 선택 후 새로 고침
※ PC(일반형)에서는 페이지 이동 시 끊긴 부분부터 이어 재생 및 자동 재생이 가능하지만, 반응형에서는 이어 듣기가 불가하며, 재생 버튼을 눌러야만 음악이 시작됩니다. (구조·정책상 불가)
스킨 42 부터는
배경음악을 스킨 편집창에서 직접 설정할 수 있고,
핀터레스트형, 믹스형, 피드형, 메신저형, +플레이리스트형3...등
새로운 게시판 유형도 추가될 예정이에요 💜
(홈커버도 동일하게 적용됩니다!)
이 외에도 스킨 편집창에서 더 간단하고 다양한 기능을 설정할 수 있도록
계속 기능을 추가해 나갈 예정이에요Σ( º。º ...)
+
덕질용뿐만 아니라 여러 스타일의 스킨도 차근 차근 제작해보려고 합니다(,,•́ . •̀,,)
- 스킨 등록(업로드)시 images에 있는 폴더는 마지막 혹은 처음에 따로 추가를 먼저해주세요.
* 파일 선택창에서 위 이미지와 같이 모두 선택시 images에 있는 파일은 업로드 되지 않습니다
* images에 있는 파일 따로, 그 밖에 있는 파일 따로 (총 2번) 추가해주세요.
- 스킨편집하기 - 상단 html 편집 클릭
- 파일업로드 - 하단 추가 선택 후
- 압축파일 해제한 파일에서 images에 있는 파일을 모두 업로드 해주세요
- 스킨 폴더에서 모두 선택 X, images 폴더 따로 클릭 - 그 안에 파일 추가해주시면 됩니다
- images폴더 안의 파일이 추가되었으면 상단 ← 화살표 눌러주세요.
제 스킨은 모두 목록 구성 요소 '목록만' 에 맞춰 제작되었습니다
* 스킨편집하기창에서 목록 구성 요소를 모두 목록만으로 설정해주세요.
* 스킨편집 - 최신글 - 홈 화면 글 수 1개로 설정해주세요.
아래 코드를 스킨편집하기 - CSS (맨 상단 혹은 하단)에 추가해주세요.
/* 공감버튼 */ .container_postbtn { display: none; }
티스토리 - 블로그 설정 - 꾸미기 - 모바일 선택
상단 티스토리 모바일 웹 자동연결을 사용하지 않습니다로 설정해주세요
주소 끝에 /m/이 붙어있으면 스킨이 적용되지 않습니다 /m/을 제외한 PC와 같은 주소를 사용해주세요
블로그 설정 - 카테고리 관리
하단 카테고리 설정 - 카테고리별 글 수, 카테고리에 새 글 발행 여부 표시하지 않습니다로 변경해주세요
1. XEICON
- 위 링크 접속 → LIBRARY → 원하는 아이콘 이름을 외부링크 아이콘 이름칸에 넣어주세요.
2. FONTAWESOME
- 원하는 아이콘 검색 → 클릭 → i class="이름" 에서 이름 부분만 복사해 넣어주시면 됩니다
아래 코드를 복사 - 스킨편집하기 - ctrl+f(찾기) - </html> 검색 후
맨 하단 </html> 바로 위에 붙여넣기해주세요.
URL은 원하는 페이지(주소)로 수정해주시면 됩니다
스크롤바 숨기기
스킨편집하기 - CSS - Ctrl+f(찾기) - ::-webkit-scrollbar 검색
::-webkit-scrollbar { } 안에 display:none; 을 추가해주세요
스크롤바 보이게 하기
스킨편집하기 - CSS - Ctrl+f(찾기) - ::-webkit-scrollbar 검색
::-webkit-scrollbar { } 안에 display:none; 을 삭제해주세요
본문 작성시 접은글 작성 후 좌측 상단 기본모드 - HTML 모드로 변경
더보기, 닫기 부분에 넣고 싶은 텍스트로 변경해주시면 됩니다.
무료 스킨 01은 본문 내용에 간단한 텍스트와 날짜 (yyyy-mm-dd 하이픈)을 작성해주시면 됩니다 (하이픈만 가능)
무료스킨 01 제외 업데이트 되는 스킨들은 본문에 간단한 텍스트와 함께
텍스트 yyyy-mm-dd(하이픈) , 텍스트 yyyy.mm.dd(점) , 텍스트 yyyy/mm/dd(슬래시)로 적어주시면 됩니다.
(세가지 모두 가능)
🔔 이 외 문의는 Q&A게시판을 확인하신 후
방명록
혹은
오픈채팅에 남겨주세요
♥⸜(⌯'▾'⌯)⸜♥
Q&A
닫기
스킨 사용 중 궁금한 점은 먼저 FAQ를 확인해주세요.
구매 전 문의와 사용 중 문의는 내용을 구분해서 남겨주세요.
오류 문의 시 사용 환경과 증상을 함께 적어주시면 확인이 더 빠릅니다.
캡처 이미지가 있으면 문제 파악에 도움이 됩니다.
문의는 오픈채팅, 방명록 등 안내된 경로로 부탁드립니다.
💜
!Read Me!
영, YOUNG英 스킨 구매 가이드
닫기
구매 전 꼭 읽어주세요꒰╬•᷅д•᷄╬꒱!!♡
제가 좋아하는 분위기를 담아 티스토리 스킨을 제작합니다 ꒰⁎' - ' ꒱♡
이미지 많이 넣기, 이것저것 자유롭게 모아두는 구성, 레트로&빈티지, 보라색
그리고 최애인 고죠 덕질을 할 때 어떤게 들어가면 좋을지 고민하며 구상하는 편입니다(ദ്ദിㆁᴗㆁ♥)
일상과 덕질 위주의 기록용이라 (거의 덕질…😌)
기능보다는 디자인 중심으로 제작하고 있습니다 ヽ( ຶ▮ ຶ)ノ!!!
앞으로 덕질 이외에도 일상, 기록, 가독성과 맞춤형 등 다양한 스타일의 스킨을 제작하려고 합니다✨
스킨 오류나 수정 문의는 사용 중인 스킨 본문 댓글, 방명록, 오픈채팅 중 편한 곳에 남겨주세요 ( · ❛ ֊ ❛)♥
스킨 번호와 문의 내용을 함께 적어주시면 더 빠르게 확인이 가능합니다.
오픈채팅이 가장 빠르고 정확하며, 댓글 및 방명록은 확인 후 답변까지 1~3일 정도 소요될 수 있습니다(⩌⩊⩌)♥
또한 스킨에 "이런 기능이 있으면 좋겠다!" 하는 아이디어도 언제든 환영이니 방명록이나 에스크로 편하게
남겨주세오 (⑉´•˶˶̫˶ •`⑉)♡
스킨 기본
지원 환경
PC, 모바일(반응형) 지원
커스터 마이징
스킨 편집하기에서 포인트 색상 및 이미지 수정 가능
홈커버, 게시판
다양한 홈커버와 게시판 구성을 사용할 수 있습니다
업데이트 지원
지속적인 기능 추가 및 업데이트 제공
지원 환경
모든 스킨은 PC 및 모바일(반응형) 환경을 지원합니다.
커스터마이징
대부분의 색상 및 이미지는 스킨 편집하기에서 수정 가능합니다.
일부 항목은 HTML에서 직접 수정이 필요합니다.
각 스킨별 HTML 수정 방법은 스킨 본문에 안내되어 있으며, 문의 시 추가 안내 가능합니다.