게시글마다 자유롭게 적용하기
티스토리 블로그 글을 작성하고나면 여기에 분위기를 더할 배경음악을 적용하고싶은 생각이 문득 들때가 있었습니다. 찾아보니 간단하게 적용하는방법이 있어서 이렇게 소개해 드리니 저와 같이 게시글에 음악을 적용하고싶은 분들은 따라해보시길 추천드립니다.
배경음악 적용하는 방법
1. 가장 먼저 해야하는 일은 mp3파일을 다운로드 받아서 티스토리에 올리는 일입니다. 저작권에서 자유로운 음악파일을 사용해야 후에 뒷탈이 없으니 주의하시고 무료로 저작권에 관계없이 사용가능한 곳은 여러사이트가 있지만 저는 픽사베이라는 무료사이트를 이용해서 다운로드 받아보겠습니다.
2. 위의 주소로 접속하여 내 맘에 드는 음악을 선택해보세요. 검색창에 검색어를 입력하면 그에 맞는 음악들이 리스트로 쭉 나열됩니다. 미리듣기로 들어보고 맘에 든다면 오른쪽에 다운로드 버튼을 눌러 다운로드 받으시면 됩니다. 픽사베이의 모든 자료는 별도로 저작권에 대한 명시없이 자유롭게 사용해도 되니 안심하고 사용하세요.
3. 저는 크리스마스 음악을 다운로드 받았습니다.
4. 이제 mp3파일을 티스토리에 올려야하는데 게시글로 올리기에는 뭐해서 저는 페이지를 하나 만들어서 여기에 파일첨부로 mp3파일을 올리겠습니다.
5. 음악mp3파일을 첨부하니 아래와 같이 문구가 뜨네요. 언제부터 이렇게 변하였는지는 모르겠는데 사용하는데는 지장이 없습니다. 저 문구는 잠시후에 사라집니다.
6. 음악파일의 다운로드 ↓ 버튼에 마우스 오른클릭하고 링크주소복사를 눌러주세요.
7. 이제 링크주소와 배경음악을 넣는 소스코드를 조합하여 게시글에 배경음악을 삽입할 수 있습니다. 아래의 소스코드중 파일링크주소위치에 mp3파일 링크주소를 넣어서 적용해주세요.
클릭하면 재생
<p><audio controls="controls"> <source src="파일링크주소" type="audio/mp3" /> </audio></p>
자동 재생
<p><audio autoplay="autoplay" controls="controls"> <source src="파일링크주소" type="audio/mp3" /> </audio></p>
반복자동재생
<p><audio autoplay="autoplay" loop="loop" controls="controls"> <source src="파일링크주소" type="audio/mp3" /> </audio></p>
위의 3가지 유형중에 원하는 형태의 소스코드를 복사해서 게시글에 삽입하시면 됩니다. 게시글을 작성하고 html모드로 변경하신 후에 위의 복사한 소스코드를 적당한 위치에 적용시켜주세요.
확인해보기
위의 순서대로 게시글에 배경음악을 적용하면 어떤 형태로 재생이 되는지 확인해보세요. 순서는 풀어쓰느라 길어보이지만 간단하게 적용할 수 있으니 여러분도 도전해보세요.
아래는 제가 적용해본 배경음악 게시글입니다.
2022.12.08 - [부업해보기/쇼핑앤리뷰] - 아동용 어린이 겨울장갑의 예쁜디자인만 골라 추천드려요
참고하세요
· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 다양한 어필리에이트 활동으로 수익금을 지급받을 수 있는 링크가 있습니다.
· 이 글은 티스토리블로그 카테고리에 위치하고 있습니다. 비슷한글을 보시려면 아래를 확인하세요.
▼ 여기 아래 ♥공감버튼 눌러주실거죠?
'블로그정보' 카테고리의 다른 글
워드프레스 백업 플러그인 All-in-One WP Migration (0) | 2023.01.02 |
---|---|
티스토리 블로그에 핀터레스트 핀달아 유입늘리기 (3) | 2022.12.29 |
내 블로그주소창에 뒤에 나오는 #gsc.tab=0의 정체와 삭제방법 (0) | 2022.12.14 |
티스토리 블로그 본문제목과 날짜 사이 여백 맞추기 (3) | 2022.12.12 |
티스토리블로그 귀찮은 2단계인증 해제하기 (1) | 2022.11.24 |
구글맞춤검색을 내 블로그에 삽입해보자. (6) | 2022.11.14 |
워드프레스 깔끔하고 친근한 블로그 테마 - BlogDesign Pro (5) | 2022.11.08 |
블로그의 글자수 세기 간편하게 할 수 있는 크롬 확장프로그램 소개 (5) | 2022.11.03 |
댓글