for editor


editor { font-family: D2Coding, "D2Coding" !important;}
linenumber {font-family: Hack}
activeline {}

/*
  You can only use the following style.

  - color, font-family, font-style
  - text-shadow

  Example:
    color: #adadad;
    font-style: bold;
    text-shadow: 0 1px rgba(0, 0, 0, .8);
*/
header {}
code {}
blockquote {}
li1 {}
li2 {}
li3 {}
hr {}
img {}
a {}
em {}
i {}
strong { font-style: bold;}

for viewer

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

pre,
code {
  font-family: Hack, 'Nanum Gothic Coding';
}

pre {
  padding: .5rem;
  line-height: 1.25;
  overflow-x: scroll;
}

a,
a:visited {
  color: #3498db;
}

a:hover,
a:focus,
a:active {
  color: #2980b9;
}

.modest-no-decoration {
  text-decoration: none;
}

html {
  font-size: 12px;
}

@media screen and (min-width: 32rem) and (max-width: 48rem) {
  html {
    font-size: 15px;
  }
}

@media screen and (min-width: 48rem) {
  html {
    font-size: 16px;
  }
}

body {
  line-height: 1.85;
}

p,
.modest-p {
  font-size: 1rem;
  margin-bottom: 1.3rem;
}

h1,
.modest-h1,
h2,
.modest-h2,
h3,
.modest-h3,
h4,
.modest-h4 {
  margin: 1.414rem 0 .5rem;
  font-weight: inherit;
  line-height: 1.42;
}

h1,
.modest-h1 {
  margin-top: 0;
  font-size: 2.827rem;
}

h2,
.modest-h2 {
  font-size: 1.999rem;
}

h3,
.modest-h3 {
  font-size: 1.414rem;
}

h4,
.modest-h4 {
  font-size: 1.121rem;
}

h5,
.modest-h5 {
  font-size: .88rem;
}

h6,
.modest-h6 {
  font-size: .707em;
}

small,
.modest-small {
  font-size: .707em;
}

/* https://github.com/mrmrs/fluidity */

img,
canvas,
iframe,
video,
svg,
select,
textarea {
  max-width: 100%;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);

@import url(http://fonts.googleapis.com/css?family=Arimo:700,700italic);

html {
  font-size: 18px;
  max-width: 100%;
}

body {
  color: #444;
  font-family: 'Nanum Gothic Coding', Hack;
  font-weight: 300;
  margin: 0 auto;
  max-width: 48rem;
  line-height: 1.45;
  padding: .25rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Nanum Gothic Coding';
}

h1,
h2,
h3 {
  border-bottom: 2px solid #fafafa;
  margin-bottom: 1.15rem;
  padding-bottom: .5rem;
  text-align: center;
}

blockquote {
  border-left: 8px solid #fafafa;
  padding: 1rem;
}

pre,
code {
  background-color: #fafafa;
}
저작자표시 비영리

그림을 넣을 때마다 은은한 그림자를 넣기 위해
파워포인트에다가 그림을 불러와서 그림자 효과를 준 다음 png 파일로 변경해서 저장하는 뻘짓을 반복했었는데,

기왕 css 를 건드린 김에 관련된 태그가 없는지 찾아보았더니 떡하니 있었다.

tistory에서는 해당 부분을 style.css 파일의 해당 부분에 지정해주면 된다.

/* 그림 */
    .imageblock{
    -webkit-box-shadow: 3px 3px 10px #7C7C7C;
    box-shadow: 3px 3px 10px #7C7C7C;
    }

여기서

box-shdow: 3px 3px 10px

의 의미는 그림자의 x축, y축 으로 떨어진 양과 blur 하는 만큼양을 나타낸다. 나는 쨍한 그림자 보다는 부드러운 그림자를 원했으므로 blur 수치를 10px 로 넉넉하게 주었다.

그냥 img 태그의 스타일을 수정해 버리면 블로그에 들어가는 모든 이미지들에 그림자가 생겨서 이상해지니 명심할 것.
그리고 entry태그 안에 있는 img 에만 적용시키려 하더라도,
메인 이미지 외의 다른 이미지들이 모두 그림자가 적용된다. 예를 들면,
티스토리 블로그 내의 저작권 관련 이미지라거나 책/영화 같은 메타정보를 불러왔을 때의 이미지까지 말이다.

무튼 그래서 저기 위에 블로그 스킨에 그림이라고 친절하게 명시되어 있는 부분만 스타일을 적용해 주었더니 한결 좋다.

이제 뻘짓이 줄었구나.

예전에 작업해서 올린 그림들에 이중 그림자가 생긴 건 함정.

저작자표시 비영리

엄청 heavy하게 markdown language 를 사용하는 것은 아니지만
그래도 이 기능 저 기능을 쓰면서 블로그에 올릴 글들을 먼저 적는 편이다.

그런데 인용구 (blockquote) 부분이 마음에 안드는 거다.
생각보다 자주 쓰는데 말이다.

그래서 CSS blockquote 를 구글에 검색해서 마음에 드는 놈으로 적용시켰다.

역시 구글이 사수.

Tistory의 style.css 파일에서 인용구와 관련된 부분을 찾아 바꾸어 주었다.

사용된 css 코드는 아래와 같다.

/* 본문 - 인용구 */
.entry blockquote {
  width: 90%;
  font-weight: bold;
  background: #D8D8D8;
  border-left: 10px solid #FF8224;
  border-right: 10px solid #FF8224;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

.entry blockquote:before {
  color: #FF8224;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}

.entry blockquote p {
  display: inline;
}

적용 모습은 이렇다.



색이며 글꼴이며 마음에 들어서 한동안 이 걸로 쓰지 않을까 싶다.

저작자표시 비영리


미투데이의 글배달 기능 셋팅해놨더니 글 정렬이 엉망으로 왔다.

네이버 블로그로는 어떻게 배달되는진 모르겠지만,
티스토리로 배달되는 미투데이 글들은 읽기도 난해하게 배달되어 왔다.

조금 검색을 해보니 나만 그런 문제가 있었던 것은 아니었나보다.

이런저런 블로그들을 눈팅한 끝에 결론은 미투데이에서 배달되어 오는 글들은
몇 가지 태그로 분류되어 있으며, style.css 파일을 수정해 꾸밀 수 있다는 것.

그 과정을 요약하면 다음과 같다.



1) 우선 관리자 페이지로 들어가 CSS 파일을 연다.









2) style.css 의 제일 하단에 아래의 소스코드를 추가한다.


/* me2day style setup */



/* 배달되는 글의 전체 테두리 */

.me2day_daily_digest {

    border:1px solid #eaeaea;

}


.me2day_daily_digest ul {

    margin:0;

    padding:0;

    list-style:none;

    border:1px dotted #cdcdcd;

}


.me2day_daily_digest li {

    margin:0 5px;

    padding:0 0 0 20px;

    list-style:none;

    line-height:200%;

    border-bottom:1px dotted #cdcdcd;

    /* 글머리 아이콘을 미투데이 로고 (소형)으로 */

    background:url('http://static1.me2day.com/images/new_sub/img_btn_me2day_icon_purple_c3.gif') no-repeat left 3px;

}


/* 날짜 표시부 옵션 */

.me2day_daily_digest ul li .datetime a {

font-size: 90%;

padding-left: 10px;

color:#5A32B4;

}


/* 미투데이 글 태그 표시부 옵션 */

.me2day_daily_digest ul li .me2_tags {

padding-left: 10px;

font-size: 90%;

color: #BDBDBD;

}


/* 미투데이 글 중 이미지 표시부 옵션 */

.me2day_daily_digest ul li img {

border: 1px dotted #DB9CFF;

margin-left: 50px;

}




이렇게 세팅하면 아래의 포스팅과 같은 모양으로 배달된다.


CSS를 다 설명할 순 없으니, 관련 옵션들은 찾아보시고 본인의 입맛에 맛게 설정해서 

미투데이 글 역시 하나의 예쁜 포스팅이 되도록 꾸며봅시다. :)


저작자표시 비영리

+ Recent posts

티스토리툴바