Tistory Skin, HTML, CSS 설정

|


원래는 무료 호스팅 업체를 통해 XE로 개인 블로그를 운영하였지만

감사하게도(?) 무료 호스팅에서 제공해줄 수 있는 서비스의 수준을 넘어서 쫒겨났다.

그래서 선택한 것이 이 Tistory.

나중을 위해 Tistory 에서 내가 설정한 것들을 기록하려 한다



1. Skin


스킨명 : Divergence(Mint)


스킨 위자드로 변경

배경 : 색상

타이틀 : 패턴

제목 및 게시글 : 글꼴, 글자색

글영역 넓이 : 900px (헌데 기본 본문 가로 사이즈가 824px 이라 변경이 될지는 모르겠다.)






2. CSS


1) 게시글의 줄간격이 너무 좁아 p 태그에 css를 줬다.

 

HTML/CSS - style.css - /* 본문 */

.article,

.article p { line-height: 170%; }

a:hover {text-decoration: underline; }


*

.article p { line-height: 170%; }  추가

 

 

2) 본문의 링크 색이 잘 보이지 않아 a 태그의 색을 노란색으로 변경하였다.

 

HTML/CSS - style.css - /* 공통요소 */

a {color: #ffcc00; text-decoration: none; }
a:hover {text-decoration: underline; }

 

*

#415360 -> #ffccoo 으로 변경

 

 

3) 카테고리의 글씨가 잘 보이지 않아 글씨 색 변경

 

HTML/CSS - style.css - /* 본문 */

.article_head .title {display: inline; color: #ffffff; line-height: 1.2em; padding: 0 0 0

 

*

#181818 -> #ffffff 으로 변경

 

 

4) 글 아래 태그 글씨 색 변경

 

HTML/CSS - style.css - /* 본문 */

.article_tag a {color: #FCEEFD; }

 

*

#2d353b -> #FCEEFD 으로 변경

 

 

 

 

3. HTML

 

1) 카테고리 밑 글들도 색이 잘 안보인다. CSS 로 수정하려 했으나 잘 모르겠어서 HTML 안에 font 태그를 넣어 수정했다.

 

HTML/CSS - skin.html

 

<ol class="article_post">
    <s_list_rep>
        <li>
            <span class="date"><font color=#FCEEFD>##_list_rep_regdate_##</span>
            <span class="title">
                <a href="##_list_rep_link_##"><font color=#FCEEFD>##_list_rep_title_##</a>

                <span class="count">##_list_rep_rp_cnt_##</font></span>
             </span>
        </li>
    </s_list_rep>
</ol>

 

*

각각의 ##_list_rep_regdate_## & ##_list_rep_title_## & ##_list_rep_rp_cnt_## 를 font 태그로 감쌌다.

각 ##변수## 앞 뒤로 대괄호가 있다는 것 주의! (본문에 나타나지 않음)

 



2) Google Analytics 사용 위한 코드 삽입


HTML/CSS - skin.html


<head>


<!-- Google Analytics -->

<script>

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');


  ga('create', 'UA-61222542-1', 'auto');

  ga('send', 'pageview');

  ga(‘set’, ‘&uid’, {{USER_ID}}); // 로그인한 User-ID를 사용하여 User-ID를 설정합니다.

</script>


*

head 태그 바로 밑에 태그 삽입하였다.





And