미넴 스킨 제작 프로젝트/업데이트

티스토리 미넴 스킨 1.5 업데이트 - 배경음악 설정

아미넴 2021. 3. 20.
반응형

미넴 스킨 1.5 업데이트 내용은 다음과 같습니다.

 

목차

     

    개선 사항

    먼저 개선 사항 입니다.

     

    배경음악 설정 기능

    블로그에 배경음악을 넣고 싶은 분이 계실 것 같아서 만들어 보았습니다.

     

    사용 여부를 ON 하시면 배경음악 컨트롤러가 사이드바에 보여집니다. 또한 자동재생 여부를 ON 하시면 음악이 자동 재생되게 됩니다. 자동재생을 하더라도 최초 접속 시에만 자동재생을 하고 사용자가 일시정지 버튼을 눌렀을 경우에는 일시정지 상태가 계속 유지됩니다. 다만 브라우저에 따라 최초 사용자의 인터렉션(터치 또는 클릭)이 발생해야 플레이 되도록 정책을 가져가는 경우가 있습니다. 또한 사파리 등 일부 브라우저에서 페이지 이동 시 재생이 중단되는 현상이 있습니다. 브라우저 자체 정책이므로 해결이 어려운 점 참고 바랍니다. 페이지 프레임 자체를 나누어 재생이 끊기지 않도록 하는 방법도 있는데 추후에 시간되면 개선해 보도록 하겠습니다.

     

    사이드바에 보여지는 배경음악 재생 컨트롤러 입니다.

     

    음악을 등록하는 방법은 간단하지만 약간의 제약이 있습니다.

     

    일단 비공개 글을 하나 작성하고 다음과 같이 파일을 등록한 후 '링크 주소 복사'를 통해 URL 주소를 얻으실 수 있습니다.

     

    제약1. 대부분의 브라우저에서 CORS 정책에 따라 외부링크 사용 불가합니다. 블로그에 올린 파일만 가능합니다.

    제약2. 블로그 글에 파일 첨부로 올린 파일 링크는 사용가능이 하지만 스킨 편집 입력 칸에 100자가 넘어가면 URL 링크가 짤립니다. 파일명을 최대한 짧게하여 올리시는 것을 추천드립니다. 저같은 경우는 bgm1.mp3, bgm2.mp3 와 같은 형태로 올렸습니다. 그리고 https: 부분을 제외하고 //blog.kakaocdn.net/... 부터 입력하였더니 간당간당하게 적용 가능하였습니다. 굳이 100자가 넘는 URL을 사용하고 싶으신 분은 common.js 파일을 열어 코드에 음원 정보를 직접 넣으셔도 되고 약간의 꼼수를 이용할 수도 있습니다.

     

    스킨 편집 페이지에서 F12를 눌러 개발자 모드로 진입합니다. 그리고 좌측 상단에 있는 아이콘을 활성화 시킵니다.

     

    URL 입력창에 커서를 가져다 대고 클릭합니다.

     

    그럼 Elements 탭에서 해당 부분의 maxlength가 100이라고 되어있는 것을 볼 수 있는데 이 부분을 더블 클릭하여 100보다 큰수로 변경해 줍니다. 넉넉하게 1000 이상으로 해주시면 될 것 같습니다.

    다시 시도해 보면 100자보다 긴 URL도 입력이 가능한 것을 확인할 수 있습니다.

     

    주의) 음원 저작권 침해가 우려되시는 분은 사용하지 마시거나 무료 음원만 사용 부탁드립니다.

     

    목차 및 카테고리 글머리 설정 기능

    목차에 포함되는 제목1, 제목2, 제목3에 대한 글머리를 변경할 수 있습니다. 일반 문자부터 유니코드까지 모두 적용 가능합니다. 유니코드 적용 시 코드 앞에 역슬러시를 붙여주면 됩니다.

     

    사이드바에 있는 카테고리 글머리도 마찬가지로 변경할 수 있습니다.

     

    미넴 스킨에는 Font Awesome Free Font가 적용되어 있습니다. 다음 사이트에서 아이콘 유니코드 값을 확인할 수 있으니 참고 바랍니다.

     

    Font Awesome Free Icons

     

    Font Awesome

    The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

    fontawesome.com

     

    홈 그리드 옵션 추가

    이미지, 내용, 날짜 보이기 여부를 설정할 수 있고 제목, 내용의 최대 라인 수도 설정할 수 있게 하였습니다.

     

    내용을 안 보이게 했을 경우 입니다.

     

    이미지를 안 보이게 했을 경우 입니다. 제목 라인 수는 3, 내용 라인 수는 5로 설정하였습니다.

     

    테투리 적용

    테두리 스타일을 개별적으로 적용할 수 있도록 하였습니다.

     

    사이드바에 적용된 테두리 스타일 입니다.

     

    전체 컨텐츠 박스에 적용된 테두리 스타일 입니다.

     

    제목에 적용된 테두리 스타일 입니다.

     

    링크 미리보기 박스에 적용된 테두리 스타일 입니다.

     

    목차에 적용된 테두리 스타일 입니다.

     

    개별적으로 ON/OFF 할 수 있으니 취향에 맞게 적용하시면 될 것 같습니다.

     

    기타 수정 사항

    1. 본문 사진 확대 시 버튼이 작동하지 않는 현상을 수정하였습니다.

    2. 블로그 제목, 메뉴, 사이드바 글자색을 변경할 수 있도록 하였습니다.

    3. 목차 이동 시 본문이 완전히 로드되기 전일 수 있으므로 최대 3번 보정하게끔 수정하였습니다.

    4. 현재 글 위치를 목차 글머리에 체크 아이콘으로 나타냅니다. 

    5. 스크롤 스타일을 변경하였습니다.

    6. 그 외 자잘한 오류를 수정하였습니다.

     

    소개 및 설치 방법

    다음 게시물을 참고하여 설치 바랍니다.

     

    친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방법

     

    친효 스킨, 고래 스킨 뒤를 이을 티스토리 무료 스킨 제작 프로젝트, 미넴 스킨 소개 및 설치 방

    기본 제공 스킨을 나름대로 고쳐 쓰다가 만족하지 못하고 그냥 새로 만들었습니다. 여태까지 블로그를 하면서 적용한 많은 기능들을 대부분 포함하였으니 누군가에게는 상당히 유용한 스킨이

    sangminem.tistory.com

     

    업데이트 후 적용이 잘 안 되신다면 강제 새로고침을 해보세요. 단축키는 윈도우10 크롬 기준 Ctrl+Shift+R, 맥 크롬 기준 Command+Shift+R 입니다.

     

    미넴 스킨 1.5 버전 다운로드

    파일 제거 됨

    반응형

    댓글

    💲 추천 글