[블로그팁]티스토리 사이드바의 프로필 이미지가 잘려서 나오는데 어떡할까요?

추석이 다가오는 마당에 이놈의 더위는 물러갈 생각을 안하네요...
어제도 무척이나 더운 날씨였는데 다른 분들은 어떠셨는지 모르겠네요. ^^

제가 배포한 스킨을 사용하시는 분들과 다른 스킨을 사용하시는 분들도 마찬가지로 간혹 하시는 질문이 있는데요.

"사이드바에 이미지가 잘려서 나와요~" 혹은 "프로필 이미지가 너무 크게 나와서 잘리네요~"

이런 질문을 몇번 받았었답니다.
그래서 오늘은 사이드바에서 보여지는 블로그정보에서 프로필 이미지에 대한 팁을 설명하려고 해요.

블로그 정보란?

관리자모드 -> 환경설정 -> 블로그 정보의 경로로 이동하시면 설정을 할 수 있답니다.

그러면 사이드바에 프로필 이미지와 그 아래로 블로그설명, 닉네임이 보여지게 되는거죠.


자 그럼 본격적으로 오늘의 키포인트 프로필 이미지의 잘림현상에 대해 알아볼까요?

프로필 이미지 잘림현상 확인

전 이 현상을 미리 겪었고 그에 대한 방법을 적용했기 때문에 정상적으로 보이고 있었지만
포스팅을 위해 좀 큰 이미지로 변경을 해봤습니다.

원래 200px크기의 이미지를 사용하고 있었는데 500px크기의 이미지로 변경을 했어요.

변경할 이미지를 업로드 하고 저장버튼을 눌러줍니다.

<막간의 팁>

사용하고 있는 프로필 이미지를 변경할 때 이 방법으로 이미지를 변경 할 수 있답니다.

200px

500px

왼쪽 이미지에서 오른쪽 이미지로 변경했습니다. 크기가 확 비교 되죠?

제 블로그에 적용된 모습입니다.
이미지가 사이드바의 크기를 벗어나기 때문에 잘려보이네요.
참고로 제 블로그의 사이드바의 크기는 210px입니다.

프로필이미지가 이렇게 잘려서 보인다면 정말 짜증이 확~~~~!!!!

그럼 이제 해결 방법을 알아볼게요.

이미지 크기를 조절하자.

말로 하는 것은 간단하죠.
흔히 사용하는 포토샵을 이용해도 되고 그외에 이미지 편집 프로그램을 이용하면 됩니다.

하지만 그런 프로그램에 익숙하지 않은 분들을 위해 그림판을 이용해서 이미지 크기를 줄여볼게요.

그림판을 실행하고 열기 메뉴를 이용해서 크기를 줄일 이미지를 불러옵니다.

크기조절 아이콘을 클릭하면 그림과 같이 팝업창이 뜨구요. 표시한 부분처럼 픽셀로 체크를 변경하시고
가로, 세로 수치를 변경하시면 됩니다. 마지막엔 확인을 클릭하셔야죠.

그러면 이렇게 크기가 줄어들었죠? 200px크기로 줄였습니다. 그 다음에 저장하시면 끝!!!

간단하죠?

위와 같이 이미지의 크기 자체를 변경하는 방법과는 조금 다른 방법인
실제 이미지의 크기는 그대로이지만 작게 보여지게 할 수도 있답니다.

태그소스를 수정하는 방법

관리자모드의 스킨수정 페이지입니다.
HTML을 수정할거에요.

위에 표시된 부분이 프로필이미지를 나타나게 하는 태그랍니다.
<img src="##_image_##" alt="" />
이 부분인데요 대괄호는 일부러 생략했습니다. 치환자라고 하는데 대괄호를 쓰게되면 안보이거든요.

위에 이미지를 불러오는 태그에 크기를 지정하는 태그를 추가해 볼게요.

잘 보시면 앞에 설명했던 소스에서 밑줄친 부분만 추가되었습니다.
추가된 내용은 width=200px 이구요.
이건 불러오는 이미지의 가로 크기를 강제로 200px로 줄여서 나타내라는 뜻입니다.

변경한 HTML을 저장해서 적용한 모습입니다.

이젠 크기가 제대로 보이죠?

많은 분들이 저런것 쯤이야~!!, 그런 것도 못해??

이렇게 하찮게 여기고 팁이랄 것도 없는 팁도 막상 필요한 분들이게는 도움이 된다는 것을 많이 느끼고 있답니다.
그래서 앞으로도 어떻게 보면 사소하고 보잘 것 없는 팁이라 할지라도 그것을 몰라서 헤매고 있을 분들을 위해
포스팅을 쭉 이어가려고 합니다.