티스토리 BGM 넣기 (feat.스킨 수정)

1. 준비물

• 본인이 마음에 드는 mp3 파일 링크를 활용하는 플레이어 소스코드를 구함
  • 필자는 아래 링크의 코드를 수정하여 이용함

Music Player | Audio Player 🎵

 

2. 스킨 수정

• 티스토리 스킨 수정 메뉴로 들어가서 필요한 부분을 수행
• 필자는 아래의 과정을 수행함

2.1.  (스킨 등록) index.xml 파일 수정

• 필자가 사용중인 TriplexLab 스킨에 미넴 스킨의 코드를 참조하여 BGM과 관련된 정보를 저장하기 위한 치환자를 등록함

TriplexLab SKIN(v1.2)

미리 알았다면 좋았을 텐데

• 치환자를 등록하면, 코드 레벨이 아닌 스킨 수정 메뉴에서 바로 BGM의 정보를 등록할 수 있음

2.2. (스킨 편집) HTML편집

• 플레이어의 html 코드와 javascript 코드를 등록한 치환자를 이용하여 수정한 뒤, 적당한 부분에 추가
  • 치환자를 이용하여 기존 코드에 절대값으로 되어있는 BGM에 관한 정보를 대체 
  • 티스토리의 GitBook 링크의 치환자 사용법을 참조하였음

스킨 옵션 · GitBook

2.3. (스킨 편집) CSS 편집

• 본인이 배치하고자 하는 영역에 맞게 디자인을 수정한 css 코드를 추가

 

3. BGM 파일 등록

• 본인이 들려주고 싶은 음악 파일을 외부 링크로 접속 가능한 곳에 업로드하여 이용
  • 필자는 아래 링크를 참조하여 티스토리 블로그의 비공개 게시물을 이용하였음

(티스토리) 미넴스킨 - BGM 넣는 방법 및 스킨을 업데이트해도 스킨 설정 유지하는 방법!

 

4. 저작권 걱정 없는 음원 사이트 추천

• 클래식

음원