M 모바일 스킨 수정 불가능한 문제에 대한 대처 방안과 주의사항

티스토리 모바일 스킨

티스토리 블로그는 운영자가 자유롭게 디자인을 변경할 수 있는 점이 큰 장점입니다. 과거에는 홈페이지 제작시 비용이 많이 들었지만, 티스토리 블로그는 무료로 홈페이지 수준의 수정이 가능했기 때문에 매력적이었습니다. 현재는 다른 블로그들도 수정 가능하지만 제한이 많아 비슷한 디자인이 되곤 합니다. 그러나 티스토리는 운영자의 의도에 맞게 전혀 다른 디자인으로 변경할 수 있습니다..

타사 블로그에 대비하여 티스토리 블로그의 가장 큰 장점은 티스토리 블로그 운영자가 자신이 사용하는 블로그를 마음대로 변경할 수 있는 것이었습니다. 과거에는 홈페이지를 제작하려면 많은 비용이 들었고, 블로그를 홈페이지 수준으로 자유롭게 수정하고 운영자의 의도에 맞게 만들 수 있는 것은 매우 매력적이었습니다.

지금은 홈페이지가 보편화되고 블로그의 디자인도 수준이 좋아져서 굳이 수정하지 않아도 충분히 사용할 수 있는 수준으로 제작되어 나오지만, 과거에는 직접 제작하기 어렵고 좋은 퀼리티의 홈페이지를 만들기 위해서는 많은 비용이 들어갔습니다. 그런 시절에 티스토리 블로그는 상당히 매력적인 요소였습니다.

티스토리 모바일 스킨 수정방법

현재는 티스토리 블로그 만큼 다른 블로그들도 어느 정도 수정이 가능하지만, 제한이 많아 아무리 수정해도 비슷비슷한 디자인만 가능합니다. 그러나 티스토리 블로그는 운영자의 의도에 따라 얼마든지 전혀 다른 디자인으로 변경할 수 있습니다.

그러나 티스토리 블로그에도 변경할 수 없는 스킨도 있습니다. M URL로 접속할 경우 보여지는 모바일 버전의 스킨이 그 예입니다. 이 티스토리 모바일 스킨은 일반 사용자에게 코드를 개방하지 않기 때문에, 사용자가 원하는대로 수정할 수 없습니다.

티스토리 모바일 버전

수정을 하려고 하면 전혀 불가능한 것은 아니지만, 티스토리 정책상 변경하게 되면 문제가 발생할 소지가 있어 변경할 수 있어도 변경하지 않는 것을 권해 드립니다. 그리고 변경하더라도 운영자의 영역만 변경해야 하며, 그 외 다른 부분은 변경하지 않는 것이 좋습니다.

공개하지 않았다는 것은 변경하지 말라는 것으로 이해하면 맞는 판단 같습니다.

운영자의 영역은 글 작성 페이지입니다.

글 작성 페이지를 이용해서 간단하고 필요한 부분은 수정이 가능합니다. 아래는 수정하는 코드입니다.

티스토리 모바일 접속 시에만 실행되도록 코드를 작성해서 변경하고자 하는 부분의 코드를 mobile.css로 작성해서 페이지가 로드되면 원하는 스타일을 적용하는 방법입니다. 직접 수정을 할 수 없기 때문에 이 코드는 웹 페이지가 로드될 때,

즉 DOMContentLoaded 이벤트가 발생했을 때 특정 조건을 만족하면 스타일 시트를 동적으로 추가하는 JavaScript 코드입니다. 이런 방식으로 간단하게 일부 수정된 디자인의 효과를 볼 수 있습니다.

아래 코드를 수정 글 페이지 제일 하단에 입력하시면 티스토리 모바일 접속시 수정된 효과를 보실수 있습니다.

<div id="external-content"></div>

<script async>
    document.addEventListener("DOMContentLoaded", function() {
        if (window.location.href.startsWith("https://티스토리 주소/m/") || window.location.href.startsWith("http://openipc.kr/m/")) {
            var link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'https://수정할 css경로.css';
            document.head.appendChild(link);
        }
    });
    </script>

티스토리 반응형 스킨