IT & 기타/티스토리 210

티스토리 Book Club 스킨에서 댓글 아바타 크기 조정하기

지난 주에 티스토리에서 새롭게 선보인 Book Club 스킨에서 댓글에 표시되는 아바타가 약간 어색하게 표시됩니다. 그림과 같이 댓글에 답변을 달면 답글 작성자의 아바타가 찌그러져서 보입니다. 자꾸 보다 보면 익숙해지겠지만, 처음 스킨을 변경한 후에 댓글 섹션의 일부 아바타가 타원형으로 표시되어 매우 어색하게 느껴졌습니다.티스토리 북클럽(Book Club) 스킨에서 댓글 아바타 크기 조정하는 방법 댓글 내의 아바타가 일정한 크기로 표시되도록 하고 싶은 경우 다음 CSS 코드를 추가하면 됩니다./* Book Club 스킨 - 댓글 아바타 크기 */ .comment-list ul li .author-meta .avatar { width: 48px !important; height: 48Px; } 위와 같이 ..

티스토리 Magazine 스킨: 스크롤 시 헤더에 글 제목이 표시되지 않도록 하기

이 블로그에는 최근 티스토리에서 공개한 Magazine 스킨이 적용되어 있습니다. 저는 이전 스킨의 레이아웃과 비슷하게 수정하여 사용하고 있습니다. 매거진 스킨을 적용한 상태에서 개별 포스트에서 마우스를 아래로 스크롤하면 헤더에 글 제목이 표시됩니다. 스크롤 시 포스트 타이틀이 헤더에 표시되지 않도록 하려면 스킨 파일 하나를 수정하면 됩니다. 저는 front.js 파일을 다운로드한 후에 아래 그림에 표시된 부분을 삭제했습니다. 이런 부분이 두 군데 있습니다. 표시된 부분을 삭제한 후에 업로드하여 기존 파일을 대체했습니다. 티스토리에서 스킨을 수정하려면, 잘 아시겠지만, 티스토리 관리자 페이지에서 꾸미기 > 스킨 편집을 클릭하고 "HTML"을 클릭하여 HTML 파일과 CSS 파일을 수정하거나 파일을 삭제/..

티스토리 Magazine 스킨에 브레드크럼을 추가하는 방법

브레드크럼(Breadcrubmb; 이동 경로)을 추가하면 SEO(검색엔진 최적화)에 도움이 될 수 있습니다. 그리고 구글 서치 콘솔에서 'itemListElement' 입력란이 누락되었습니다 오류가 발생하는 경우에도 브레드크럼을 적용하면 오류가 해결될 수 있습니다. 브레드크럼과 SEO 지난 달에 이 티스토리 블로그의 스킨을 Magazine (매거진)으로 변경했습니다. 티스토리의 신규 스킨 Magazine으로 변경해보았습니다 ※자동으로 브레드크럼을 추가하는 방법은 티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법을 참고해보세요. 스킨을 바꾸면서 개별 글에 그림과 같이 브레드크럼(이동 경로)을 추가했습니다. 구글 검색에서 아래 그림과 같이 이동 경로가 표시됩니다. 구글 서치콘솔에서 브레드크럼 관련 오..

티스토리에 로그인해도 다른 티스토리 블로그 댓글에서 로그인 상태가 유지되지 않는 문제

티스토리에서는 로그인한 상태에서 다른 티스토리 블로그에 쉽게 댓글을 달 수 있습니다. 티스토리에 로그인하면 이름, 비밀번호 등을 입력할 필요가 없습니다. 티스토리에서 로그인 상태가 유지되 않아 티스토리 계정으로 댓글을 달 수 없는 경우 하지만 티스토리에 로그인한 상태에서도 일부 티스토리 블로그의 댓글에서 로그인 상태가 유지되지 않아서 이름과 비밀번호 등을 입력해야 하거나 로그인 사용자만 댓글을 달 수 있는 티스토리 블로그에 댓글을 달 수 없는 경우가 있습니다. 이런 문제가 발생하면 브라우저를 바꾸어서 테스트해보면 로그인이 풀리는 문제가 해결될 수 있습니다. 저는 IE에서 주로 이런 문제를 경험하고 있습니다. 구글 크롬에서 로그인하면 이런 문제가 나타나지 않았습니다. '이 블로그는 로그인한 사용자에게만 댓..

티스토리 스킨 수정하기: 구글 맞춤검색 기능 적용하기

이 블로그에는 최근 공개된 티스토리 매거진 스킨인 Magazine이 적용되어 있습니다. 스킨 그대로 사용해도 괜찮지만 저는 이전 레이아웃과 거의 비슷하게 바꾸었습니다. 데모의 헤더를 보면 왼쪽에 블로그 이름이 표시되고, 오른쪽에 검색 아이콘과 메뉴 아이콘이 배치되어 있습니다. 저는 PC 버전에서는 이전 스킨과 비슷하게 만들었습니다. (모바일 버전은 모바일 스킨을 사용하고 있습니다.) 블로그 타이틀 옆에 배너가 표시되도록 했고, 메뉴는 메뉴 아이콘을 클릭했을 때 표시되도록 하는 대신 메뉴 아이콘을 삭제하고 메뉴 항목이 표시되도록 메뉴 내비게이션을 막코딩으로 추가했습니다.ㅎㅎ 검색 아이콘은 CSS를 사용하여 오른쪽 끝으로 위치를 이동시켰습니다. 이 부분에 대해서도 기회가 되면 수정하는 방법을 설명해보겠습니다..

티스토리 스킨 변경 후 네이버 웹마스터도구에서 '서버오류' 발생하는 경우

티스토리에서 작년에 공개한 스킨과 며칠 전에 공개한 Magazine 스킨을 적용할 경우 네이버 웹마스터도구의 웹페이지 수집 요청에서 '서버오류'가 발생할 수 있습니다. 저는 Poster 스킨을 적용했다가 이 오류 때문에 기본 스킨 중 하나인 #1을 사용하다가 오늘 Magazine 스킨을 적용해보았습니다. 하지만 Magazine에서도 마찬가지로 네이버 웹마스터도구에서 웹페이지 수집 요청 시 '서버오류'가 발생했습니다. 구글에서 검색되는 여러 방법을 시도해보았지만 문제가 해결되지 않았습니다. 그러다가 어떤 글에서 /1 페이지를 지우면 서버오류 무한루프에 빠지는 것 같다는 내용을 보았습니다(https://drkimfixnsolve.tistory.com/25 참고). 네이버 웹마스터도구에서 '서버오류' 발생하는..

티스토리의 신규 스킨 Magazine으로 변경해보았습니다

티스토리에서 지난 25일에 공개한 Magazine 스킨으로 변경해보았습니다. 레이아웃은 이전과 거의 동일합니다. 댓글 시스템은 티스토리 기본 댓글과 Disqus 댓글을 동시에 표시했었지만 Disqus 댓글 사용 빈도가 거의 제로여서 디스커스 댓글은 적용하지 않았습니다. 홈 설정에서 "커버" 대신 "최신 글"을 선택하면 첫 페이지에 사이드바가 표시되지 않습니다. 억지로 PC에서 사이드바가 표시되도록 설정해보았습니다.ㅎㅎ HTML 소스를 살펴보니 첫 페이지에서 사이드바가 display:none을 사용하여 숨겨져있네요. 즉, 사이드바가 로드는 되지만 표시만 되지 않았던 것입니다. display:none을 display:inline-block으로 지정하고 콘텐츠 섹션과 사이드 섹션의 너비를 적절히 조정했습니다...

티스토리의 새로운 스킨 - Magazine

어제 티스토리에서 Magazine이라는 새로운 스킨을 공개했습니다. 스킨 이름대로 매거진 스타일로 홈페이지를 꾸밀 수 있는 스킨입니다. 6가지 커버 아이템을 지원하며, 하단 푸터 영역에 자유로운 외부 링크 및 SNS 아이콘 노출이 가능하도록 되어 있습니다. 그리고 상단과 하단에 로고 이미지를 삽입할 수 있으며, 스킨 곳곳에 사용되는 포인트 컬러는 레드/블랙/블루입니다. 이 스킨의 경우 전면 페이지에는 사이드바가 표시되지 않지만 개별 글에는 사이드바가 표시됩니다. 비교적 최근에 공개되었던 Poster, Whatever, Letter, Portfolio에 비해 기능이 향상된 것 같은 느낌을 받았습니다. Poster 등의 스킨을 이 블로그에 적용했지만 네이버 웹마스터도구에서 글 수집 요청을 하면 '서버 오류'..

티스토리 사이트맵 제출

2019년 3월 말에 구글의 Search Console이 새롭게 바뀌면서 직접 페이지 URL을 제출할 수 있었던 Fetch As Google 기능이 종료되었습니다. 이 티스토리 블로그의 글은 발행되어도 구글에서 느리게 색인이 되어서 새로운 글을 발행할 때마다 번거롭지만 수동으로 URL을 제출했습니다. 하지만 Fetch As Google 기능이 종료되면서 더 이상 수동으로 글 URL을 제출할 수 없게 되었습니다. 이 때문인지 최근에 발생한 글이 구글에 잘 노출이 안 되고 있습니다. 시간이 지나면 노출되겠지만, 아무래도 불이익을 당할 수밖에 없는 것 같습니다. RSS를 구글 웹마스터도구에 제출해놓았고 최근에 RSS를 읽었다고 표시되어 있지만 이상하게 최근 글이 빨리 구글에 노출되지는 않고 있네요. 오늘 시간..

티스토리 에디터 업데이트

오늘 오랫동안 기다리던 티스토리 에디터가 업데이트되었네요. 이전 에디터는 특히 이미지를 첨부할 때 많이 불편했습니다. 이제 플래시 없이 드래그 & 드롭으로 이미지 첨부가 가능해졌다고 하네요. 테스트를 해보니 잘 작동하네요. 이미지를 끌어다가 놓으면 알아서 이미지가 삽입됩니다. 그리고 기본모드 외에 마크다운 모드가 추가되었고, HTML 에디터가 개선되었습니다. 한글 맞춤법 기능도 추가되었네요. 맨 아래에 보면 '맞춤법검사' 도구가 있습니다. 도구를 실행해보니 브런치의 맞춤법검사 도구와 거의 동일한 것 같습니다. '모두 넘기기'(모두 무시), '모두 수정' 같은 기능이 있으면 더 편리할 것 같습니다. 그리고 '미리보기' 도구도 추가되어 글을 발행하기 전에 미리볼 수 있습니다. 테스트로 글을 작성해보니 이미지..