728x90 반응형 진둥이의 하루202 [티스토리 꿀팁] 본문 이미지 테두리(그림자) 효과 넣는 방법 티스토리 본문 사진 테두리 효과 이미지 그림자효과 글과 이미지 분리하기 꿀팁을 쓰다보니까 캡쳐가 많아졌어요. 이미지를 삽입하여 보다 이해력을 높이기 위해 사용하곤 하는데, 제가 직접 찍는 사진과는 다르게 흰색 배경에서는 캡쳐본이 글과 혼동되는 경우가 있더라구요. 글과 이미지가 섞여 글이 어수선해보이기 때문에 이미지에 테두리를 추가하여 가독성을 더 높일 수 있도록 수정해봤어요. 수정 전에는 확실히 본문 글 바로 아래에 이미지가 들어가기때문에 띄어쓰기를 한다해도 글이 좀 조잡해보여요. 이미지 테두리 적용하기 (북클럽스킨) 이번에도 블로그 관리 메뉴 > 스킨 편집 > HTML 편집 > CSS 로 들어가주세요. 삽입 위치는 아무데나 상관 없기때문에 저는 맨 하단에 입력했어요. 마찬가지로 어떤 코드인지 구분하기 .. 2023. 2. 12. [티스토리 꿀팁] 본문 상단 스크롤바(진행바) 넣는 방법 티스토리 본문 상단 진행바 넣기 스크롤바 삽입 본문에 프로그레스바 상단 삽입 방법 요즘 티스토리 스킨을 편집하면서 블로그꾸미기에 한창 재미를 붙인 진둥이입니다 (블꾸블꾸 👀) 블로그 초반 글 과는 다르게 효과가 점점 늘어가고 있는데요. 오늘은 페이지 진행바 라고 해서, 영상이 재생될 때 위치를 표시하는 것처럼 블로그 글에도 표시를 할 수가 있습니다. 자바스크립트를 활용하여 상단에도 진행바를 삽입할 수가 있어요. 이런 효과를 넣게되면 영상 재생처럼 어느정도 글을 읽었는지 확인이 가능하기때문에 나름 편리한 기능이예요. (지저분하다 생각하시면 스킵하시면 됩니다.) 블로그 관리 메뉴 > 스킨편집 > HTML 편집 HTML 에서 사이에 아무데나 삽입하시면 됩니다. 애드센스랑 이것저것 많이 해봐서 아시죠? 코드정보.. 2023. 2. 11. [티스토리 꿀팁] 구독버튼 만들어서 본문에 추가하기 (서식추가) 티스토리 나만의 구독이미지 본문 구독버튼 본문에 구독바로가기 삽입 오늘의 티스토리 꿀팁은, 구독버튼을 만들어서 본문에 삽입하는 꿀팁을 알려드릴게요. 우선, 블로그내에서 구독버튼을 설정 안하신 분들을 위해 구독설정을 해주세요. 티스토리 구독버튼 설정 볼로그관리 꾸미기 > 메뉴바/구독설정 구독버튼 설정 메뉴에서 구독버튼을 표시합니다 로 변경해주시고, 구독버튼 위치는 임의 선택하신 후 변경사항 저장해주세요. 여기까지 하시면 기본적으로 구독버튼과 메뉴바가 생겨요. ( 단, 본인 계정으로 로그인 시 보이지 않으으로 로그아웃 한 후에 확인해보세요 ) 나만의 구독버튼 만들기 파비콘도 만들어봤으니까 이제 나만의 구독버튼을 디자인해서 본문에 삽입하여 구독자의 눈길을 끌어봅시다. 사실 이미지를 디자인 하는 게 오래걸릴 뿐.. 2023. 2. 10. [티스토리 꿀팁] 형광펜 밑줄 효과로 글의 가독성 높이기 티스토리 본문 형광펜 밑줄효과 형광펜 밑줄효과 글의 가독성을 높여보기 티스토리에서 글자 밑줄을 넣으면 아주 얇은 검정색 밑줄만 들어가게 기본설정이 들어가있어요. 이걸 형광펜 효과를 줘서 좀 더 가독성을 높여볼게요. CSS 아래 코드 적용 블로그관리의 스킨편집 > HTML 편집 > CSS 에 들어가주세요. 맨 아래로 가서 아래와 같은 코드를 입력해주세요. 저는 코드만 입력하지는 않고, 어떤 효과인지 '무효화 태그'를 써서 알아보는 편이예요. /* 형광펜 밑줄 효과 시작 */ u { text-decoration: none; display: inline; box-shadow: inset 0 -7px 0 #F9F19D; color: #000000; } /* 형광펜 밑줄 효과 끝 */ ✅ 굵기, 색상 변경 방법 .. 2023. 2. 9. [티스토리 꿀팁] 무료글꼴(웹폰트) 변경 & HTML 컬러코드 찾아보기 폰트 변경 & HTML 컬러코드 티스토리 꾸미기 블로그 본문 가독성 높이기 2탄 티스토리 블로그꾸미기 제 3탄 ! 이번에는 서식을 한다해도 글꼴이나 컬러코드를 알고있어야 원하는대로 꾸밀 수가 있어요. 그래서 준비한 무료 폰트 사이트와 컬러코드를 확인하는 곳을 알려드리려고 합니다. 글꼴(폰트) 변경하기 1. 웹폰트 무료사이트 추천 (눈누) URL : 눈누 (noonnu.cc) 눈누 상업용 무료한글폰트 사이트 noonnu.cc 위 사이트에서 마음에 드는 폰트를 골라봅니다 저는 또박또박하고 동글한 글씨체를 좋아해서 '티웨이항공체' 를 선택했어요. 우측에 웹폰트로 사용 에서 복사아이콘을 클릭해주세요. 사용하시기 전에 해당 폰트가 상업적으로도 사용 가능한 폰트인지 라이선스 한번 더 확인해보세요. 2. 티스토리에 .. 2023. 2. 8. [티스토리 꿀팁] 본문&타이틀 간격 조정하여 가독성 높이기 (북클럽스킨) 티스토리 본문&타이틀 간격조정 본문 서식 수정 가독성을 높여보기 티스토리는 네이버블로그와의 다르게 HTML 형식으로 마음껏 변환이 가능해요. 하지만 어렵죠.. 맞아요. 저도 전문가가 아니기때문에 여러방면으로 소개해드리는 건 어렵지만, 가장 기본적으로 가독성을 높이기 위한 본문 타이틀(제목) 배치와 줄간격을 수정 꿀팁 알려드릴게요. 1. 타이틀 수정하기 타이틀 배경 간격 줄이기 블로그관리 → 꾸미기(스킨편집) → html편집 → CSS Ctrl+F 로 글자를 검색해주세요. "post-cover" (줄번호 1046번) 수정 : height : 340px; → 220px; ✅ 이렇게 하고 우측 상단에 적용버튼 클릭 ! - 페이지 들어가보면 뒷배경이 짧아졌어요. 근데 윗쪽으로 글자가 쏠려서 보기 안좋으니까, 여.. 2023. 2. 7. 이전 1 ··· 9 10 11 12 13 14 15 ··· 34 다음 728x90 반응형
