티스토리 Square 스킨 상단 로고 및 이미지 삽입

티스토리 Square 스킨 상단 로고 및 이미지 삽입

티스토리에서 제공하는 스킨 중 가장 깔금한 스킨인 Square를 사용하고 있다.

Square 스킨은 깔끔한 대신 다른 스킨과 달리 상단에 블로그 설명과 로고를 제공하지 않는다.

이번 글에서는 두가지 중 로고 및 이미지를 삽입하는 방법에 대해 알아보고자 한다.

0. 기존 모습

1. 티스토리 관리 페이지에서 꾸미기 -> 스킨편집으로 들어간다.

2. html 편집을 눌러 편집창으로 들어간다.

3. 파일업로드 탭을 눌러 넣고 싶은 이미지를 추가한다.

   파일명은 logo.gif 이다. 

4. CSS탭을 눌러 편집페이지로 넘어간다.

   Ctrl + F 를 눌러 찾기 창을 열고 "sidebar"를 입력해 사이드바 관련 코드 줄을 찾는다.

5. 아래 코드를 사이드바 관련 코드가 있는곳에 삽입한다.

    #sidebar .img { padding: 0 10px; }

    

    *패딩은 콘텐츠와 이미지사이의 여백을 의미한다. 자신이 원하는 값을 삽이하면 된다.

   입력을 하고 난 후 적용을 누른다.

6. html 탭을 눌러 편집페이지로 넘어간다.

   Ctrl + F 를 눌러 찾기 창을 열고 "sidebar"를 입력해 사이드바 관련 코드 줄을 찾는다.

   <div id="sidebar">

   <div class="blank"></div>

   <h1><a href="https://studio-oim.tistory.com/">스튜디오 음 건축사사무소</a></h1>

   위 코드를 찾는다.

7. 6번에서 찾은 h1 코드를 아래와 같이 수정한다.

   <h1><a href="https://studio-oim.tistory.com/"><img src="./images/logo.gif"></a></h1><br>

   *붉은 글씨는 3번에서 업로드한 파일명과 확장자를 입력해 주면된다.

   입력을 하고 난 후 적용을 누른다.

8. 블로그를 새로고침 한 후 제대로 적용되었는지 확인한다.

9.  타이틀 같이 쓰기

댓글로 로고 글씨를 같이 넣는 방법에 대해 문의가 있어서 추가로 블로그 타이틀을 넣는 방법을 설명하고자 한다.

먼저 위에 7번 타이틀을 로고로 치환하는 화면에서 타이틀 코드를 유지하고,

로고를 삽입하는 코드를 추가해준다.

코드의 순서에 따라 이미지와 타이틀의 순서가 정해지므로, 원하는 순서에 맞게 삽입하면된다.

예시>

<h1><a href="https://studio-oim.tistory.com/"><img src = "./images/logo.gif"></a></h1>

<h1><a href="https://studio-oim.tistory.com/">스튜디오 음 건축사사무소</a></h1>

10.  블로그 설명 추가하기

댓글로 블로그 설명을 같이 넣는 방법에 대해 문의가 있어서 추가로 블로그 설명을 넣는 방법을 설명하고자 한다.

블로그 설명은 블로그 관리메뉴에서 작성한 설명을 그대로 입력하는 방식입니다.

먼저 위에 9번 코드 다음에 아래 예시 코드를 입력해준다.

코드의 순서에 따라 이미지와 타이틀, 블로그 설명의 순서가 정해지므로, 원하는 순서에 맞게 삽입하면된다.

예시>

<h1><a href="https://studio-oim.tistory.com/"><img src = "./images/logo.gif"></a></h1>

<h1><a href="https://studio-oim.tistory.com/">건축설계부터 시공까지 다양한 경험을 바탕으로 자료를 공유합니다. #설계 #시공 #허가 #신고 #인테리어 #용도변경 #증축 #개축 #대수선 studio.oim@gmail.com</a></h1>

이상 로고 삽입하는 방법, 이미지 삽입하는 방법, 블로그 설명 삽입하는 방법 입니다.

궁금하신 점이나 더 좋은 방법이 있으신 분들은 아래 댓글로 알려주세요.