[Tistory] 티스토리 게시글에 인스타그램 피드 공유하기 [Tistory 게시글에 Instagram 게시물 삽입하기]
·
◐ 기타/블로그 꾸미기🎀
- 티스토리에 인스타그램 게시물 공유하기 티스토리 블로그에 인스타그램 게시물을 아래처럼 공유할 수 있다. 1. 인스타그램 게시물 소스코드 복사 2. 티스토리 게시글에 인스타그램 소스코드 추가 게시글 작성 완료를 누르면 아래와 같이 피드가 추가된다. Instagram에서 이 게시물 보기 어디가, 박대리!(@recycle.battery)님의 공유 게시물 - 참고자료 티스토리 블로그에 인스타그램 공유하기(피드 삽입하는 법) 필자가 이 블로그에 쓴 글 '윤스테이 촬영장소 구례 쌍산재 (인근 추천 여행지 포함)'을 보면 윤스테이 촬영지 쌍산재의 공식 인스타그램을 플러그인 처럼 본문에 삽입했다. 인스타그램을 내용 blog.hangyeong.com
[Tistory] 티스토리 게시글 번호 확인하기 [포스트 URL 문자로 했을 때 숫자 주소 확인하는 방법]
·
◐ 기타/블로그 꾸미기🎀
- 티스토리 게시글 번호 확인하기 게시글 주소를 문자로 해놓으면 검색엔진에 좋다고 하여 문자로 해놓는 경우가 많다. 그러나 문자로 하게 되었을 경우, 주소를 공유할 때 너무 길어진다는 단점이 있다. - 숫자 URL / 해당 게시글의 게시글 번호 https://yermi.tistory.com/629 - 문자 URL (위와 같은 URL) https://yermi.tistory.com/entry/Spring-Batch%EC%99%80-Scheduler%EC%9D%98-%EC%B0%A8%EC%9D%B4-Spring-Scheduler-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95 게시글 번호를 알 수 있는 방법은 없을까? 1. 통계로 들어가서 확인하기 2. 페이지 소스에서 확인하기
[Tistory] highlight.js 사용하여 코드블럭 테마 적용하기 [티스토리 코드블럭 테마 적용]
·
◐ 기타/블로그 꾸미기🎀
- highlight.js 사용하여 코드블럭 테마 적용하기 티스토리 코드블럭의 테마를 설정해보려고 한다. 코드라인 넘버를 위해 highlight.js를 사용할 예정. → 라인넘버 안할 거라면, 플러그인에 있는 '코드 문법 강조(Syntax Highlight)'를 사용해도 된다. Getting highlight.js Hosted A prebuilt version of highlight.js with 36 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other ava..
[Tistory] 이미지 클릭 시, 모달 창으로 이미지 보여주기 [티스토리 Lightbox 적용 안될 때]
·
◐ 기타/블로그 꾸미기🎀
- 이미지 클릭 시, 모달 창으로 이미지 보여주기 어떤 이유인지 티스토리 라이트박스가 적용이 안되어 대체 방식을 찾았다. → 모달 창을 만들어 이미지를 띄우고자 한다. HTML의 body 태그 안에 아래 코드들을 추가해준다. - HTML - JavaScript $(function(){ // 이미지 클릭시 해당 이미지 모달 $("span img").click(function(){ let img = new Image(); img.src = $(this).attr("src") $('.modalBox').html(img); $(".modal").show(); }); // 모달 클릭할때 이미지 닫음 $(".modal").click(function (e) { $(".modal").toggle(); }); }); C..
[Tistory] 다중 이미지(이미지 슬라이드, 콜라주 등) 본문 폭에 맞추기 [HELLO 스킨 게시글 이미지 리사이징하기]
·
◐ 기타/블로그 꾸미기🎀
- 다중 이미지(이미지 슬라이드, 콜라주 등) 본문 폭에 맞추기지난 게시글들을 둘러보다가, 리사이징이 풀린 이미지를 보게 되었다. 태그를 분석해보니 아래와 같았다. 인라인 스타일이 강하게 먹혀 있던 것!자바스크립트나 제이쿼리 등으로 처리해보려 했는데 실패하고..눈에는 눈, 이에는 이니까 CSS를 건드리기로 했다./* 최신버전(4.10.3) */figure.imageblock.alignCenter { width: 100% !important;}/* 구버전 */figure.imagegridblock { width: 100% !important; margin-left: auto !important;}- HELLO 스킨 개발자의 의도 수평으로 이미지 2개 있을 때, 본문 영역을 벗어나는 현상 · Issue ..