Loading

생활리뷰

검색
9개 발견
  1. 미리보기 2016.07.15

    맥/ 티스토리에서 마크다운으로 글 올리기

  2. 미리보기 2016.01.18

    티스토리 블로그 스퀘어 스킨 사이드바 찾기메뉴 수정

  3. 미리보기 2015.11.04

    반응형 스킨 Square를 소개합니다

  4. 미리보기 2015.10.22

    프라치노공간 7.0.3을 소개합니다

  5. 미리보기 2015.01.21

    프라치노공간 사이드 메뉴 설정 방법

  6. 미리보기 2014.12.06

    프라치노공간의 댓글창과 공유단추, 푸터

  7. 미리보기 2014.11.20

    블로그 스킨 교체 - 프라치노 공간

  8. 미리보기 2014.08.03

    FastBoot스킨 수정 - 폰트추가, 소제목꾸미기, 인용구박스 수정

  9. 미리보기 2014.07.28

    블로그 스킨 바꿨습니다 / Readiz님의 Fast Boot v.1.6.1

2016.07.15 10:10 – 열매맺는나무

맥/ 티스토리에서 마크다운으로 글 올리기

맥/ 티스토리에서 마크다운으로 글 올리기

마크다운으로 글을 쓰는 프로그램은 여러가지가 있지만, 간단한 글을 쓰기 위해 다른 프로그램을 여는 것도 귀찮은 일. 

하지만 맥을 사용하고 있다면 '오토메이터 서비스'를 이용해 티스토리에서도 바로 마크다운으로 글을 써서 올릴 수 있다.  아래 웬 포신 같은 것을 들고 있는 로봇이 바로 오토메이터. 맥 기본 응용프로그램이다. 뭐든 등록만 해 놓으면 그야말로 자동적으로 간단하게 실행해주는 편리한 일꾼인데, 아직 잘 몰라 제대로 부리지 못하고 있다. 



1. 티스토리에서 마크다운으로 글쓰기

아래 사진에서 보이는 것 처럼 티스토리 편집기에서 그냥 마크다운 문법으로 글을 쓴다. 편안히.





2. 오토메이터 서비스로 html변환하기

마크다운으로 쓴 글을 '우클릭>서비스>마크다운html '을 선택해  html로 바꿔준다. 

여기가 바로 앞서 말한 '오토메이터'가 활약하는 부분인데, 이것은 Back to the Mac의 '맥 사용 중 언제 어디서나 마크다운(Markdown)을 HTML로 변환하기' 란 글에 자세하게 설명되어 있다. 



아래 처럼 html로 바뀐다.



3. 외부콘텐츠 삽입

티스토리 편집기 맨 위에 툴바를 보면 '외부컨텐츠 삽입'이란 단추가 있다. 

이것을 눌러 창을 연 다음 변환된 html코드를 오려내기+붙이기 한다. 



아래 사진처럼 입력된 모습을 볼 수 있다. (처음엔 글씨도 작고 다닥다닥 줄 간격이 붙어있다. 적당히 늘려주고 사이사이 한 줄 더 넣기도 하면서 보기 좋게 다듬는다.)

발행 단추를 누른다. 




4. 완성된 결과물

글이 발행되면 편집기에서 보던 것 과는 달리 제대로 된 결과물을 볼 수 있다. 

물론 실시간으로 미리보기가 되지 않아 처음 마크다운을 이용하는 분들은 불편할 수 있다. 하지만 어느 정도 익숙해졌다 거나, 따로 마크다운 편집 프로그램을 열기 귀찮을 때, 또는 부분적으로 필요한 경우에는 이렇게 티스토리 편집기에서 직접 쓰는 방법이 편리할 수도 있다. 

 



<관련글>

마크다운 글쓰기 2-티스토리에 이미지 많은 글 올릴 때

저장저장
  1. BlogIcon SONYLOVE 2016.12.15 11:47 신고

    오호 이거 완전 좋은데요.
    저도 앞으로 잘 써먹을꺼같습니다. 얼른 해봐야겠네요.

댓글을 입력하세요

2016.01.18 10:46 – 열매맺는나무

티스토리 블로그 스퀘어 스킨 사이드바 찾기메뉴 수정

한동안 손대지 않던 티스토리 블로그 스킨. 이번에 수정한 것은 사이드 바 찾기 메뉴 '위치 이동'과 '어썸폰트를 사용해 돋보기 아이콘 넣기'였다.

원래는 맨 아래 위치하고 있어 불편했는데, 아래 사진에서 보이는 것처럼 수정하고 나니 내가 이용하기에도 편리해졌다. 



1. 찾기 메뉴 위치 이동

위치 이동은 간단하다. 

관리>사이드바 에서 'search'메뉴를 원하는 위치로 올리면 된다




2. 돋보기 아이콘 넣기


1) 어썸폰트 


돋보기 아이콘은 어썸폰트(Font Awesome) 웹 아이콘을 이용했다. 따로 이미지를 만들거나 올려놓지 않아도 이미 있는 아이콘을 이용하기만 되므로 편리하다.

지금 쓰고 있는 스퀘어 ver.2.1 스킨은 어썸폰트를 쓸 수 있게 되어 있어 별다른 조치는 필요하지 않았다. 

사용할 수 있는지 여부는 관리>스킨>html수정 에서 다음 구절이 있는지 찾아보면 된다. 있다면 그대로 진행하면 되고, 없다면 넣어주면 된다.  




2) 돋보기 아이콘 넣기


관리>스킨>html수정에서 sidebar, search를 찾는다. 

아래 사진처럼 <s_sidebar_element> <!--search -->가 보인다. 

그 아래<...."press enter to search..."....>구절이 끝나는 곳에 빨간색 밑줄쳐진 대로 '<i class="fa fa-search"></i>를 넣어주면 된다. 




<참고글>

폰트어썸 웹 아이콘 적용하기 : http://gonegone21.tistory.com/31

폰트 어썸 웹 아이콘 : http://fortawesome.github.io/Font-Awesome/icons/

  1. BlogIcon SONYLOVE 2016.01.18 11:24 신고

    요즘 어이콘폰트에 관심이 많은데 폰트어썸은 사용법이 간단하네요. 함 해봐야겠네요.

댓글을 입력하세요

2015.11.04 16:18 – 열매맺는나무

반응형 스킨 Square를 소개합니다


헬리오스님이 추천해주신 Wallel님의 반응형 스킨 Square. 전에 사용했던 프라치노공간과 마찬가지로 담백하고 깔끔한 느낌의 스킨이다. 둘을 비교해 보자면...


1. 프라치노공간의 특징

  • 댓글과 방명록에 디스커스 적용가능
  • 글 수정, 삭제, 관리 등이 위에 아이콘으로 정렬되어 있어 편리
  • 구글애드센스(반응형) 스킨차원에서 지원
  • 유료(설치후)/ 20,000원 이상 구입자에 한해 문의사항 지원

2. 스퀘어의 특징

  • 마크다운으로 작성된 글을 보다 잘 표현해준다
  • 전체적으로 더 깔금하게 잘 짜인 디자인/ 본문에 집중하게 해준다
  • 무료

스퀘어를 설치해본 현재, 애드센스 코드만 새로 넣어주고 무리 없이 쓰고 있다. 디스커스는 차차 적용해볼 계획.

  1. BlogIcon SONYLOVE 2015.11.04 16:41 신고

    저도 스퀘어 스킨 너무 잘 사용하고 있어요!!
    이제까지 사용해본 스킨 중에 가장 맘에 드네요.. ^^;

    • BlogIcon 열매맺는나무 2015.11.04 17:14 신고

      저는 오늘 처음 적용해봤는데 깔끔하니 마음에 드네요.
      댓글 구획선이 좀 굵고 댓글과 대댓글 구분이 잘 안되는 점이 좀 아쉽긴 하지만 차차 고민해봐야겠어요. ^^

  2. BlogIcon 핑구야 날자 2015.11.04 18:00 신고

    전 그대로 사용하고 있어요 반응형이 편하긴 하더라구요

  3. BlogIcon SoulSky 2015.11.05 07:02 신고

    저도 이 스킨 사용하고 있습니다 ㅎ

댓글을 입력하세요

2015.10.22 21:51 – 열매맺는나무

프라치노공간 7.0.3을 소개합니다


지금 현재 이 블로그에 적용된 스킨이 바로 프라치노 공간 7.0.3이다. 

깔끔하고 빠르고 아름다운 스킨이다. 

오늘 아침에 바꿨는데, 현재까지 체감하고 있는 바뀐 점들은 다음과 같다.

1. 카테고리가 지원되네

전에 사용했던 버전은 카테고리가 지원되지 않아 관리>화면설정>메뉴에서 메뉴를 추가하는 편법을 사용해야 했다. 하지만 이번 버전에서는 왼쪽에 보이는 것 처럼 카테고리가 지원된다.

2. 방명록도 디스커스로

전에는 블로그 글에 댓글 달 때만 디스커스로 달 수 있었는데, 이제는 방명록에도 디스커스를 이용할 수 있다.

3. 태그가 보인다

본문 하단, 댓글 바로 위에 태그가 표시된다.

4. 공유단추

트위터, 페이스북, 구글플러스, 에버노트는 물론 포켓과 카카오스토리까지 우리나라 사람들이 즐겨 쓰는 서비스로 쉽게 공유할 수 있다. 이제 더 이상 복잡한 Add this가 필요 없다.

>> 프라치노공간 다운받기

  1. BlogIcon SoulSky 2015.10.23 04:21 신고

    이미지 1000x 667인가요? 아니면 그 이하인가요? 지금 쓰는 스킨이 사진을 1000x667로 되어 있어서 다른 스킨을 쓸수가 없네요 ㅠㅠ

  2. BlogIcon SoulSky 2015.10.23 18:15 신고

    아 무료가 아니군요?

  3. 2015.10.23 20:17

    비밀댓글입니다

  4. 2015.10.23 20:51

    비밀댓글입니다

댓글을 입력하세요

2015.01.21 21:11 – 열매맺는나무

프라치노공간 사이드 메뉴 설정 방법

이 블로그는 현재 '프라치노 공간'이라는 스킨이 적용된 상태다. 깔끔하고 보기에도 좋은 장점이 많은 스킨인데, 사용자에 따라서는 단순함이 불편할 수도 있다. 그중 하나가 바로 프라치노 공간이 사이드바와 카테고리를 지원하지 않는다는 것이다. (2015.10.22. 현재 새로 설치한 7.0.3 버전은 왼쪽에 보이는 것 처럼 카테고리를 지원합니다.)



사이드바도 카테고리도 지원하지 않기 때문에 이 블로그 왼쪽에 보이는 것 처럼 메뉴를 넣으려면 '티스토리 관리> 화면설정> 메뉴'에서 작업해 줘야 한다.  



홈, 태그, 방명록, 글쓰기, 관리자 메뉴를 추가하려면 '기본메뉴'에 들어가서 선택을 한 뒤 오른쪽 '추가' 단추를 누르면 그 오른쪽에 추가된 메뉴가 나타난다. 

카테고리를 나타내려면 카테고리를 선택하고 '메뉴명'을 선택한 다음 '추가'단추를 누른다. 

설정을 마치면 맨 위 오른쪽에 있는 '저장'단추를 꼭 눌러줘야 한다. 

  1. BlogIcon 투레이먼드 2015.01.23 16:07 신고

    안녕하세요! 저번에 질문 댓글 달았던 사람이에요..ㅠㅠ 이렇게 메뉴 추가를 하고 나서 글을 쓰면, 전체 글에서는 확인이 되는데, 메뉴 목록별로 글이 나눠지지가 않아서 질문드려요..! 어떤 메뉴를 누르든 전체 검색결과 이렇게 뜨고, 메뉴 안에는 제 글이 안들어가있는거 같아서요! 이건 어떻게 해결하는지 아시나요?

    • BlogIcon 열매맺는나무 2015.01.23 18:21 신고

      안녕하세요. 많이 불편하시겠네요.
      전 잘 되고 있습니다. 도움이 되어 드리지 못한 것 같네요.
      혹시 카테고리와 카테고리 이름을 잘 맞춰서 추가해 주셨나요?

  2. BlogIcon Brownle 2015.02.12 02:05 신고

    열매맺는나무님 카테고리 상단에
    블로그명 위에 프로필 이미지 표시되는거 어떻게 설정하셨나요? ^-^

    • BlogIcon 열매맺는나무 2015.02.12 08:55 신고

      프라치노님의 재킷, 이미지커버에 관한 글을 참고했습니다. ^^
      http://kaniwarispace.tistory.com/entry/image-cover
      http://kaniwarispace.tistory.com/entry/jacket

  3. BlogIcon 배배 2015.02.21 15:43 신고

    저도... 카테고리 설정하면 글이 연결이 되지 않아서요..
    스킨버전이 최신인가요?
    댓글도 안보이고.. 휴.. 기본설치에서 소스 수정 많이 되야하는 건가요?

    • BlogIcon 열매맺는나무 2015.02.21 17:56 신고

      반갑습니다. ^^
      카테고리 설정하면 글이 연결되지 않는다는 것은 어떤 현상인지 잘 짐작되지 않네요. 글 목록이 뜨지 않는다는 뜻인가요?

    • BlogIcon 배배 2015.02.21 19:33 신고

      해결했답니다.. 제가 티스토리에서 이제 막 시작한 유저라서 설치시에 폴더가 안올라간다는 것을 몰랐어요. ㅎㅎ 폴더안의 파일들까지 모두 업로드하니까 잘 나오는 것 같습니다 ^^;

    • BlogIcon 열매맺는나무 2015.02.21 22:26 신고

      잘 해결되었다니 다행입니다.
      앞으로도 자주 뵈어요. ^^

  4. 2016.02.18 14:29

    비밀댓글입니다

    • BlogIcon 열매맺는나무 2016.02.19 05:51 신고

      제가 현재 이 스킨을 사용하지 않아 확실하지는 않습니다.
      왼쪽 맨 아래 세 개 메뉴를 모두 지우려면
      설정>스킨편집>html에 가셔서 89번째 줄을 찾으세요.
      거기서
      <nav class="submenu">
      <ul>
      <li><a id="search-button" href="#">검색</a></li>
      <li><a id="info-button" href="#">에 관하여</a></li>
      <li><a class="guestbook-button" href="">안부 남기기</a></li>
      </ul>
      </nav>

      를 찾아서 지우시면 될거에요.
      (혹시 만약의 경우에 대비해 다른 곳에 복사해두고 해보세요. ^^)

댓글을 입력하세요

2014.12.06 05:45 – 열매맺는나무

프라치노공간의 댓글창과 공유단추, 푸터

지난 11월, 블로그 스킨을 '프라치노공간'으로 바꾼 다음부터 댓글창과 공유단추가 조금 바뀌었다. 

1. 댓글창 - 티스토리와 Disqus 댓글창을 하나로

처음 보이는 것은 일반 티스토리 댓글창이지만, '댓글 작성'과 '트랙백'사이에 보이는 'DISQUS'를 누르면 Dusqus댓글을 쓸 수 있도록 다음 사진과 같이 바뀐다. Disqus나 다른 소셜 계정으로 로그인 해서 댓글을 남기면 된다.


<관련글>

- 2014/08/08 블로그 댓글 운영방식 변동

2013/12/22 디스커스(Disqus) 댓글 달기 

2013/12/14 디스커스Disqus 댓글 적용      

2. 공유단추

Addthis 공유단추를 쓰지 않게 되었다. 그것은 스킨 자체에서 공유단추를 제공하고 있기 때문이다. 모노톤으로 글 아래 오른쪽에 붙어 있어 눈에 확 뜨이지는 않지만, 오히려 그것이 거슬리지 않게 느껴질 수도 있다는 생각이 들었다. 하지만 무엇보다 Addthis와는 달리 우리 실정에 맞는 연결을 제공해준다는 점이 마음에 들었다. 


데스크탑이나 노트북 같은 넓은 화면에서는 다음 사진처럼 보인다. 


댓글창 바로 오른쪽 위에 있는데, 트위터, 페이스북, 카카오스토리, 에버노트, 구글 플러스로 담아갈 수 있게 되어 있다.

스마트폰 처럼 좁은 화면에서는 다음 사진처럼 보인다. 

단추가 직접 보이지 않고 '공유하기'라는 글씨만 보이는데, 이 공유하기를 터치하면 오히려 더 많은 공유단추가 보인다. 라인은 지금 이용하지 않고 있어 잘 모르겠지만, 이 카카오스토리로 담아가기는 꽤 효과를 보고 있다. 카카오스토리에는 보통 육아 사진이 많이 올라오는데, 그 틈에서 미술교육에 대한 내 블로그 글을 발견하는 것은 신기한 경험이었다. 


혹시 Addthis가 궁금하시다면.. >> 2013/12/16 요건 뭐에 쓰는 물건이지? - 애드디스(add this) 공유단추


3. 푸터(Footer)

이 블로그 맨 아래에 보면 위 그림과 같은 막대가 보인다. 오른쪽 단추 4개는 각각 티스토리 홈, 방명록, 태그 클라우드로 연결되고, 맨 오른쪽 단추를 누르면 맨 위로 이동한다. 



  1. BlogIcon 쭈니러스 2014.12.07 23:12 신고

    프라치노공간 스킨은 티스토리 기본 제공 스킨인가요?^^

  2. BlogIcon SoulSky 2014.12.08 09:50 신고

    오 이거 깔끔하네요..ㅎㅎ 저도 이걸로..? ㅎㅎ

    • BlogIcon 열매맺는나무 2014.12.08 14:34 신고

      솔스님, 안녕하세요~^^
      이 스킨 깔끔하면서도 딱딱하지 않고 좋아요. 그런데 공지나 카테고리가 지원되지 않는다는 단점이 하나 있어요. 전 공지 태그가 들어간 글을 검색해서 띄워주는 방식으로 왼쪽에 넣어주긴 했습니다.

  3. BlogIcon 세오APL 2014.12.08 23:26 신고

    저도 다음에 도전해볼 스킨이 바로 요것이랍니다.
    아직은 스킨 적용이 너무 어려워서 지금 적용해둔
    고양이와 참치님 스킨도 며칠이나 걸렸는지 ㅠ.ㅠ
    아직도 다시 생각해보면 막막해요. 조만간
    HTML 공부라도 하기 위해 학원을 끊어볼까 한답니다. ^^

    • BlogIcon 열매맺는나무 2014.12.09 04:50 신고

      세오님도 이 스킨이 마음에 드셨군요! ^^
      html 정식으로 차근차근 배워보면 좋을 것 같아요.
      세오님은 블로그 만든거 티스토리가 처음은 아니시지요? 글 솜씨도 그렇고 운영하는 것도 내공이 느껴집니다.

  4. BlogIcon 쭈니러스 2014.12.14 01:16 신고

    댓글창이 하나로 묶여있으니 더욱 깔끔하네요^^

    • BlogIcon 열매맺는나무 2014.12.14 12:02 신고

      그렇지요 쭈니러스님?
      눈에 잘 뜨이지 않을 수도 있지만 덕지덕지 달아 놓은 느낌이 들지 않아 참 좋습니다. ^^

댓글을 입력하세요

2014.11.20 00:02 – 열매맺는나무

블로그 스킨 교체 - 프라치노 공간



블로그 스킨을 바꿨습니다. 또. 

Zet님께서 '티스토리 반응형 스킨 장단점 및 추천스킨 TOP5(http://bloggertip.com/4439)'라는 글에서 소개하신 프라치노님의 '프라치노 공간'이라는 반응형 스킨입니다. 

아직 완벽하게 설정을 마치진 않았지만, 깔끔한 간결함이 마음에 듭니다. 


** 원래 이 스킨은 최신 글을 보여주게 되어 있습니다. 제 블로그는 첫 화면에 전체 글 열 개가 보이도록 되어 있습니다. 블로그 메인 화면이 이렇게 나오게 하려면 skin.html을 수정하면 됩니다. 이 부분은 Readiz님의 '티스토리 블로그 메인화면을 /category로 리디렉트 시키기' 글을 참고했습니다.


  1. BlogIcon madvanist 2014.11.22 10:31 신고

    앨범형 스킨이네요 저도 정말 심각하게 엘범형 스킨에 대해 생각하고 있는데 왜 티스토리에서는 안해줄까요 ㅠㅠ

  2. BlogIcon 세오APL 2014.11.30 20:37 신고

    저도 Zet님 블로그에서 스킨 추천 포스팅을 보았습니다. 전 어찌저찌 해서 고양이와참치님이 배포하신 스킨을 적용시켰는데 아직도 저에게는 티스토리가 어렵게만 느껴지네요 ㅠㅠ 스킨 적용만 틈틈이 해서 일주일 걸린 것 같아요. 앞으로 계속해서 운영해나간다면 좀 더 손쉽게 스킨을 교체해볼 수 있겠죠? 지금 적용하신 앨범형 스킨도 심히 탐이 납니다. 레이아웃도, 디자인도 참으로 읽고 싶게끔 만드는 스킨이네요 ^^

    • BlogIcon 열매맺는나무 2014.12.01 14:31 신고

      세오님 블로그 가 보고 두 번 놀랐어요.
      글도 잘 쓰시고 시원시원 잘 읽히는 디자인에 놀라고 두 번째는 그런데도 불구하고 만든지 얼마 안된 새로운 블로그라 놀랬습니다.
      많이 반성했구요, 좀 더 열심히 해야 겠구나 생각했습니다.

  3. BlogIcon 首尔姐姐 2014.12.02 00:36 신고

    우아 정보를 항상 주시는....!! 깔끔하고 좋네요!

    • BlogIcon 열매맺는나무 2014.12.02 07:27 신고

      깔끔하면서도 어딘지 아늑한 느낌이라고 말씀들 해주셔서 기쁩니다.
      방배동 언니님께도 도움 되면 좋겠네요. ^^

  4. BlogIcon Zet 2014.12.04 10:40 신고

    산뜻하고 참 예뻐요. 만일 저도 반응형 스킨을 적용한다면 요놈으로 입혀보고 싶어요! ^-^

  5. BlogIcon 首尔姐姐 2014.12.23 02:54 신고

    저도 받아놓고 계속 못하고있어요. 늘 빠르시네요!!

  6. BlogIcon 집슬이 2015.08.09 22:46 신고

    안녕하세요. 저도 프라치노 님 스킨 받아서 지난 번부터 엄청 끙끙대고 있는사람입니다. 티스토리도 처음이고 HTML 상식이 전무해서 그런지 몰라도, 프라치노님이 올리신 "설치하기"의 단계를 다 밟았는데도 블로그가 이상하네요. ㅠㅠ 그래서 검색하다가 여기까지 왔는데 혹시 답변해주실 수 있으면 도와주셨음 좋겠어요~ 1. 우선 왼쪽에 카테고리요. 화면설정-메뉴추가에서 설정하는 거 아닌가요? 제가 원하는 메뉴를 입력했는데, 글 관리-카테고리 설정이 또 따로 있네요 ㅠㅠ 똑같이 맞춰야 하는 건가요?
    2. 또 열매맺는나무 님 블로그 오른쪽 맨 상단에는 글쓰기(연필 아이콘)- 관리- 로그아웃을 누를 수 있게 되어있는데 제껀 그렇지가 않아요. 이런 부분은 어디서 바꿔야 하나요?
    3. 프라치노님이 재킷 사진 바꾸는 거 설명해놓으신 게 있는데 저한텐 너무 부족하네요..ㅠㅠ 사이즈에 맞는 이미지를 찾아서 어디에 업로드하면 바꿀 수 있을까요?
    너무 기초적이고 무식한 질문일지 알지만. 그래도 저도 꼭 이 스킨으로 티스토리 시작해보고 싶어서 염치 불구하고 이렇게 남깁니다.. 시간 나실 때 답변해주시면 감사하겠습니다~

  7. BlogIcon 열매맺는나무 2015.08.10 22:13 신고

    안녕하세요 Younsle님, 많이 불편하시겠어요.
    1. 카테고리는 '프라치노공간 사이드메뉴 설정 방법'이라는 글을 참고해보세요. >> http://www.fruitfulife.net/1185
    2. 블로그 오른쪽 위에 메뉴 문의하셔서 Younsle님 블로그에 가봤는데, 프라치노 스킨이 아니던데요? 루덴스님이 만드신 스킨이었어요. 스킨이 달라 그런 것 아닐까요?
    3. 이미지는 '관리>꾸미기>HTML/CSS편집>파일업로드' 에서 하는 것으로 알고 있습니다.
    문제 빨리 해결되어 편하게 블로그 하시기 바랍니다. ^^

댓글을 입력하세요

2014.08.03 16:42 – 열매맺는나무

FastBoot스킨 수정 - 폰트추가, 소제목꾸미기, 인용구박스 수정

FastBoot스킨 수정 - 폰트추가, 소제목 및 인용구 박스 수정

Readiz님의 Fast Boot 스킨은 그냥 써도 멋지지만, 나눔고딕을 기본 서체로 하고 소제목 표시와 인용구 박스등 소소한 것 몇 개를 수정해 내게 맞게 고쳐봤다.

1. 폰트 추가



지금 이 블로그의 기본 서체는 '나눔고딕'이다. 그렇게 하기 위해서는 꾸미기>>HTML/CSS편집 에서 CSS를 살펴본다. 

CSS 맨 처음에 font-family에 빨간 네모로 표시된 것 처럼 "나눔고딕"이라고 넣어주면 된다.



2. 소제목 수정

지금은 소제목 맨 앞에 있는 진회색 직사각형이나 밑줄이 가늘지만, 원래는 각각 10px, 2px로 상당히 두꺼웠다.

CSS에서 'article'이라고 표시된 부분을 찾는다. 7,800번째 줄 쯤 거의 아래쪽에 있다.


소제목을 수정하기 위해서는 'h1, h2, h3, h4...'로 된 부분을 찾는다. 

눈치껏 살펴보면, border-bottom은 밑줄, border-left는 소제목 앞의 회색 직사각형임을 알 수 있다.

이것을 각각 마음에 드는 두께로 고쳐준다. 이 블로그는 4, 1로 바꿨다.


 

3. 인용구 박스 수정

지금은 인용구 박스(이렇게 부르는 것이 맞는 것인지는 모르겠다. 하지만 어떻게 불러야 할지 몰라 임의로 지어 불러본다)가 파란색과 연한 하늘색으로 되어 있지만, 원래는 겨자색+회색으로 내 취향과는 맞지 않았다. 


위 그림에서 보는 바와 같이 'article blockquote'라고 쓰여있는 부분으로 가서 배경이 되는 background-color와 박스 왼쪽 앞부분의 강조색을 나타내는 border-left를 찾아 마음에 드는 색과 두께로 바꾼다. 


색상은 HTML 컬러 코드에서 마음에 드는 색을 찾아 코드를 복사해 붙이면 된다. 아래는 소개한 페이지에서 색상을 고를 수 있는 컬러 차트와 컬러 픽커다. 






이렇게 바꾸고 난 뒤의 인용구 박스 모습은 다음과 같다.






  1. BlogIcon sky@maker.so 2014.08.03 20:50 신고

    윈도도 그렇고 가끔 워드 작업을 할 때도 그렇고... 폰트를 바꾸지 않고 그냥 쓰게 되더라구요.

    살짝만 바꾸면 분위기가 전혀 달라질텐데 말이죠. ㅎㅎㅎ

    • BlogIcon 열매맺는나무 2014.08.03 21:55 신고

      나눔고딕에 익숙해지다 보니 다른 글씨를 보면 깔끔해 보이지가 않아서요.
      가장 가독성이 좋은 서체가 나눔고딕이라하더군요. ^^

  2. BlogIcon 쏘쿠베 2014.08.03 21:04 신고

    어렵지만.. 잘하면 깔끔하니 보기 좋게 되겠어요^0^

    • BlogIcon 열매맺는나무 2014.08.03 21:56 신고

      지금은 이렇게 바꾼 상태랍니다.
      무식하지만 용감하긴 해서 그냥 들이대고 해봅니다. 눈치만 늘어나요. ㅎㅎ

  3. BlogIcon Capella★ 2014.08.04 02:31 신고

    저도 이 스킨으로 바꿌는데 편하고 좋은것 같아요!
    저도 폰트랑 이런거 바꾸고싶었는데 찾아보니 어렵고 귀찮아서 잘 안바꿨는데, 한번 바꿔봐야겠네요 :)
    좋은 정보 감사합니다!

    • BlogIcon 열매맺는나무 2014.08.04 10:10 신고

      네, 카펠라님.
      이 Fast Boot이 반응형이면서도 고전적인 블로그 맛도 나 좋아요.
      이것 저것 바꾸고 싶은 것 꽤 있지만 그런 쪽으로 까막눈이라 그저 용감하게 도전해보고 있어요. ^^

  4. BlogIcon 하늘다래 2014.08.04 09:04 신고

    티스토리 처음 접근하면 힘든게 소스 수정인데,
    하나씩 소개해주시면 많은 분들에게 도움될 것 같군요 ^^
    그나저나 요즘 이 스킨 적용하시는 분들이 많은 듯!
    반응형이 대세인가봐요 ^-^

    • BlogIcon 열매맺는나무 2014.08.04 10:12 신고

      하늘다래님, 오래간만이에요. ^^
      요즘 모바일로 보는 분들이 많아 신경 쓸 수 밖에 없는데, 반응형 스킨을 사용하면 어떤 기기로든 최적의 모습을 보여주니 참 좋더군요.
      이렇게 적어 올리는 것은 제가 하도 모르다 보니 다시 찾으러 다니지 않기 위해서 랍니다. 비슷하게 고민하는 분들께 도움 된다면 더욱 기쁘겠구요. ㅎㅎ

댓글을 입력하세요

2014.07.28 18:39 – 열매맺는나무

블로그 스킨 바꿨습니다 / Readiz님의 Fast Boot v.1.6.1


블로그 스킨을 바꿨습니다. 

그동안 잘 쓰던 마크쿼리님의 스켈레톤 스킨에서 Readiz님의 Fast Boot v.1.6.1 로 바꿨습니다. 전에 쓰던 것도 별 문제 없이 잘 쓰고 있었지만, 이름 그대로 빠른 로딩과 깔끔하고 짜임새 있어 보이는 모습에 그만 반하고 말았습니다.


다음에 보이는 그림은 블로그 첫 화면을 캡쳐한 모습인데요, 티에디션 화면이 아닙니다. 스킨에서 자체 지원하는 갤러리 화면 입니다. 

이 첫 화면에서는 사이드 바가 보이지 않습니다.




 

아래 화면은 어떤 특정 글을 선택해 들어간 모습입니다. 

여기서는 사이드바가 보입니다. 


왼쪽 옆에 보이는 화살표를 선택하면, 마치 구글 앱처럼 화면이 오른쪽으로 밀리면서 메뉴가 보입니다. 데스크 탑에서는 잘 느껴지지 않지만 스마트 폰이나 태블릿 같은 모바일 환경에서는 꽤 편리합니다. 


잘 아시다시피, 블로그 검색은 오른쪽 맨 위에 보이는 돋보기가 들어있는 동그라미를 클릭해서 하시면 됩니다. 블로그 맨 아래 오른쪽 화살표는 '맨 위로'돌아가는 단추입니다.





일단 적용해서 사용 보니, 반응형 스킨을 처음 쓰시는 분들께는 먼저 쓰던 스켈레톤 보다 이 Fast Boot 스킨을 권해드리고 싶습니다. 

전에는 일일이 다 내 마음에 들도록 조절해야 하는 것들이 있는데, 이 스킨은 적용 하자마자 별 달리 손 댈 일 없이 바로 사용 가능하네요. 제가 한 번 써 본 경험이 있어 그런지 몰라도 적응하기 훨씬 빠른 느낌이 들었습니다. 


두 스킨 모두 멋진 스킨입니다만, 이번 Fast Boot가 접근하기 좀 더 쉬운 느낌입니다. 

내 마음대로 조절해 사용하는 것이 좋은 분들은 시원한 느낌의 스켈레톤 스킨을, 

잘은 모르지만 반응형 스킨도 사용해 보고 싶다거나 짜임새 있는 느낌의 스킨을 좋아하신다면 이 Fast Boot 스킨을 써 보시는 것도 좋겠네요. 


  1. BlogIcon sky@maker.so 2014.07.28 21:26 신고

    저도 스킨을 바꾸려고 생각은 많이 했습니다만.... ㅎㅎㅎ

    생각만 하다가 끝나고 말았습니다. ^^

    공부해야할 것이 참 많더라구요.

    • BlogIcon 열매맺는나무 2014.07.28 22:01 신고

      ㅎㅎ 스카이메이커님과 전 반대네요.
      스킨을 바꿀 생각도 없었고 오히려 자꾸 스킨이나 바꾸는 짓은 하지 말아야지... 했었는데 또 이렇게 덜컥 바꿔버리고 말았습니다. 이것도 습관인 것 같습니다. 내실을 기해야 하는데 말이죠.

  2. BlogIcon SoulSky 2014.07.29 07:57 신고

    저는 1.5쓰고 있어요 ㅎ

    • BlogIcon 열매맺는나무 2014.07.29 11:44 신고

      소울스카이님 블로그에 다녀왔습니다. 파란색 막대도 시원해 보이고 좋군요.
      저도 막대와 왼쪽 단추, 아래 푸터 색깔 바꾸고 싶은데 어떻게 해야 될까요?
      그저 미루고만 있습니다. ^^

  3. BlogIcon 首尔姐姐 2014.07.30 11:52 신고

    skin을 잘 바꾸시네요! 전 골라놓고도 이래저래 엄두를 못내고 버티고있어요 .. 많은 블로거들이 반응성 스킨도 시도해보고있는데요... 아웅 게으른가바요

    • BlogIcon 열매맺는나무 2014.07.30 20:25 신고

      내실을 쌓아야 하는데요. ^^;
      어떤 스킨 고르셨어요?
      나중에 달라질 방배동 언니 블로그 모습이 궁금합니다. ^^

  4. BlogIcon 首尔姐姐 2014.08.14 00:51 신고

    ㅠㅜ 전 매일 헤매고있어요 큰일에요 흑 블로그형님 흑

    • BlogIcon 열매맺는나무 2014.08.14 06:46 신고

      괜찮으면 이 스킨 한번 써 보세요. 별로 고칠 것도 없이 그냥 적용되더라구요. ^^
      ...라고 썼지만... 블로그 다녀왔습니다. 멋지게 바꾸셨던데요!
      대단하셔요. ^^

댓글을 입력하세요

티스토리 툴바