블로그에 포스팅을 하면서 우리는 사진 파일을 많이 첨부하게 됩니다. 제가 사용하고 있는 서비스 티스토리는 HTML과 CSS를 쉽게 수정하여 여러가지 디자인의 혁신을 이룰 수 있게 자유도를 맘껏 주는 좋은 서비스지요
그런 티스토리 블로그에 포스팅된 사진들을 보면 기본적으로 줄 간격이 없어도 막상 저장한 후 보면 사진이 글한줄정도씩 떨어져서 표시됩니다. 이 이미지의 간격을 줄이는 방법을 알려드릴께요
1. 티스토리 관리자 모드로 들어갑니다.
( 로그인 되있는 상태면 키보드의 Q를 누르면 바로 관리자 모드로 접속됩니다 ^^ )
2. 관리자 모드의 메뉴중 HTML/CSS 편집을 선택합니다
3. 키보드의 Ctrl 키를 누른 상태에서 F 키를 눌러 익스플로러의 검색창을 열고 , imageblock을 입력합니다. 아래의 화면의 초록색 화살표를 따라가면서 보이는 아래 화살표를 누르는 이유는 좀더 쾌적한 수정 환경을 위해서 입니다
4. 오른쪽 stye.css 수정 창에 노란색 형광펜으로 표시된 imageblock이 있는 줄에서 margin:5px 값을 원하는 크리고 수정하여 줍니다. 저는 margin:1px 로 수정했어요
수정 후 비교 사진
이상으로 Margin 값을 수정하여 티스토리 블로그에 포스팅된 이미지와 이미지의 간격 혹은 이미지 와 글의 간격을 조정하는 법을 마치도록 할께요 좀더 깔끔한 화면 구성으로 블로그에 오는 방문객들에게 좋은 이미지를 남겨주세요
댓글