잡다한 정보

티스토리 블로그 설명, 프로필사진영역 추가 태그

오르디네 2015. 8. 5. 09:26



모 블로그를 보고 틱톡스킨이 참 깔끔하다고 느껴서 스킨을 바꿔봤다.

근데 이 스킨이 깔끔하긴 한데 블로그설명이랑 프로필사진이 없다는점이 아쉬웠는데

다른 티스토리 공개스킨에서 태그를 슬쩍 빼와서 적용시켜봤더니 생각보다 쉽게 불만을 해소할 수 있었다.


스킨마다 다르게 구성되어있긴한데 대부분 비슷비슷해서 다른곳에도 적용이 가능할것으로 보인다. 

미리보기를 이용해 이게 제대로 적용되가고있나 확인하면서 하면 꼬이는일 없이 무난하게 적용이 가능하다.


우선 skin,html에서 사이드바 항목의 적당한 위치에 

                         <s_sidebar_element>

<!-- 블로그 이미지 모듈 -->

<div id="blogImage"><img src="https://tistory1.daumcdn.net/tistory/1773028/attach/f21a00ecac1948b2b463b834481f5ce9" alt="블로그 이미지" /></div>

</s_sidebar_element>


<s_sidebar_element>

<!-- 블로그 설명 모듈 -->

<p>방치형 잡담 블로그</p><p class="userID">by <strong>오르디네</strong></p>

</s_sidebar_element>

를 추가한다. 

보통은 사이드바 최상단에 프로필을 넣기에 사이드바 바로 아래에 태그를 넣으면 된다.


다음으로 프로필 사진의 크기를 제한.

style.css에서 blog img + blog id 항목에 

#blogImage img    { width:원하는 수치px;height:원하는 수치 }

를 삽입. (blog img로 검색해서 위치 확인)

이건 선택사항이긴한데 수치를 제한해두지않으면 프로필사진이 짤려나오거나 글 영역이랑 충돌해서 사이드바가 블로그 최하단으로 밀려날수도 있다.