최근에 워드프레스 최신 버전인 3.3.2가 한글 언어파일이 추가되어 한글 버전도 최신 버전으로 사용할 수 있게 됐습니다. 며칠간 최신 버전의 워드프레스 영문판에 한글 언어파일을 업데이트하는 번역작업을 했는데 공교롭게도 완료하자 마자 한글판이 이전의 3.2.1 버전에서 최신버전으로 업데이트가 가능하다는 메시지가 뜨더군요. 헛일 했다는 생각에 새 버전을 내려받아 설치하고 보니 일부 용어들이 영어로 그대로 남아 있고 도움말 부분이 대부분 영어로 그대로 남아 있었습니다. 예전의 3.2.1버전의 한글 부분을 그대로 이전하고 추가된 용어나 도움말에 대해서는 전혀 번역이 안 된 것 같습니다. 위 이미지는 초기화면인 대시보드(새 버전에서는 알림판으로 교체됨)의 화면입니다. 공식판을 다운 받아 설치하면 위 내용이 전체가..
이전 글에서 이어집니다. 2-5. 설정 네트워크 관리 페이지에서 설정 메뉴에는 “네트워크 설정”이 두 개가 있어서 혼동됩니다. 같은 메뉴 명칭인데 이는 원래 영어가 “Network Settings”와 “Network Setup”로 되어 있는 것을 한글로 번역하는 과정에서 Settings와 Setup을 같은 “설정”으로 입력해서 그렇습니다. 위의 내트워크 설정은 실제의 네트워크 설정을 수정하는 화면이고 아래의 네트워크 설정은 처음 다중사이트를 만드는 과정에서 삽입한 두 가지 코드가 보존되어 있는 화면입니다. 메뉴가 같아서 혼동되기도 하는데 언어파일을 수정하면 되며 워드프레스에 설치된 언어파일인 ko_KR.po파일을 수정하고 저장하면 같이 있는 ko_KR.mo파일도 수정됩니다. 편집기는 po파일만 편집할 수..
이전 글에서 이어집니다. 2. 네트워크 관리 다중사이트를 사용하면 블로그라는 의미에서 웹사이트의 개념으로 범위가 확장됩니다. 이는 하나의 블로그가 아닌 여러 개의 블로그가 모인 커뮤니티가 되므로 웹사이트인 것이죠. 그래서 명칭도 다중 블로그가 아닌 다중사이트가 되는 것입니다. 로그인해서 들어오면 별로 바뀐 것이 없어 보입니다. 사이드 메뉴에 내 사이트가 추가된 것이 보이고 우측 상단에서 “안녕하세요. Admin님”을 클릭하면 “네트워크 관리자”항목이 추가되어 있습니다. 그리고 이전에 도구메뉴에 있던 “네트워크 설정”은 없어졌습니다. 우선 돌아보기 쉽도록 관리자바를 다시 만듭니다. 사이드 메뉴의 “사용자” 메뉴로 들어가서 관리자 바에 체크하고 저장하면 관리자 바가 나타납니다. 내 사이트나 네트워크 관리자를..
워드프레스에서 다중사이트를 만들면 사용되는 언어파일입니다. 기존에 80%정도 진행됐는데 일부 번역오류를 수정하고 100%로 완료됐습니다. 워드프레스 다중사이트는 워드프레스 한번의 설치로 여러사람이 워드프레스를 사용할 수 있는 기능으로 다중사이트를 이용하면 블로그 커뮤니티를 만들 수 있습니다. 대표적인 예가 미국의 가입형 워드프레스인 워드프레스닷컴으로 수백만명의 가입자가 사용하고 있습니다. 워드프레스 한글버전 3.4에 적용되었으므로 설치할 필요가 없습니다. 설치방법은 한글 워드프레스가 설치된 디렉토리에서 wp-content-->languages 디렉토리로 들어가면 이미 두개의 파일이 있습니다. 위 파일을 붙여넣으면 됩니다. 다중 사이트(Multisite) 블로그 만들기 2010년 워드프레스 3.0 버전부터..
이전글에서 마무리한 2단형 스킨을 3단형으로 변경하였습니다. 이 3단 스킨을 토대로 여러가지 형태로 변경하여 사용할 수 있습니다. 2단형은 물론 1단형으로도 변경이 가능하며 컨테이너 영역의 배경이미지를 클래스 선택자로 변경하였으므로 컨테이너 영역의 배경이미지를 제거하고 사용하거나 해더영역과 푸터(footer)을 컨테이너영역에서 분리하여 별도의 배경이미지를 추가할 수도 있습니다. 메뉴도 원하는 곳에 배치할 수도 있어서 헤더와 컨테이너가 분리된 경우 그 사이에 배치할 수도 있습니다. 이 하나의 스킨으로 여러가지 형태로 변경할 수 있으나 스킨만 사용하시려는 분을 위해서 여러가지 형태로 변형하여 올리겠습니다. footer 부분의 크레딧은 가능한한 지우지 말고 사용해주시길 부탁드립니다. Redesigned by ..
그동안 CSS 기초부분에서 진행한 내용을 기반으로 티스토리 블로그 스킨 만들기를 진행하였는데 사실 블로그 스킨 만들기는 대단한 CSS 기술이 사용되는 것은 아닙니다. 기초적인 레이아웃에 관한 지식만 있으면 누구나 스킨을 만들 수 있습니다. 가장 많이 사용하는 것이 div 태그를 이용하여 요소를 배치하고 마진과 패딩을 이용하여 세부 조정을 하는 것입니다. 인터넷 익스플로러가 CSS3의 둥근 모서리와 그림자 효과를 지원하지 않는 관계로 글 내용이 많이 길어졌지만 둥근 모서리 이미지를 만들어 웹페이지의 배경을 삽입하는 것은 아주 많이 사용하는 방법입니다. 인터넷 익스플로러 10버전이 나온다해도 다른 웹브라우저에서처럼 반강제적으로 업그레이드를 하도록 하지 않는 이상 구버전의 인터넷 익스플로러는 계속 사용될 것이..
최종 마무리 단계이므로 아이콘을 삽입하고 폰트 사이즈를 변경하였습니다. 이곳 을 클릭하면 진행되고 있는 테스트 블로그로 갑니다. 메뉴의 애니메이션 되는 배경이미지의 사이즈가 커서 헤더 영역에 배치하기는 부담이 될 것 같아 좌측 상단에 배치하였습니다. 이번 글에서는 상단에 배경이미지 삽입하고 메뉴를 이동 배치하는 방법과 폰트 사이즈 변경을 알아봅니다. 특히 중요한 것은 티스토리의 CSS는 스킨 자체에 포함된 CSS로 통제되기도 하지만 일부 CSS는 티스토리(다음)센터에서 통제를 하기 때문에 수정이 안되는 것도 있습니다. 하지만 CSS는 금지되지 않는 이상 !important라는 값을 이용하여 센터에서 통제되는 CSS도 스킨에서 통제할 수가 있습니다. 센터에서 통제하는 대표적인 CSS가 다음뷰 애드박스인데 ..
티스토리 블로그 스킨 만들기이지만 구글 광고를 두개 삽입하였으니 나머지 하나 마저 삽입하는 방법을 알아봅니다. 이전 글에서 1의 리본 끝부분이 너무 튀어나온 것 같아서 3픽셀 줄였습니다. 구글광고는 디스플레이 광고를 3개까지 달 수 있고 링크단위광고는 3개를 더 추가할 수 있습니다. 다음 뷰 애드박스를 설치할 경우 2처럼 고정되어 수정할 수 없게 되어있습니다. 구글광고를 설치하기 좋은 자리는 컨텐트영역 상단이므로 3의 자리가 적당합니다. 다음뷰 애드박스를 사용하지 않더라도 구글광고를 삽입하자면 2나 3의 위치가 되고 그러자면 글의 일부가 2나 3의 위치로 올라가게 됩니다. 글이 공간을 다 채우게 되면 다행이지만 이미지부터 올린다든가 글이 짧고 그다음에 이미지가 올라온다면 공간이 비게 되죠. 그래서 애드박..
이번 글에서 만들게 될 제목 타이틀의 리본입니다. 평범한 제목부분과 위처럼 리본이 있는 것과는 블로그 전체적인 이미지가 아주 다르게 보입니다. 이 리본은 포토샵으로 만든 하나의 이미지를 사용합니다. 제목의 배경은 이미지가 아니라 background 컬러 속성을 사용합니다. 그래야 제목이 길어져서 두줄로 되면 모든 글자에 배경색이 적용됩니다. 그리고 bottom-border 속성을 사용하여 1픽셀의 빨간색이 추가됐습니다. 사용한 이미지는 2부분의 삼각형과 그림자입니다. 이 스킨은 스킨위자드를 사용할 수 있어서 컨텐트의 게시글 영역을 변동 시킬 수 있기 때문에 이 제목 리본의 배경과 그림자부분도 같이 변동되어야합니다. 이전 글에서 스킨위자드를 설정하는 방법을 알아보았으니 전 과정을 거치셨다면 쉬운 작업이 됩..
이번 글에서 만들게 될 메뉴바입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 메뉴에 마우스 오버하면 서브 메뉴가 애니메이션 되면서 나옵니다. 구글 광고에 가려지는 드랍다운 메뉴는 금지이므로 메뉴를 위로 나오게 하는 방법도 있습니다. 웹사이트에서 메뉴의 배치를 주로 헤더영역에 하는 것은 검색엔진이 내 웹사이트를 검색할때 최우선 접하는 곳이기 때문입니다. 대부분의 블로그는 카테고리라고 하여 메뉴역할을 하는데 사이드바에 배치합니다. 내 글에서 중요한 부분은 헤더영역에 메뉴를 두는 것이 검색엔진 최적화(SEO; Search Engine Optimization)에 도움이 됩니다. 메뉴는 웹사이트에서 아주 중요한 역할을 합니다. 방문자가 사이트를 방문하면 가장 먼저 찾는 것이 메뉴입니다. 그래서 웹디자이너들..
이번 글에서 만들 메뉴바입니다. 이미지로 보면 단순하지만 이곳 을 클릭하여 위 테스트 블로그로 이동하고 메뉴에 마우스오버하면 홈에 있던 회색의 박스가 애니메이션 되면서 해당메뉴로 이동합니다. 이것은 제이쿼리 플러그인을 사용한 것입니다. 이러한 제이쿼리 플러그인을 Lava Lamp 라고 합니다. 이것은 메뉴의 글자의 크기에 따라서 사각형이 변하기 때문에 이름이 붙여진 것입니다. Lava Lamp란 용암이 물흐르듯 움직이는 램프인데 이것에서 이름을 붙인듯합니다. 제 블로그에 사용한 것도 제이쿼리 플러그인을 사용한 것인데 이것을 설치하려면 메뉴를 html 편집창에서 편집을 할 수 있도록 되어있어야 하는데 지금 수정하고 있는 스킨은 메뉴 편집이 안되고 관리자 메뉴의 화면설정으로 들어가서 메뉴를 삽입하거나 제거하..
"티스토리 블로그 스킨 만들기"라는 타이틀로 만들고 있는 스킨은 이웃블로거이신 이츠하크님의 요청으로 시작해서 거의 마무리 단계에 있습니다. 지금까지 만든 것으로도 충분히 스킨으로 사용할 수 있으며 메뉴 부분과 각종 아이콘을 삽입만 하면 완료됩니다. 그동안 따라하시는 분들이 어려워하시는 것은 본 스킨 만들기 과정이 제 포스팅의 CSS기초부분을 기반으로 해서 진행된 것이라 스킨만들기부분만 하셔서 그렇습니다. 스킨이 완료되면 공개하려고 하였지만 과정의 중간부분도 중요하다고 생각되어 스킨 만들기 부분만 하시면서 따라하기 어려워하시는 분들을 위해서 지금까지 진행된 부분을 공개하니 참고하세요. 각 단계마다 저장을 해서 공개했어야하는데 미처 생각을 못했군요. 제가 다시 작업하면서 각 과정의 마무리 부분에 그 과정에서..
이번 글에서 진행할 내용은 세가지입니다. 컨테이너 영역 외부에 있던 Footer를 내부로 들여오고 이 footer와 페이징을 CSS기초에서 만든 배경이미지로 둥근 모서리를 만듭니다. 그리고 검색 모듈을 헤더로 이동하고 이미지를 삽입합니다. 검색 박스는 평상시에는 Search라는 단어가 나오고 클릭하면 검색어를 입력할 수 있도록 사라지게 합니다. 이것은 자바스크립트를 사용합니다. 간단한 내용이니 알아두는 것도 좋습니다. 검색버튼은 워드프레스의 아이콘으로 교체할 예정입니다. 그동안 설명이 길어서 마무리가 늦어졌는데 이전 글들과 중복되는 내용들이 있고 그동안의 내용을 잘 파악하시면 바로 할 수 있는 것들입니다. 되도록 간결하게 해서 이 세가지를 이 포스팅으로 끝내고 다음 글에서 각 아이콘을 삽입한 후에 메뉴부..
이전 글에서 큰 레이아웃 박스의 배경이미지를 완성했으니 이제 너저분해진 헤더를 정리하고 사이드바의 위젯박스를 정리해야겠죠. 현재까지 작업한 화면입니다. 헤더부분의 배경이미지가 가로로 repeat되고 있어서 지저분합니다. 워드프레스 테마스킨에는 이곳에 아무것도 없으니 이미지를 제거합니다. 이부분은 스킨위자드를 사용하고 있기 때문에 스킨위자드 설정창에서 제거합니다. 사이드바의 모듈박스는 제목과 상단부분이 많이 떨어져 있어서 세로 폭을 줄여야하고 박스와 박스 사이의 간격이 좁아서 늘려줘야합니다. 구글광고는 컨텐트영역 상단에 728X90 사이즈의 리더보드를 달것이고 사이드바 상단에 250X250 사이즈의 정사각형 광고를 달 것입니다. 사이드바 박스가 264픽셀이라고 좀 작은 느낌이 드는데 포토샵으로 수정한 이미..
사이드바 영역의 배경이미지는 가로로 늘어나지 않기 때문에 컨텐트영역의 배경이미지보다는 간단합니다. 하지만 모듈이 여러개 배치되므로 각 모튤마다 배경이미지를 만들어줘야합니다. HTML부분에서는 클래스 선택자를 사용하여 시작태그 부분과 마감태그 부분만 삽입하고 CSS에서는 클래스 선택자를 사용하므로 한번만 적용하면 되니까 컨텐트 영역보다는 쉽습니다. 여러개의 모듈이 사이드바에 배치되어있습니다. 티스토리 블로그는 관리센터의 사이드바 메뉴에서 원하는 모듈을 제거하거나 추가할 수 있습니다. 최근에는 구글 광고가 가로세로 200픽셀과 250픽셀의 정사각형 크기가 추가되어 좁은 사이드바에도 추가할 수 있게 되었습니다. 1. HTML코드 삽입하기 html 편집 창에서 사이드바 부분을 수정하기 위해서는 코드의 구조를 알..
스킨을 만들때는 방문자를 항상 우선 생각해야하므로 가능한한 모든 웹브라우저를 설치해서 시험해봐야하지만 최소한 5대 브라우저(인터넷 익스플로러, 구글 크롬, 파이어폭스, 애플 사파리, 오페라)는 설치해 놓는 것이 좋습니다. 최근에는 구글 크롬의 사용자가 많이 늘었죠. 웹브라우저는 옛날 버전도 시험해봐야하는데 모든 버전을 설치해서 사용할 수 없으니 이를 시험할 수 있는 사이트에서 URL을 입력하면 어떻게 보이는지 알 수 있습니다. 이곳 을 클릭하면 무료로 시험할 수 있는 사이트로 가는데 스크린샷을 보려면 한참 기다려야합니다. 유료로 사용하면 바로 확인이 가능하죠. 시험삼아 해보는 것도 좋겠습니다. 1에 사이트 주소를 입력하고 2의 None버튼을 클릭하면 3의 SeaMonkey를 제외하고 체크되어 있는 곳이 ..