Lovely Pink 스킨 2.1.0 업데이트

스킨 소개 먼저, 글꼴을 인피니티산스와 가나초코로 변경했습니다. 기본적으로 인피니티산스를 사용하고, 제목에 가나초코를 사용합니다. 또한, 썸네일이 조금 덜 각지게 표시되게 업데이트했고, 슬라이더의 디자인을 조금 다듬었습니다. 드로어를 여는 버튼에 커서를 올리면 화살표로 변하는 애니메이션을 추가하고, 카테고리 상단에 구분 선을 추가했습니다. 하위 카테고리 목록에도 배경을 추가해 구분이 뚜렷하여지게 했습니다. 댓글 / 방명록을 입력하는 부분의 여백을 통일감 있게 수정했습니다....

3년 전

티스토리에서 Lazy Load 사용하기

Lazy Load(레이지 로드)란? 오프스크린 이미지(사용자가 보고 있는 화면에 보이지 않는 이미지)를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로딩하는 기술입니다. 완벽하게 작동하기 위해선 서버사이드에서 이미지의 경로를 삽입하지 않거나, loading="lazy"란 옵션을 줘야 하기 때문에, 티스토리에선 완벽하게 작동하기 힘듭니다. 투명 이미지 업로드 이미지에 오류가 발생하면 티스토리에서 위 이미지를 집어넣습니다.굳이 로딩하지 않아도 될...

5년 전

[티스토리] 태그로 글 가져오기

위 사진처럼 같은 태그를 가진 글을 불러오는 스크립트입니다. 워드프레스에선 꽤 간단하게 되는데, 티스토리엔 그런 기능이 없어 아쉬워서 만들어봤습니다. 1. Array를 반환하는 버전 async function getPostsByTag({ tag, selector, title, date, desc, thumbnail }) {     const tagArray = await Promise.all(         tag.map((tagString) =>             getPosts({    ...

5년 전

[티스토리] 인기글인지 확인하기

위 사진처럼 카테고리 글 목록, 검색 결과 등 글 목록이 표시되는 모든 부분에서 해당 글이 인기 글인지 확인할 수 있도록 하는 스크립트입니다. 응용하시면 본문에서도 활용 가능합니다. <s_sidebar_element> <!-- 이 블로그 인기글 --> <div class="popularPost"> <h3>이 블로그 인기글 </h3> <ul> <s_rctps_popular_rep> <li> <a href="[##_rctps_rep_link_##]" class="ImSoHot">[##_rctps_rep_title_##]</a> <span class="cnt">[##_rctps_rep_rp_cnt_##]</span> <s_rctps_rep_thumbnail> <img src="[##_rctps_rep_thumbnail_##]"/> </s_rctps_rep_thumbnail> <a href="[##_rctps_rep_category_link_##]">[##_rctps_rep_category_##]</a> </li> </s_rctps_popular_rep> </ul>...

5년 전