스크롤 top버튼 등..

top버튼 수정

(지금 사용 중인 프라치노 스킨의) footer에 고정된, 스크립트로 상단으로 이동하는 top버튼을 스크롤에 따라 움직이게 하려면,

/* skin.html */
<script type="text/javascript">
$(function(){
  $(".ft-right").hide();
  $(window).scroll(function(){
    if($(this).scrollTop() > 100){$(".ft-right").fadeIn();}
    else{$(".ft-right").fadeOut();}
  });
});
</script>

/* style.css */
#footer .ft-right {
display:none;
position:fixed;
top:-webkit-calc(100% - 29.5px);
top:-moz-calc(100% - 29.5px);
top:calc(100% - 29.5px);
z-index:99;
}

스크립트 출처 및 설명 :: #1 오른쪽 하단에 top버튼 넣기
..🤭 맘에 든다. 그런데 top 버튼의 위치를 맞게 기재한 건지는 모르겠다. ..

a링크 비활성화

/* style.css */
#tt-body-index .gh-text ul{.....pointer-events:none;}

출처 :: css로 a링크 비활성화 하기
cursor:default;는 빼든 넣든 별 영향이 없어서 그냥 뺐다.

미디어 쿼리를 body id로

일부분만 적용되게 해 봤는데 된다. 

/* style.css */
@media (min-width:680px){#tt-body-index p{font-size:1.0625em}}

왜 되지..? 암튼, 메모장처럼 쓰고 있는 공지사항/notice의 텍스트가 블로그 포스트 (#tt-body-page)의 글처럼 브라우저 크기에 따라 폰트 크기가 1em↔1.0625em 달라진다.

◆ 수정 >> 위처럼 했더니 블로그 첫 화면 커버의 갤러리형 텍스트들도 영향을 받길래 p class를 따로 줬다.역시.. 한번에 될 리가 없다. 😒

/* skin.html */
<p class="memologtext"> [ ##_notice_rep_summary_## ] </p>

/* style.css */
@media (min-width:680px){.memologtext {font-size:1.0625em}}

오픈소스 twemoji 적용

운영체계에 상관없이 같은 모양의 이모지를 블로그에서 볼 수 있다. (윈도우10에서 이모지를 쓰려면 윈도우 키와 마침표 .키를 같이 누르면 된다.)

/* skin.html */
<script src="//twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
<script>twemoji.parse(document.body);</script>

/* style.css */
img.emoji{height:1.2em;width:1.2em;margin:0.05em 0.1em;vertical-align:-0.2em;}

설명 및 출처 :: PC웹에서 twemoji로 이모티콘 이쁘게 보기
원소스 :: Emoji for everyone 😃

소스 수정

23.01.11 추가) maxcdn 종료로 인한 변경- 출처

/* skin.html */
<script src="https://cdn.jsdelivr.net/npm/twemoji@14.0.2/dist/twemoji.min.js"></script>
<script>
  twemoji.parse(document.body, { base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/' });
</script>

23.01.16 추가) 해결

/* skin.html */
<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
<script>
  twemoji.parse(document.body);
</script>

그 외,

방명록을 display:none; 처리했고, 댓글창도 가리고 이메일 주소를 블로그에 걸어놓으려고 했는데 이게 토글 형식으로 다른 선택자에 영향을 주는 부분이 생각보다 많은 게 느낌이 오더라. 이런 건 건들지 않는 게 상책이다.