웹 개발 알아두기/티스토리 (6) 썸네일형 리스트형 티스토리 다국어 블로그만들기 (Book Club 스킨) 북클럽 스킨을 활용하여 더블포스팅을 통해 다국어 블로그를 만드는 방법을 보겠습니다. 완성된 코드 영문으로 변경하기 코드 ▶ 영문 포스트 언어변경하기 버튼 ▶ 국문 포스트 ▶ 영문 포스트 작업구상 'Book Club' 스킨에서 영문으로 변경해야 하는 부분은 크게 타이틀과 상단 메뉴 포스트 제목과 카테고리 우측에 공지사항을 비롯한 메뉴들 마지막으로 풋터 문구들이 있더군요. 구현하기 카테고리 작업 먼저, 카테고리는 영문으로 된 카테고리를 만들고 해당 포스트를 해당 카테고리로 지정하면 되므로 카테고리를 국문 버전과 영문 버전 두 가지로 생성합니다. 블로그관리 -> 카테고리 관리 카테고리 작업을 완료하면 아래와 같이 설정된 카테고리 명으로 표시됩니다 텍스트 작업 기타 블로그 타이틀 등 텍스트는 영문 포스트에서 아.. 코드 클립보드에 복사하기 기술블로그인 만큼 코드가 많이 들어가는 데 일일이 복사하는 불편함을 덜고자 클립보드 복사기능을 추가하기로 하였습니다. 완성코드 구현하기 클립보드로 복사하는 기능은 추가설정이 필요 없고 구현이 가장 수월하다고 판단하여 자바스크립트에서 제공하는 내비게이터 객체를 사용하기로 하였습니다. 작동은 아래처럼 내비게이터 객체의 클립보드를 호출하고 원하는 텍스트를 저장하는 방법입니다. navigator.clipboard.writeText(copyText.value); 다음으로, 코드를 복사하기 위해 코드요소에 이벤트를 연결해야 하는데요. 코드요소와 코드 클래스를 통해 전체요소를 잡고 루프를 통해 구현하는 방식으로 결정하였습니다. 이벤트는 아이템을 개별복사하는 경우도 있으므로 클릭이 아닌 더블클릭 이벤트로 연결하고 co.. 티스토리 자연스러운 페이지 로딩 페이지를 이동하면서 요소들이 화면에 표시될 때 요소나 파일이 로딩되는 속도 차이 등의 이유로 아래와 같이 부자연스럽게 표시됩니다. 간단한 작업을 통해 화면을 자연스럽게 로딩하는 효과를 구현해 보겠습니다. 해당 코드는 티스토리의 모든 스킨에 적용가능할 뿐 아니라 거의 모든 웹 사이트에 적용가능합니다. 완성코드 /* Type Selector Reset */ body { /* other styles */ animation: smoothRendering 1s ease forwards; } @keyframes smoothRendering { from {opacity: 0;} to {opacity: 1;} } 구현하기 공통 스타일 추가 관리자 페이지에 보면 좌측에 '스킨편집'이라는 기능이 있는데요. 해당 메뉴를 선.. 티스토리 다국어 블로그만들기 (Poster 스킨) 완성된 코드 영문으로 변경하기 코드 ▶ 영문 포스트 공통 스타일 추가 ▶ 스킨 편집 (CSS) .category_list>li:nth-of-type(even) { display: none; } 언어변경하기 버튼 ▶ 국문 포스트 ▶ 영문 포스트 ※ 다국어 블로그 이동링크는 포스트마다 달라지기 때문에 아래처럼 포스트를 생성할 때마다 수동을 변경해 주어야 합니다. 배경 티스토리와 더불어 미디엄에서 같은 내용으로 영문 블로그를 같이 운영하던 중 점차 영문 쪽 블로그에 관리가 소홀해지는 것을 느꼈습니다. 이유는 플랫폼 기능차이에서 오는 형식의 차이로 한 플랫폼에서 작성한 블로그를 다른 플랫폼으로 옮길 때 형식의 수정이 필요하다는 점과 블로그의 수가 늘면서 어떤 포스트가 양쪽 모두에 업로드되었는지 추적이 힘들어졌기.. 티스토리 - 스타일링 완성된 공통스타일 코드 /* Custom Styles */ img { border-radius: 5px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3); margin: 10px 0 !important; } .entry-content p, span, a, td { font-size: 1.2rem !important; } .entry-content h1 { font-size: 1.8rem !important; } .entry-content h2 { font-size: 1.7rem !important; } .entry-content h3 { font-size: 1.6rem !important; } .entry-content h4 { font-size: 1.5rem !impo.. 티스토리 목차 링크 만들기 티스토리에서 글을 쓰다 목차가 필요해서 목차에 hyperlink를 다는 기능을 찾아보았습니다. 결론은 없더군요 ㅎㅎ 그래서 검색을 해 보니 결국 html블록을 통해 입력하는 형식으로 구현하길래 저도 한번 만들어 보았습니다. 방식은 가장 일반적인 목차를 태그를 사용하여 HTML블록에 지정하고 해당 섹션의 아이디와 연결하는 방법으로 구현하였는데요. 구현하기 먼저, 상단에 목차라는 글을 쓰고 아래 코드를 HTML 코드 블록에 삽입합니다. 미팅참석하기 화면공유하기 채팅하기 상대방이 공유한화면 크게보기 화면 레이아웃 바꾸기 전체화면 ※ HTML블록 찾기 그러면 저장된 글에서 아래와 같이 표시되는데요. 다음으로 해당 섹션을 id요소로 연결만 해 주면 됩니다. 주의할 점은 목차의 각 메뉴의 태그 href요소에 사용된.. 이전 1 다음
