웹 디자이너를위한 Tumblr 가이드

이 기사는 213 호 of .net magazine-웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지입니다.

“드디어 블로그를 시작할 해”라고 몇 번이나 말했습니까? 많은 사람들과 마찬가지로, 가장 어려운 클라이언트를위한 사이트를 디자인하는 길고 어려운 프로세스를 시작합니다. 즉, 실제로 유료 클라이언트가 방해를받을 때마다 사이트가 백 버너로 이동하는 것을보기 만하면됩니다.



마침내 디자인을 완성하면 블로그를 만들고 개발하는 과정이 시작됩니다. 몇 주 (또는 몇 달) 후에 마침내 시작 버튼을 누를 때입니다. 네 번째와 다섯 번째의 통찰력 있고 훌륭한 게시물 사이 어딘가에이 블로그를 최신 상태로 유지하려면 엄청난 양의 작업이 필요합니다.



개인적으로 저는 수년에 걸쳐 한 번 이상 그 정확한주기에 갇혀 있음을 발견했습니다. 2009 년 초에 저는 개인 블로그로 달성하고자하는 것을 정확히 재고해야한다는 것을 깨달았습니다. 일주일에 몇 번 긴 블로그 게시물을 작성한다는 생각은 놀랍게 들리지만 제게는 현실적이지 않았습니다. 나는 이미 트윗을하고 있었지만, 내가 정말로 필요했던 것은 짧고 직접적이며 중요한 게시물을 조금 더 공유 할 수있는 능력이었습니다. 단순함에 대한 나의 검색은 나를 직접 텀블러 .

Facebook에서 모든 사진을 비공개로 설정하는 방법

시작하기

2009 년 4 월 6 일에 계정에 가입하고 게시를 시작했습니다. Tumblr의 Theme Garden을 사용하여 Tumblr에 테스트 드라이브를하면서 함께 살 수있는 기본 테마를 선택했습니다. 플랫폼의 단순성은 서버에 블로깅 소프트웨어를 설치하는 것에 대해 걱정할 필요가 없음을 의미했습니다. 디자인, 문화, 테크놀로지, 비즈니스에 대한 콘텐츠를 기획하고 개인적인 생각과 의견을 모으는 데 모든 노력을 기울였습니다.



거의 2 년 후 저는 Tumblr에서 블로깅을 계속해서 내 사이트에 600 개에 가까운 게시물을 올렸습니다. www.jonathanmoore.com : 하루 평균 0.85 건 오늘 저는 단순함이 게시물의 일관성을 유지하는 데 도움이되었음을 깨달았습니다.하지만 Tumblr의 사람들 네트워크는 플랫폼에 대한 저를 계속 흥분시킵니다. Tumblr는 일반적인 블로그를 단순화하여 블로깅을 매우 쉽게 만듭니다. 전 세계 수백만 명의 사람들이 자신이하고, 사랑하고, 찾고, 만드는 일을 공유하고 있습니다.

Tumblr 블로그는 내부에 들어가면 놀라운 유연성을 제공합니다.

Tumblr 블로그는 내부에 들어가면 놀라운 유연성을 제공합니다.

Tumblr의 핵심에는 대시 보드에 게시 할 수있는 8 가지 게시물 유형 (텍스트, 사진, 인용문, 링크, 채팅, 오디오, 비디오 및 답변 된 질문)이 있습니다. 이것은 당신이 찾거나 만든 모든 것을 공유 할 수있게 해줍니다. 동영상을 게시하는 경우 동영상 자체가 주요 주제이므로 선택적인 캡션을 추가하여 맥락, 통찰력 또는 세부 정보를 제공 할 수 있습니다. 단일 게시물에 텍스트, 이미지 및 비디오가 조합 된보다 일반적인 블로그 게시물을 만들 수있는 텍스트 게시물을 제외하고는 다른 게시물 유형에도 동일하게 적용됩니다.



Tumblr는 게시물 유형을 단순화 할뿐만 아니라 블로그에 게시하는 다양한 방법을 제공합니다. 개인적으로 저는 대부분의 경우 대시 보드를 사용하는 경향이 있지만 블로그에 콘텐츠를 게시하는 다른 방법이 많이 있습니다.

  • 웹 서핑을하는 동안 브라우저에서 직접 게시 할 수있는 북마크릿
  • iPhone, BlackBerry 및 Android 용 모바일 애플리케이션
  • 휴대폰에서 직접 또는 이메일을 통해 텍스트, 사진, MP3 또는 비디오를 게시하는 정교한 이메일 게시
  • 수신자 부담 번호가있는 발신 오디오 게시물
  • 다른 많은 타사 응용 프로그램 ( www.tumblr.com/docs/en/apps )

Tumblr에 게시하는 다양한 방법에 대한 자세한 내용은 www.tumblr.com/goodies .

커뮤니티

물론 블로그를 업데이트하는 방법으로 간단히 Tumblr를 사용할 수 있지만 풍부하고 매력적인 Tumblr 커뮤니티를 놓치고있을 것입니다. 흥미롭고 영감을주고 같은 생각을 가진 소수의 사람들을 따라 가면 진정한 재미가 시작됩니다. 블로그가 적절한 팔로어를 구축하면 좋아요 및 리 블로그와 함께 게시물이 플랫폼 전체에 얼마나 빨리 퍼질 수 있는지 확인하는 것은 놀랍습니다.

Tumblr에서 잘 알려진 사람들을 팔로우하는 것 외에 기본 제공 디렉토리는 플랫폼에서 새로운 사람들을 발견하는 좋은 방법입니다. 이 디렉토리는 디자이너, 개발자, 기업가, 신생 기업, 건축, 비영리 및 여행을 포함한 광범위한 주제를 다루는 거의 50 개의 카테고리로 나뉩니다. 커뮤니티 추천 블로그를 검색하는 데 한두 시간을 보내면 곧 시작점으로 따라갈 수있는 훌륭한 사이트 그룹을 갖게 될 것입니다.

포토샵에서 스킨을 편집하는 방법

Tumblr는 독창적이고 영감을주고 창의적이고 흥미로운 콘텐츠를 블로그에 게시하는 사람들에게 보상하는 다양한 방법을 구축했습니다. 가장 눈에 띄는 것은 좋아요와 리 블로그입니다. 모든 블로그 영구 링크 페이지의 상단과 대시 보드에는 게시물을 '좋아요'표시하는 하트 아이콘이 있습니다. 공유 할 가치가 있다고 생각되는 게시물을 발견하거나 자신의 생각을 추가하고 싶다면 자신의 블로그에 게시물을 리 블로그 할 수 있습니다. 리 블로그는 아이디어 또는 게시물 밈이 수천 개의 블로그 네트워크에 빠르게 확산되는 방식입니다.

모바일 화

Tumblr의 기본 모바일 레이아웃

Tumblr의 기본 모바일 레이아웃

우리가 생각하는 것보다 빠르게 사람들은 모바일 장치를 선호하기 위해 노트북을 버리기 시작했습니다. 따라서 Tumblr는 모바일 애플리케이션과 모바일에 최적화 된 블로그 레이아웃을 만들었습니다. iPhone, BlackBerry 및 Android 플랫폼 용 애플리케이션을 사용하면 대시 보드를 탐색하고 휴대폰에서 직접 모든 게시물 유형을 게시 할 수 있습니다. iPhone 및 Android 애플리케이션을 사용하면 Tumblr의 고급 게시 옵션 (초안으로 저장, 대기열에 추가, 게시 및 맞춤 게시 URL)에 액세스 할 수 있습니다.

Tumblr의 정교한 이메일 게시 기능을 사용하여 게시물을 블로그에 직접 이메일로 보냅니다. Goodies 페이지 ( tumblr.com/goodies ) 사이트의 고유 한 이메일 주소를 찾습니다.

보내기를 누르면 Tumblr는 작성하려는 게시물 유형을 자동으로 감지하여 사이트에 게시합니다. 서식을 좀 더 세밀하게 제어하려면 Tumblr에서 Markdown 구문 ( daringfireball.net/projects/markdown/syntax ).

모든 블로그에는 iPhone, BlackBerry, Android 등을 위해 최적화되고 멋진 모바일 레이아웃이 제공됩니다. 사용중인 테마가 모바일 브라우저에서 잘 작동하는 경우 언제든지 맞춤 설정 메뉴에서 최적화 된 레이아웃을 사용 중지 할 수 있습니다. Tumblr는 또한 기본 모바일 레이아웃을 사용자 지정 레이아웃으로 덮어 쓸 수있는 기능을 제공합니다. tumblr.com/docs/en/custom_themes#iphone-themes .

테마

모든 게시물 유형을 가능한 한 단순하게 유지하기위한 Tumblr의 노력으로 사이트의 디자인을 매우 쉽게 변경할 수 있습니다. Tumblr에 내장 된 수백 개의 무료 및 프리미엄 테마 중에서 선택할 수 있습니다. 또는 Tumblr는 독창적 인 것을 만들 수있는 모든 권한을 제공합니다.

아이폰 플러스가 얼마나 큽니까

현재 Tumblr에 내장 된 테마 가든에는 거의 900 개의 고품질 테마가 있습니다 ( tumblr.com/themes ). 추천, 프리미엄, 최신 및 인기 테마를 탐색 할 때 각 테마를 미리보고 사이트에서 어떻게 보일지에 대한 느낌을 얻을 수 있습니다. 자신에게 맞는 테마를 찾으면 클릭 한 번으로 모든 Tumblr 사이트에 테마를 설치할 수 있습니다.

현재 Tumblr의 테마 가든에는 약 700 개의 고품질 테마가 있습니다.

현재 Tumblr의 테마 가든에는 약 700 개의 고품질 테마가 있습니다.

이러한 테마의 대부분은 완전히 무료로 사용하고 사용자 정의 할 수 있지만 일부는 $ 9, $ 19 또는 $ 49의 프리미엄으로 제공됩니다 ( tumblr.com/themes/premium ). 대부분의 프리미엄 테마에는 최고 품질의 디자인, 모든 Tumblr 기능, 수십 가지 사용자 지정 옵션, 영어, 프랑스어, 독일어, 이탈리아어 및 일본어에 대한 언어 번역 지원이 포함되어 있습니다. 또한 대부분의 프리미엄 테마 디자이너는 각 테마에 대해 놀라운 지원을 제공합니다.

Tumblr의 공식 Theme Garden 외에 전통적으로 WordPress 테마에 초점을 맞춘 회사는 이제 The Theme Foundry ( thethemefoundry.com ) 및 Obox ( obox-design.com ). 대부분의 경우 다운로드 가능한 PSD 파일 및 다른 테마에 대한 액세스와 같은 추가 혜택을 구매시 제공합니다. 오프 사이트 테마는 원 클릭 설치를 제공 할 수 없지만 사이트에 테마를 추가하는 것은 Tumblr 사용자 지정 메뉴에 테마 HTML을 붙여 넣는 것만 큼 간단합니다.

사이트 사용자 지정

Tumblr에는 매우 유용한 내장 사용자 정의 메뉴가있어 각 사이트의 여러 기능을 개인화, 확장 및 제어 할 수 있습니다. 7 개의 사용자 정의 메뉴에서 사용할 수있는 여러 옵션을 살펴 보겠습니다.

  • 정보 사이트 제목을 설정하고, HTML 설명을 추가하고, 초상화 또는 아이콘을 업로드하고, 나만의 맞춤 도메인 이름을 추가하는 옵션을 포함하여 Tumblr URL을 설정하세요.
  • 테마 미리보기, 설치 및 경우에 따라 프리미엄 또는 추천 Tumblr 테마 중 하나를 구입하십시오. 또한 사용자 정의 HTML 사용 버튼을 클릭하여 기존 테마의 HTML을 수정하거나 사용자 정의 테마 HTML에 붙여 넣을 수 있습니다.
  • 외관 테마가 모양 옵션을 지원하는 경우 다양한 색상 선택기, 이미지 업로드 버튼, 활성화 할 옵션 및 테마의 모양과 느낌을 사용자 정의 할 수있는 텍스트 필드가 있습니다. 많은 프리미엄 Tumblr 테마는 테마의 색상을 수정하고, 헤더 이미지를 업로드하고, 사이트 레이아웃을 변경하고, Google Analytics, Disqus 댓글 및 Flickr 이미지 피드와 같은 타사 옵션을 통합 할 수있는 수십 가지 옵션을 제공합니다. ID.
  • 페이지 전기, 연락처 정보 및 사이트 세부 정보에 적합한 추가 정적 페이지를 사이트에 추가하십시오. 또한 사이트의 태그 URL에 연결하여 외부 링크 또는 유사 카테고리로 이동하는 페이지를 리디렉션 할 수 있습니다.
  • 서비스 Tumblr 사이트를 Facebook과 연결하고 Facebook 뉴스 피드에 게시물을 원활하게 추가하세요. Tumblr에서 자동으로 게시물을 Twitter에 보내고 사이트의 RSS 피드에 Feedburner를 사용하도록 승인하세요. Tumblr는 RSS 피드, Twitter의 업데이트, Tumblr 외부의 블로그 게시물, YouTube 및 Vimeo 업로드, 기타 게시물을 Tumblr 사이트에 자동으로 가져 오는 옵션도 제공합니다.
  • 커뮤니티 사람들이 게시물에 응답하고 질문하고 승인을 위해 제출 대기열에 추가 된 게시물 유형을 제출할 수 있도록합니다.
  • 많은 테마와 대시 보드 언어를 영어, 프랑스어, 독일어, 이탈리아어 또는 일본어로 설정하고, 사용자 정의 CSS를 추가하여 테마의 CSS 속성을 덮어 쓰고, 페이지 당 표시되는 게시물 수 및 기타 여러 옵션을 결정합니다.

맞춤 테마

Tumblr가 게시 및 공유를 위해 제공하는 단순성과 구조에 대한 동일한 초점은 나만의 맞춤 테마를 만드는 도구에서도 계속됩니다. HTML과 CSS에 익숙하다면 기록적인 시간 내에 디자인에 생명을 불어 넣을 수 있어야합니다. Tumblr의 테마 시스템은 백엔드 개발없이 거의 모든 유형의 게시물 및 사이트 데이터를 드롭 할 수있는 중괄호 변수 및 블록에 의존합니다.

새로운 Tumblr 테마를 만들 때 텍스트, 사진, 인용문, 링크, 채팅, 오디오, 비디오 및 답변 등 8 가지 핵심 게시물 유형을 다루는 깔끔하고 간단한 HTML 및 CSS로 디자인을 구축하는 것이 항상 가장 쉽습니다. 포스트 태그, 날짜, 메모 및 페이지 매김과 같은 다양한 Tumblr 요소. 사이트의 완전한 정적 HTML 빌드가 있으면 테마 변수를 추가하는 재미있는 부분을 시작할 수 있습니다. 변수 (굵게 표시)는 테마에 동적 데이터를 삽입하는 데 사용됩니다.

{Title} {block:Posts} block:Posts}

블록

테마 변수 외에도 Tumblr는 블록 시스템을 사용하여 게시물, 게시물 유형, 태그 및 페이지 매김과 같은 특정 데이터 세트와 관련된 HTML 블록을 렌더링합니다.

그래픽 디자인을위한 최고의 모니터 2016

블록은 데이터 유형이 존재하는 경우에만 렌더링되는 조건부 요소 ({block : HasTags})로 사용되거나 블록 내의 각 요소에 대해 HTML을 렌더링하는 루프 역할을합니다 : {block : Tags}.

{block:HasTags}
    {block:Tags}
  • {Tag} {/block:Tags}
{/block:HasTags}

다음은 템플릿을 만드는 데 사용할 수있는 기본 텍스트 및 사진 게시물 구조의 예입니다. (저는 HTML을 훨씬 더 쉽게 읽을 수있는 새로운 HTML5 요소와 선택한 테마의 jQuery / JavaScript 조작을위한 후크로 사용할 수있는 데이터 속성을 사용하고 있습니다.)

본문:

{block:Text} {block:Title}

{Title}

{/block:Title} {Body} {/block:Text}

사진:

{block:Photo} {LinkOpenTag}{LinkCloseTag}{block:Caption} {Caption}{/block:Caption} {/block:Photo}

다른 모든 유형의 블록, 변수 및 데이터에 대해 알아 보려면 여기를 참조하세요. tumblr.com/docs/en/custom_themes .

40을 확인하십시오 최고의 Tumblr 블로그 자매 사이트 인 Creative Bloq의 디자이너를 위해