| 비영리단체를 위한 사회공헌 미디어교육 입니다.

Blog+SNS,티스토리 완전정복IT ProBono @ Daum 2강 교재

2강 미리보기

1) 티스토리 가입 및 계정 세팅

2) 카테고리 설정과 스킨 선택

3) HTML/CSS 레이아웃 설정

4) 플러그인 설정과 사이드바 꾸미기

5) 티스토리 본문이해와 티에디션(첫화면) 설정

6) 모바일 스킨 설정

7) 팀블로그 세팅 (여럿이 함께)

티스토리로 우리 기관 파워블로그 만들기

www.tistory.com

#container

#sidebar

#footer

#content

.article

#header

블로그 전체를 둘러싸는 가장 큰 테이블

블로그의 머릿말 부분, 핵심적인 인상을 주는 영역

블로그의 왼쪽, 또는 오른쪽 메뉴 공간

본문영역, 헤더, 사이드바, 푸터 영역은 고정이지만 본문은 상시 바뀜

본문 영역 안에서도 컨텐츠(텍스트, 이미지...)가들어가는 영역

블로그 하단 부분. 보통 기관의 정보를 입력함.

블로그 구조 이해

IT ProBono

IT ProBono

티스토리 가입 및 계정 세팅

티스토리는 ‘바로’ 가입할 수가 없고, ‘초대권’이 필요합니다.

1 | IT ProBono @Daum 팀에서 ‘초대권’을 여러분의 ‘메일’로 보내드리면2 | 메일을 확인해서 ‘초대권’을 수락해요. 3 | 가입화면을 따라서 가입정보를 입력하시면 완료!

#Special- 초대권을 받았던 ‘메일’이 티스토리의 ‘아이디’가 됩니다.

- 티스토리는 계정당 5개까지 블로그를 만들 수 있습니다.

01

#1. 티스토리 관리자 화면으로 가는 방법은 http://0000.tistory.com/admin 을 입력하시거나 본문에서 단축키 ‘Q’ 버튼을 누르시면 되요!

#2. 관리자 화면 > 환경설정 > 기본정보 현재 블로그의 ‘기본정보’ 작성은 매우 중요해요! 블로그 타이틀, 설명, 주소설정 등 중요정보를 입력합니다.

‘블로그 이름’과 ‘설명’은 검색엔진에 색인되고 노출되기 때문에주요 키워드와 내용을 담아 잘 작성해 주셔야 합니다.

1차 주소는 블로그의 원주소라고 할 수 있구요. 변경 가능해요.2차 주소는 도메인을 따로 구입한 이후에 ‘연결’할 수 있습니다. 개별글 주소는 ‘숫자’로 설정하시는 것이 관리하기 좋습니다.

티스토리 계정 설정으로 블로그의 정체성을 규정합니다!

카테고리 설정과 스킨 꾸미기

블로그 데이터를 ‘폴더’별로 정리하도록 ‘카테고리’가 있습니다.맨 위에 있는 최상위폴더는 고정되어 있고 추가가 되지 않아요.최상위 폴더를 선택하고 ‘추가’ 버튼을 누르면 1차 폴더가, 1차 폴더를 선택하고 ‘추가’버튼을 누르면 2차 폴더가 생겨요.2차 폴더까지 만들 수 있구요. 폴더들을 생성한 후에는드레그 앤 드럽으로 자유롭게 위치 이동이 되어 폴더별 글 관리하기 좋아요. 폴더 수정 및 삭제도 가능합니다!

모든 카테고리 설정이 완료한 이후에는 반드시 ‘설정’을 클릭해주세요. 그렇지 않으면 설정전 기본값으로 돌아가버린답니다!

카테고리의 ‘스타일’, ‘글자색’ 등을 조정하실 수 있어요!

글자길이는 ‘40자’까지 설정가능해요! 그 밖에 기능들을 조정해보세요!

카테고리별 발행도 가능한데5강에서 더 자세히 소개할께요!!

# 관리자 화면 > 글관리 > 카테고리 설정

02

현재 사용 중인 ‘블로그 스킨’을 알려주는 곳입니다.‘스킨위자드’를 통해서 다양한 배경과 사이즈조절을 간단하게할 수도 있지만 IT ProBono에서는 ‘HTML/CSS’로 조정할 거예요.나중에 ‘스킨제작’에 관심있는 분들은 ‘스킨등록’을 이용해서나만의 스킨을 등록하고 다른 유저들과 공유해도 좋아요!

티스토리의 스킨은 계속 업데이트가 되고 있어요!IT ProBono 실습에서는 ‘기본 스킨’을 공동으로 선택합니다.HTML/CSS 코드를 이해하고 블로그 구조를 배우기 좋거든요!‘기본 스킨’은 2단형 > 4번째 줄에 있습니다.보라색 헤더를 가지고 있는 블로그에요!

# 관리자 화면 > 꾸미기 > 스킨

HTML/CSS 레이아웃 설정

직접 블로그 레이아웃을 CSS에서 조정해보아요!4가지만 설정해주시면 됩니다.

#Container > 960#Content > 700 #Sidebar > 240.article > 660

Ctrl+F 를 이용해서 ‘레이아웃’을 찾아보시면 다음과 같은 친구들이 나옵니다~

반드시 ‘저장’해주세요! 안그러면 ㅠㅠ# 관리자 화면 > 꾸미기 > HTML/CSS

03

블로그의 ‘Header’ 부분에 들어가는 메뉴를 설정합니다.카테고리가 블로그의 ‘내용적 폴더’ 역할을 한다면Header 부분 메뉴는 블로그 구조의 ‘기능적 폴더’에 가깝습니다.텍스트로 표기하면 좋은 메뉴들을 이곳에 정리하시면 좋습니다.메뉴명과 위치 조정은 자유롭게 하실 수 있습니다.

# 관리자 화면 > 꾸미기 > 화면 설정 > 메뉴

titleHOME | 사진모음 | 여행팁모음 | 오시는 길

메뉴를 설정하신 후에는 역시 반드시 ‘저장’ 클릭이요!그렇지 않으면 반영이 되지 않아요!

플러그인 설정과 사이드바 꾸미기

# 관리자 화면 > 플러그인 > 플러그인 설정

플러그인을 통해 다양한 기능을 떼었다 붙였다 할 수 있습니다. 자유로운 사이드바의 메뉴를 위해 실습에서는 플러그인 설정 > 관리 및 통계 로 들어가서1. 빈 줄 표시 (10px)로 설정해서 활성화 2. 태그 입력기를 설정하고 ‘저장’버튼 누르세요!

04

# 관리자 화면 > 꾸미기 > 사이드바 사이드바를 설정하신 후에는 역시 반드시 ‘저장’ 클릭이요!그렇지 않으면 반영이 되지 않아요!

태그 입력기의 ‘편집’ 버튼을 누르면HTML 소스코드 복사 가능해서 다양한 사이드 메뉴를 만들 수 있습니다!

사용자 모듈에 저장을 체크하면이 컨텐츠를 언제든지 사이드바에서떼었다 붙였다 자유롭게 구성할 수 있어요!

사이드바의 ‘모듈’은 자유롭게 배치 가능해요-다양한 메뉴들을 구성하실 수 있어요!

# 관리자 화면에서 ‘글쓰기’ 선택

#1. 글쓰기 전에 먼저 ‘폴더선택’ 해주세요!

#2. ‘서식’ 작성 기능도 있답니다! (설명참고)

#5. 티스토리만의 공개설정 (설명참고)

#3. 자주쓰는 문서양식, 서식을 불러올 수도 있어요!

#6. CCL을 신경쓰면 멋져요!

#7. 다음뷰랑 연결하면 좋아요!

#7. 모든 글은 ‘임시저장’ 됩니다!

#4. 검색 키워드를 위한 태그작성은 꼼꼼휘!

티스토리 본문이해와 티에디션(첫화면) 설정 05

# 관리자 화면 > 화면설정 > 티에디션 (시작하세요.) 그러면 아래와 같이 메인화면에 반영됩니다.

티에디션을 시작하면 항상 메인 화면 오른쪽 상단에 ‘티에디션’ 편집화면으로 가는 버튼이 있어요.편집모드로 넘어가면 ‘아이템, 글선택, 디자인’을 설정할 수 있는 위젯이 생기고메인 화면을 신문 편집하듯 아이템별로 다양한 컨텐츠와 디자인으로 수정할 수 있습니다.2강에서는 ‘시작’만 세팅하고 본문 컨텐츠가 조금 쌓인 이후에 편집하는 시간이 있습니다.

모바일 스킨 설정

# 관리자 화면 > 꾸미기 > 모바일웹 스킨

티스토리는 풍부한 모바일웹 스킨 20여가지를 제공하고 있습니다.사용자들이 모바일로 접속했을 때 뜨는 화면을 이곳에서 설정하면 됩니다.취향과 기능에 맞게 모바일웹도 다양하게 세팅해보세요! 세팅을 완료한 이후에는 화면 맨 아래에 있는 ‘적용’을 꼭 클릭해주세요!

모바일웹 적용을 확인하려면 아래와 같이 접속하세요!

http://0000.tistory.com/m

06

# 관리자 화면 > 네트워크 > 초대관리 > 팀블로그 관리 티스토리를 사용하는 유저들은 ‘함께’ 공동 블로그 운영이 가능해요.관리자, 편집자, 필자로 나눠서 권한 부여도 가능합니다.다양한 웹진 및 팀블로그를 활용한 매체를 기획해보세요

팀블로그 세팅 (여럿이 함께) 07

본 강의안은 IT ProBono@Daum 워크숍 교재로 제작되었으며,‘저작자(IT ProBono@Daum/SMLab)’을 표시하고비영리/동일조건(변경금지)로 공유가능합니다.

감사합니다. 모든 문의와 의견은,

http://itprobono.tistory.com