미넴 스킨 제작 프로젝트

티스토리 미넴 스킨 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 버전 다운로드

    파일 제거 됨

    BIG

    댓글11

    • <현재까지 알려진 문제점>
      1. macOS 및 iOS Safari 웹뷰 베이스 브라우저에서 목차 드래그가 정상적으로 되지 않음
      => 조치 완료
      2. 목차 글머리 체크박스가 본문 목차에 그대로 유지되는 현상
      => 조치 완료
      3. 모바일 사이드바 왼쪽 여백 조절
      => 조치 완료
      답글

    • Α+ 2021.03.20 13:37 신고

      완전 잘 쓸게요! 감사합니다! 수고하셨어요~
      답글

      • 방문해 주셔서 감사해요 ㅎㅎ
        오색채운님 스킨 적용하신거 보니 사이드바 타이틀 글자색이 좀 어두운거 같은데 혹시 글자색도 바꾸고 싶으시면 바꿀 수 있게 스킨 수정하여 올려 놨으니 다시 적용해 보시길 바랄게요 :)

      • Α+ 2021.03.20 14:47 신고

        아! 감사합니다!! 지금까지 젤 마음에 드는 스킨이에요!

    • 브로콜ㄹI 2021.03.20 20:41 신고

      저도 이런 스킨 하나 만들고 싶은데,, 역시 고수분들만 할 수 있는거겠죠?ㅠㅠ
      답글

      • 저도 다른쪽 개발 하다가 취미로 웹 언어는 한 지가 얼마 안 돼서 딱히 고수라고 하기엔 부족한 점이 많네요 ㅎㅎ

        기능 개발 위주로 하시려면 Javascript 공부를 좀 더 하시면 좋을거 같구요. 디자인에 신경쓰시려면 HTML, CSS에 좀 더 치중하시면 될거 같아요 :)
        저는 기능개발 위주이긴 합니다.

    • 브로콜ㄹI 2021.03.20 21:53 신고

      아하, 그러시군요! 어떻게 공부해야하는지 몰라서 손을 대지도 못하고 있는데,, 책이라도 구매해서 보면 좀 도움될까요? 전문적으로 하려는건 아니고 어디까지나 저의 블로그에 투자를 하기 위함임다 ㅋㅋ
      답글

      • 사람마다 공부하는 스타일이 달라서 어떻게 공부하라고는 말씀을 못드리겠네요 ㅎㅎ
        동영상 강의가 잘 맞는 지, 책이 잘 맞는 지, 인터넷 검색 자료로 공부하는 것이 맞는 지는 본인이 판단하셔야 할거 같구요.

        아까 말씀드린 대로 HTML 기본을 먼저 공부하시고 그 다음 기능 위주로 만들고 싶으시면 자바스크립트를, 꾸미는 위주로 하시려면 CSS 먼저 공부하시면 될거 같은데 비중을 어디에 더 많이 두느냐 차이만 있을 뿐 결국 나중엔 둘 다 보긴 해야 될거예요.

        참고로 저는 그냥 인터넷 찾아보면서 공부합니다 ^^;

    • 브로콜ㄹI 2021.03.21 00:10 신고

      아하 그렇군요-!! 꿀팁 감사합니당
      답글

    • 권두손 2021.03.22 08:06 신고

      진짜 깔끔한 스킨이네요! 번역이 되는 것도 마음에 들고 배치도 군더더기가 없어요! 만들어주신 스킨 적용해보고 궁금한 것 말씀드릴게요!🙏
      답글

    💲 추천 글