#티스토리, 스킨 수정, tabindex
안녕하세요. 하늘다래입니다.오랜만에 블로그 스킨 수정 관련 글을 쓰는 것 같네요. ^^ 이 글은 진작부터 쓰려고 몇 개월 전부터 생각하던건데 빨리 써야 할 아이템들이 자꾸 생겨나면서 차일피일 미뤄왔는데, 이웃 블로그 방문하면서 저 스스로가 불편해서 도저히 안되겠다고 생각이 되어 오늘 업데이트 합니다.
티스토리 블로그 운영하시는 블로거분들, 한가지만 여쭤볼께요!
스킨 선택하시면서 어떤 점을 고려하시나요?
디자인이 이쁘면 그만,물론, 이렇게만 생각하시는 분들은 그리 많진 않을꺼예요. ^^
애드센스나 기타 배너 광고를 편하게 달 수 있으면 장땡.
가독성을 높일 수 있는 디자인 스킨을 고려해야지.블로그를 어느정도 운영하시다가 스킨을 바꾸시는 분들은 대부분 저 두가지를 기준으로 선택하시게 될텐데요. 하지만 스킨 변경 후, 방문자가 좀 더 편하게 블로그에서 시간을 보내다가 갈 수 있도록 편의성을 고려하시는 분들은 그리 많지 않은 것 같습니다.
전체적으로 심플하면서 깔끔하고, 내 블로그 성격에 맞는 형식의 스킨을 선택해야지.
| 댓글 입력 어떻게 하세요? |
전 주르르르~ 댓글을 입력하고 키보드의 'Tab' 키를 활용해서 '확인' 버튼으로 선택상태(Target)를 이동시키고 바로 '엔터' 키를 누릅니다. 대부분의 사이트에서 로그인 할 때도 마찬가지고 게시판에서 댓글 입력 할 때도 마찬가지 동작으로 하게 되죠.
그러다 보니 이번에 티스토리에 반영 된, 라이브리(LiveRe) 댓글 플러그인 뿐만 아니라, 몇몇 블로그의 댓글 입력 부분이 매우 불편 할 때가 있습니다.
라이브리(LiveRe) 의 경우 'Tab' 키를 누르면, 워드에서 'Tab' 키 누른것처럼 빈 문자가 입력 되고 확인 버튼으로 선택상태가 이동하진 않습니다. 개인적으로 라이브리(LiveRe)를 사용하지 않는 가장 큰 이유가 이 부분입니다.
사실 "댓글 입력하고 마우스를 움직여서 확인 버튼 누르는게 뭐 그리 어렵냐?" 라고 하실 수도 있지만, 키보드로 대부분의 동작을 하는 것이 익숙한 사람들에겐 분명 불편한 동작입니다.
(단축키 사용을 왜 하냐? 라고 묻는것과 같다고 볼 수 있겠죠^^;)
그럼, 티스토리 블로거분들 중 자신의 블로그 스킨에서 댓글 입력 영역이 아래 이미지와 같이 생긴 분 있으시다면, 이 글 꼭 참고 하셔서 스킨 수정해주시면 감사하겠습니다. ^^
이미지를 봐도 잘 모르시겠다구요? 그럼 제 이웃블로거분이신 쥬르날님 블로그[바로가기] 보시면 바로 이해가 되실꺼예요. ^^
쥬르날님의 블로그에서 댓글 입력창에 내용을 입력하고 'Tab' 키를 한 번 눌러 보세요. 그럼 아래와 같이 선택이 이동 될꺼예요.
내가 원하는 동작은 댓글 입력 버튼인 'COMMENT' 버튼으로 이동되길 바라는데, 비밀글 기능인 'SECRET' 체크박스로 선택영역이 이동 되죠. 물론 비밀글 자주 작성하시는 분들한테는 편할 수도 있겠지만 일반적으론 불편하죠.
이 스킨의 문제점은 'SECRET' 체크 박스에서 'Tab' 키를 한 번 더 누른다고 해서 'COMMENT' 버튼으로 이동하진 않는다는 것입니다=_= 'Tab' 키를 아무리 눌러도 도대체 어디로 이동하는지 알 수가 없습니다 ^^;
| 사용자를 위해 블로그 스킨 수정하기 |
어쩌다보니 서론이 너무 길어져 버렸는데, 자신의 블로그 댓글영역이 Tab 키로 '확인' 버튼으로 바로 이동되지 않는다면 다음 방법으로 스킨을 수정해주시면 간단히 해결 됩니다. ^^
1. 관리자 화면으로 이동
2. 꾸미기 - HTML/CSS 편집 메뉴로 이동
3. Ctrl + F 키를 눌러 'commentWrite' 를 찾음 (이 부분은 스킨별로 조금씩 다르므로 comment 로 입력해서 찾아보세요)
4. 아래와 같은 소스 형태가 있는지 확인
<p>
<textarea name="comment" rows="10" cols="50" class="textarea" onfocus="this.className='textarea_on'" onblur="this.className='textarea'" title="댓글내용"></textarea>
</p>
<a onclick="addComment(this, 347); return false;" class="submit">Comment</a>
HTML 소스에 익숙치 않은 분들은 이게 뭔가 하실텐데, 자세한 설명을 드리는 것보다 '이렇게 수정하세요' 하는게 더 편하시겠죠? ^^
<p>
<textarea name="comment" rows="10" cols="50" class="textarea" onfocus="this.className='textarea_on'" onblur="this.className='textarea'" title="댓글내용" tabindex="1"></textarea>
</p>
<a onclick="addComment(this, 347); return false;" class="submit" tabindex="2">Comment</a>
버튼의 경우 <a onclick=" "> 으로 처리한 스킨이 있고, <input type="button"> 으로 되어있는 스킨도 있습니다.
요점은 댓글 입력 부분인 <textarea> 부분에 tabindex="1" 을 입력하고, 확인 버튼 부분에 tabindex="2" 를 입력해주는 것이 요점입니다. tabindex 는 'Tab' 키를 눌렀을 때, 선택 영역(Target) 이 이동 될 순서를 정하는 태그인데요.
tabindex="1" 인 영역에서 'Tab' 키를 누르면 tabindex="2" 로 지정된 영역으로 이동이 됩니다.
만약 자신의 블로그 스킨에서 댓글 입력 후 'Tab' 키를 입력했는데 확인 버튼으로 바로 이동되지 않는다면, 이 방법을 사용해서 스킨을 수정하시길 바랍니다. (방문자들의 편의성이 높아져요!! ^^)
위쪽에 소개드린 소스와 다른 형태라서 "내 스킨에선 안보여효 ㅠ 모르겠어요 ㅠ" 하시는 분들은 댓글 남겨주시면, 제가 수정하는 것을 도와 드리도록 하겠습니다. ^^
이웃블로거분들 중에서도 용의자님이 만드신 저 스킨 쓰시는 분들이 꽤 많으시니 방문이 뜸하신 분들은 일일이 찾아뵙고 알려드려야겠네요. ^^
이상, 하늘다래였습니다. ^^