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

티스토리 미넴 스킨 2.7.0 업데이트 - 댓글 이미지 첨부 기능

아미넴 2022. 5. 22.
반응형

안녕하세요.

 

댓글에 이미지를 첨부할 수 있는 기능을 추가하였습니다. 나름 효용이 큰 기능이라고 생각하여 버전을 2.7.x대로 올렸습니다.

 

(긴급 수정)

로딩 이미지 미사용 시 스크롤이 되지 않는 문제가 있어서 긴급 수정하여 반영하였습니다. 파일 다시 올려놓았으니 참고 바랍니다.

스킨 전체 적용을 다시 하기 어려우신 분은 관리자 페이지의 스킨 편집 > html 탭에서 <div id="wrapper"> 부분을 찾아 <div id="wrapper" <s_not_var_loading-screen>class="loaded"</s_not_var_loading-screen>>로 바꿔 주시면 됩니다.

 

목차

     

     

    개선 사항

    1. 댓글 이미지 첨부 기능을 추가하였습니다.

    2. 댓글을 최신순으로 정렬하였습니다.

    3. 구글 애드센스 일치하는 광고 명칭을 멀티플렉스 광고로 변경하였습니다.

    4. 스킨 기본 색상을 취향을 덜 타는 회색 계열로 변경하였습니다.

    5. 기타 자잘한 문제점을 개선하였습니다.

     

    상세 설명

    판단에 도움을 드리기 위해 개선된 부분에 대한 설명을 간단히 해드리겠습니다.

     

    댓글 이미지 첨부 기능 추가

    imgur.com API를 활용하여 댓글에 이미지를 추가할 수 있는 기능을 추가하였습니다. 즉시 적용할 수 있는 사항은 아니니 다음 글을 참고하여 차분히 적용해 보시기 바랍니다.

     

    imgur.com 이미지 업로드 API 사용 방법

     

    imgur.com 이미지 업로드 API 사용 방법

    imgur.com에서 제공하는 API를 사용하면 내가 운영하는 블로그나 웹 사이트에 무료로 이미지를 첨부할 수 있는 기능을 만들 수 있습니다. 미넴 스킨 최신 버전에서 댓글 이미지 업로드 기능을 사용

    sangminem.tistory.com

     

    꾸미기 > 스킨 편집 메뉴의 유용한 기능 부분에서 다음과 같이 사용 여부와 client-id 값을 설정할 수 있습니다.

     

    다음과 같이 이미지 첨부 버튼이 생긴 것을 알 수 있습니다.

     

    이미지 업로드가 성공하면 다음과 같이 이미지 링크가 댓글에 자동으로 입력이 됩니다. 클립보드에도 복사가 되므로 대댓글 작성 시에도 붙여넣기 하여 첨부가 가능합니다.

     

    등록을 누르면 댓글에 이미지가 잘 표시됩니다.

     

    댓글 최신순 정렬

    다음과 같이 가장 최근에 작성한 댓글이 맨 위에 보이게 되어 좀 더 빠르게 확인할 수 있습니다.

     

    일치하는 광고 명칭 변경

    최근 일치하는 광고가 멀티플렉스 광고로 변경되어 다음과 같이 설정 부분의 명칭들을 변경하였습니다.

     

    기본 색상 변경

    스킨 기본 색상을 회색 계열로 변경하였습니다.

     

    소개 및 설치 방법

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

     

    티스토리 무료 최강 미넴 스킨 소개 및 설치 방법

     

    티스토리 무료 최강 미넴 스킨 소개 및 설치 방법

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

    sangminem.tistory.com

     

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

     

    궁금한 점이 있으시면 자주 묻는 질문 게시물 먼저 확인 바랍니다.

     

    미넴 스킨 자주 묻는 질문(FAQ)

     

    미넴 스킨 자주 묻는 질문(FAQ)

    미넴 스킨 게시물에 대부분 설명이 나와 있지만 내용이 많아서 찾기 어렵거나 빨리 훑어 보고 싶으신 분들을 위해 작성하였습니다. 지속적으로 추가해 나가도록 하겠습니다. 목차 사이드바 기

    sangminem.tistory.com

     

    미넴 스킨 2.7.0 버전 다운로드

    Mynem Skin V2.7.0.zip
    2.17MB

     

    카카오 뷰에서 소식 받아 보기

    카카오 뷰에서 미리 알았다면 좋았을 텐데 채널을 추가하시면 좀 더 빠르게 업데이트 소식을 받아 보실 수 있습니다.

     

    그 외에 코딩, 게임, 유머 등의 콘텐츠도 수시로 업데이트 되므로 많은 관심 부탁드립니다.

     

    카카오 뷰 - 미리 알았다면 좋았을 텐데 채널

     

    미리 알았다면 좋았을 텐데

    책 소개 코딩/게임/유머

    pf.kakao.com

     

    반응형
    그리드형(광고전용)

    댓글35

    • TIMOTAE 2022.05.23 08:59 신고

      항상 감사합니다!
      답글

    • ▨A포스터▨ 2022.05.24 03:30 신고

      감사히 잘 쓰고 있습니당~! 차세대 스킨 미넴스킨~
      답글

    • skiolar 2022.05.24 15:26 신고

      이제 막 블로그를 시작해보려는 초보인데요.
      폰트를 제가 원하는 폰트로 바꾸어 보고싶은데, 구글링을 통해서 얻은 얄팍한 지식으로는 바꿀수가 없더군요.
      눈누 같은 곳에 이쁜 폰트가 많던데
      구조상 폰트를 바꾸기가 어려운건가요?
      답글

    • 안녕하세요. 2.7.0 스킨으로 업데이트 후 블로그 로딩 화면 사용 '안함'으로 변경하면 블로그 홈 화면 스크롤이 고정되어 목록 윗부분만 보이는 문제가 확인됐습니다. 해당 부분 확인 부탁드립니다!
      답글

    • 쏘네. 2022.05.26 23:19 신고

      티스토리 너무어려워서 스트레스 받고있었는데ㅜ 정말 감사합니다! 잘 쓸게요~!!
      답글

    • Papojung 2022.05.28 16:54 신고

      와... 댓글에 이미지 첨부는 아무리 찾아도 안보이던데, 이걸 해내시네요 열정이 대단하십니다 👍
      테스트 겸 이미지 첨부 해봅니다
      https://i.imgur.com/U6KNajH.png
      답글

    • 안녕하세요 2022.06.02 15:30

      안녕하세요. 항상 감사하게 사용하고 있습니다. 다름이 아니라 갑자기 내부에 div로 삽입한 목차가 활성화가 안되어 문의드립니다.
      미넴 스킨을 잘 이용하고 있었는데 스킨 수정(색상 변경)정도만 하고 특별히 업데이트 변경한 것이 아닌데 자동 목차는 활성화가 되는데, 본문에 삽입한 자동목차는 활성화가 안됩니다.
      처음에는 제가 뭔가 잘못한 것 같아서 스킨을 새로 받아서 테스트용 블로그에 적용해보아도 같은 현상이 발생하여 미넴스킨에 문의를 드리려고 하는데요. 미넴스킨에서도 같은 현상이 발생하여 문의드립니다.
      https://i.imgur.com/NiKhV8d.png
      답글

      • 아미넴 2022.06.02 15:49 신고

        안녕하세요. 제보 감사합니다.
        이 정도 문제를 놓쳤을 리는 없을거 같고 잘 되던게 갑자기 안 되는거 같은데 티스토리측에서 공지도 없이 뭘 바꿨거나 공지가 있었는데 제가 못 본 걸수도 있겠네요.
        시간될 때 테스트 해보고 말씀드릴게요~

      • 안녕하세요 2022.06.02 16:38

        다시 확인해보니 고쳐졌습니다. 티스토리 문제인듯합니다!

      • 아미넴 2022.06.02 16:47 신고

        아네 다행이네요!

    • 퍼니즈 2022.06.04 12:18 신고

      기본적으로 다크모드가 되어있는데 해제 어케하나여 버튼이 안보이네여 음
      답글

      • 아미넴 2022.06.04 12:28 신고

        스킨 편집에 보면 다음 항목들이 있는데 원하는 설정으로 바꾸시면 됩니다.
        https://i.imgur.com/elrehI1.png

        테스트를 위해서는 시크릿(인프라이빗, 개인정보보호 등) 모드로 접속 바랍니다.

    • annaO 2022.06.05 16:14 신고

      안녕하세요 ! 스킨이 너무 맘에 들어서 오늘 적용했어요! 그런데 본문에 링크를 걸면 다른 글자와 다르게 밑줄이나 링크 표시가 안되는데 혹시 어떻게 변경할 수 있을까요? 감사합니다
      답글

      • 아미넴 2022.06.05 16:18 신고

        미넴 스킨 이용해 주셔서 감사합니다.
        a 태그의 속성을 바꾸시면 되는데 a태그는 많은 곳에 쓰였으므로 특정 부분에 한정하여 바꾸시는걸 추천드립니다. 예를 들어 다음과 같이 css를 추가하시면 됩니다.
        .content_article a {
        text-decoration: underline;
        text-decoration-color: red;
        }

    • LunaCell 2022.06.11 21:58 신고

      사이드바 일치하는 광고 개수도 따로 설정할 수 있게끔 지원되었으면 좋을 것 같습니다.

      추가적으로 애드센스측에서 코드를 또 수정했는지 구글 사이드바 일치하는 광고가 표시가 안되는 문제가 발생하고 있습니다.

      이 점도 검토가 필요할 것 같습니다.
      https://i.imgur.com/G75qjjZ.jpg
      답글

      • 아미넴 2022.06.12 00:37 신고

        말씀하신건 일반적인 현상이고 제가 아는 바로는 멀티플렉스 광고가 출력되는 영역의 크기 및 행과 열, 레이아웃 등의 속성 값 조정으로 최대 광고 수는 원하는 수준으로 맞출 수 있을지 모르겠으나 실제 출력되는 광고 개수 설정은 불가능합니다.

    • 힘센캥거루 2022.06.12 22:39 신고

      역시 혜자~ 너무 잘쓰고 있습니다! 감사합니다^^
      답글

    • 서근 2022.06.14 12:58 신고

      https://i.imgur.com/AiuLq0P.png

      혹시 이부분 수정하면 되는건가요?
      답글

      • 아미넴 2022.06.14 21:25 신고

        안녕하세요~ 네 그 부분 맞는거 같네요!

      • 서근 2022.06.15 03:52 신고

        감사합니다 미넴님! 이미지 첨부 기능이 marshallku님 스크립트로 했을때는 새로고침 되야 댓글에 이미지가 보여졌었는데 아미넴님이 짜신 스크립트로 적용하니 정상적으로 잘 작동되서 너무 좋네요 ㅎㅎ 플로팅 목자도 접히는거 너무 마음에 듭니다 ㅠㅠ 정말 감사합니다!

        이미지파일을 text-area에 drag&drop 하는 기능도 추가되면 정말 좋을꺼같아요 ><

      • 아미넴 2022.06.15 20:05 신고

        네 감사합니다~ 말씀하신 의견은 참고하도록 할게요!

    • 서근 2022.06.17 21:36 신고

      미넴님! lazyLoading의 querySelectorAll가 img로 설정 되있는걸, 포스팅 본문의 이미지만 .tt_article_useless_p_margin.contents_style img 이런식으로 해서 본문의 이미지가 로드 될때 loading.gif 파일 처럼 예외적으로 설정하려고 하는데 어떻게 설정해야하는지 혹시 도움좀 요청드려도 될까요?

      https://i.imgur.com/vL9jIFD.png
      답글

      • 아미넴 2022.06.18 23:22 신고

        말씀하신 내용은 빨간 박스 치신대로 하면 될 것 같은데.. 질문을 정확히 이해하지 못했습니다.

      • 서근 2022.06.19 01:04 신고

        본문 이미지 태그명이 .tt_article_useless_p_margin.contents_style img 인데, 본문에 있는 이미지만 #blank-img가 아닌 다른 이미지로 보여주게 하고,

        그외 나머지 img는 #blank-img로 opacity0 ➜ opacity1 처럼 그대로 사용하고 싶어서요!

      • 아미넴 2022.06.19 13:38 신고

        아네 해당 부분을 그대로 복사하여 대상을 나누고 두 번 적용하면 될 것 같습니다. 예를 들어 다음과 같이 구분할 수 있습니다.
        document.querySelectorAll('.content-wrapper img')
        document.querySelectorAll('img:not(.content-wrapper)')

    💲 추천 글