ワードプレスで日本語Webフォントを適用してみよう!

font-japan

ワードプレス(WordPress)でホームページを作ったとき一番の問題は日本語のフォントの問題です。もちろん、フォントに気をあまり使わない人なら大丈夫かもしれませんが、僕のようにフォントに敏感な人々はたまらないはずです。ここでは、font faceを用いて簡単な方法で日本語フォントを変更する方法を紹介します。 1. 日本語フォントの準備 まず最初にすべきことはフォントを用意することです。フォントの姿も重要な問題ですが、もっとも重要なものはフォントファイルのサイズです。Webでは速度速くなければならないですから、ファイルのサイズが小さいフォントがいいです。自分のサーバーからダウンロードする予定なら1.0MB以下が適当です(ひらがなとカタカナだけのフォントはもちろん10kBぐらいのフォントもたくさんあります)。僕が推薦するフォントはM+ 1p regular フォントです。フォントのホームページはこちらですが、こちらで無料ダウンロードができます。Licenseもフリーですので安心しましょう。 2. TTFフォントをWOFFフォントへ変換 上記サイトでダウンロードしたフォントはmplus-1p-regular.ttfです。でもこのTTFタイプのフォントはサイズも大きいですし、Internet Explorerでは動作しないかもしれません。ですからこのTTFフォントをWOFFタイプへ圧縮しなければならないです。圧縮は下記のサイト http://everythingfonts.com/ttf-to-woff で易しくできます。そうすると1.3MBのmplus-1p-regular.ttfが800kBのmplus-1p-regular.woffになります。 3. 自分のサーバーにフォントをアップロード mplus-1p-regular.woffフォントを自分のサーバーの適当な位置(一般的にはRoot)へアップロードします。 4. CSS 編集 自分のホームページのスタイルを担当するstyle.cssを開けてもっとも上段の部分に

のようにコードを追加します。また、例えば

のようにfont-familyでmplus-1p-regularを指定しておきます。これで終わりました。もちろんお金を投資するとこれより小さくて綺麗なフォントを求めることができるかもしれませんよ。   Related Posts ?워드프레스 블로그 폰트 변경하기 (다른 언어, 다른 폰트 적용 : 영어, 일본어, 한국어)ブログフォント変更 … Continue reading

ttf, eot, woff 폰트 파일 사이즈 줄여보자 !

fontforge3

오늘은 무려 1.3MB 의 용량을 차지하고 있었던 일본어 폰트 mplus-1p-regular.ttf 의 파일 사이즈를 줄여 보았습니다. 사실 이것도 한자를 지원하는 일본어 폰트 중에서 가장 용량이 작은 편일 겁니다(히라가나와 카타카나만 지원하는 폰트는 10kB짜리도 있을 정도지만 한자가 영 볼품없게 나와서..). 그러기 위해서 먼저 … Continue reading

Chrome User-Agent Switcher

uaspoofer4

Chrome 에서 작동하는 플러그인 Chrome User-Agent Switcher를 소개합니다. 요즘 웹 브라우저들이 너무 많아져서 자신의 웹사이트가 각각의 브라우저들마다 어떻게 보이는지 확인하기란 여간 귀찮은 일이 아니겠죠?(특히 IE..) 이 플러그인은 크롬에서만 작동하는데, 버튼 한 방으로 거의 모든 브라우저에서의 모습을 볼 수가 있습니다. 일단 … Continue reading

블로그 속도를 향상시키기 위해 시도한 방법들

menu-sprites

티스토리에서 워드프레스로 블로그를 옮기고 나서, 무엇보다도 많은 시간을 투자한 작업은 블로그 속도를 향상시키는 작업이었습니다. 옮길 때만 하더라도 이 정도로 스피드가 안 나올줄은 예상치 못했던 터라 좀 멘붕이 왔습니다만, 덕분에 많은 것도 배웠고 예전에 비하면 많이 속도가 향상된 듯 싶네요(사실 아직 … Continue reading

파비콘 간단하게 만들기

간단하게 파비콘 만들기를 할 수 있는 사이트들이 있지만, 가장 대표적인 사이트를 꼽으라면 favicon.cc 가 아닐까 싶네요. 파비콘은 웹사이트의 얼굴과도 같은 것이니, 여유가 되시는 분들은 한 번 도전해 보시길 바랍니다! favicon.cc에서는 본인이 직접 16px*16px 크기의 파비콘을 제조할 수도 있고, 또 이미지 … Continue reading

워드프레스 Easy-Columns 플러그인

블로깅을 하다보면 불가피하게 포스트 또는 페이지에 단을 나누어야 하는 경우가 발생합니다. 이럴 때 워드프레스에서 아주 편리하게 써 먹을 수 있는 플러그인이 바로 WP Easy Columns 입니다. 보통 플러그인의 경우 평판이 5점 만점에 4점 이상이라면 굉장히 좋은 플러그인인데, 이건 무려 4.9점이네요. … Continue reading

다사다난했던 티스토리 블로그

티스토리 블로그를 사실상 폐쇄해 버렸으니, 이쯤에서 티스토리 방문자 통계를 살펴볼까 합니다. 먼저 출발일부터 오늘까지의 일별 방문자수 그래프입니다. 저기 2500명을 찍은 부분이 상당히 거슬리므로, 저 곳을 적당히 처리한 후 그래프를 보도록 하겠습니다. 저 부분은 밑에서 설명 드리겠습니다. 2010년 6월 18일, 대망의 … Continue reading

구글 애드센스 (Google Adsense) 가입

구글 애드센스에 가입했습니다. 이미 눈치를 채신 분들이 계시겠지만 최근 몇 일 동안 블로그 사이드바에 광고 테스트란으로 빈 공란이 있었습니다. 중학교 때 네이버 블로그, 대학생 때 티스토리 블로그, 그리고 현재의 블로그를 하면서 ‘결코 블로그에 광고를 달지 않겠다’는 신념이 깨지는 순간이군요. 광고를 … Continue reading

Pingdom Tools – 블로그 속도 측정 하기

예전부터 이용해 오던 Pingdom Tools 를 통해 블로그 속도를 측정해 보았습니다. 무료로 이용하실 수 있는 속도 측정 사이트로, 만약 사이트에 돈을 바치면 세계 각지에서, 매 시간마다 자신의 사이트 속도를 측정할 수 있는 기능도 사용할 수가 있지요. 9월 13일 부터 메인 … Continue reading

네이버의 선택을 받아라 – 블로그 RSS 피드 등록 (검색 노출 등록)

naver111

워드프레스와 같은 설치형 블로그를 만들고 나서 블로그가 어느정도 자리를 잡았다고 생각되면 다음에 해야 할 일은 무엇일까? 바로 여러 검색 사이트에 RSS 피드를 등록하는 것이다. 그래야만 해당 검색 사이트에서 키워드를 검색하였을 때, 자신의 블로그의 포스트가 노출되게 된다. 물론 자신의 블로그는 정상적인 … Continue reading

블로그에 수식 입력하는 몇 가지 방법들 (블로그 수식 입력)

자연과학이나 공학 계열을 주제로 한 블로그라면, 블로그에 수식을 입력하는 것은 필연적인 과제가 됩니다. 여기서는 블로그에 수식을 입력하는 몇 가지 방법들을 소개하고, 제 나름대로 장단점을 분석해 보겠습니다. 1. 이미지를 직접 업로드 이 방법은 가장 고전적인 방법이면서 동시에 견고한 방법입니다. 이미지를 업로드 … Continue reading

[Plugin] QuickLaTeX 를 블로그에 장착

qqqq

QuickLaTeX를 블로그에 장착했습니다. QuickLaTeX는 특히 tikz를 이미지로 랜더링 해 준다는 것이 장점이 되겠습니다. 물론 일반적인 수식도 지원하지만, MathJax도 이미 사용하고 있는 중이라서, 그래프나 이미지 관련 기능만 쓰게 되겠네요(사실 그다지 그래프를 그린다던가 할 일은 없어 보이지만). QuickLaTex Plugin 다운로드 : http://www.holoborodko.com/pavel/quicklatex … Continue reading

티스토리에서 워드프레스로 (WordPress) 이사하기 (TTXML)

티스토리에서 워드프레스로 블로그 전체를 옮기고 싶다면 어떻게 해야 할까요. 사실 적지 않은 분들이 더 좋은 블로그 플랫폼이 있는데도 불구하고 선뜻 이사를 하지 못하는 이유는, 지금까지 해 온 블로그에 있는 자료들이 아까워서, 혹은 옮기려니 골치가 아파서일 것입니다. 하지만 티스토리에서 워드프레스로 옮기려고 … Continue reading

ブログフォント変更 (英語/日本語/韓国語のフォントをそれぞれ適用したワードプレス)

This post is also available in 한국어 アルファベット以外の文字を使用するWordPressユーザーがブログを始めてからすぐに直面する問題はやっぱりフォントの問題です。もしただ一つの言語を主に使用するとすれば、この問題はそれほど難しくなく解決することができると思います。しかし、ブログにいろいろな言語を使っているユーザーなら、他の言語に他のフォントを適用することは必須課題となります。 僕は最初にWordPressブログをはじめてから韓国語がとても格好よくないと感じましたたので、ブログ全体にNanumGothicフォントを適用してみました。韓国語はきれいに出てくれましたが、今回は英語が悪く表現されました。もちろん日本語も! このポストでは、非常に簡単な手続きを通じて自分のブログに”他の言語、他のフォント”(ここでは英語、日本語、韓国語)を適用する方法を紹介してみます​。 最初に準備すべきなことはフォントのダウンロードです。どのような形のフォントでもいいと思いますが、一般的なTTFフォント3つを用意します。僕は英語の場合Tahoma、日本語の場合07やさしさゴシック、また韓国語の場合NanumGothicをそれぞれ用意しました。英語フォントのTahomaは用意しなくてもいいです。 (07やさしさゴシックフォントダウンロード:http://www.fontna.com/blog/379) (NanumGothicフォントダウンロード:http://hangeul.naver.com/download.nhn) (1) ダウンロードしたフォントをFTPclientなどを利用して自分のServerのstyle.cssがあるフォルダーの中にアップロードします。僕の場合には、 http://www.leunkim.com/wp-content/themes/twentyeleven/NanumGothic.eot http://www.leunkim.com/wp-content/themes/twentyeleven/NanumGothic.ttf http://www.leunkim.com/wp-content/themes/twentyeleven/nihongo.eot http://www.leunkim.com/wp-content/themes/twentyeleven/nihongo.ttf のようなパスにアップロードしました。 (2) ブログのheader.phpや<head>と</head>の間に次のコードを挿入します。

もちろん、src:url( )の中には自分がアップロードしたパスを入力してフォントをロードします。 Related Posts ?ワードプレスで日本語Webフォントを適用してみよう!워드프레스 블로그 폰트 변경하기 (다른 언어, 다른 폰트 적용 : 영어, 일본어, 한국어)나눔스퀘어체 … Continue reading

워드프레스 블로그 폰트 변경하기 (다른 언어, 다른 폰트 적용 : 영어, 일본어, 한국어)

fontlist

This post is also available in 日本語 알파벳 외에 다른 문자를 사용하는 워드프레스 유저가 블로그를 시작하고 나서 곧 접하게 되는 문제가 바로 폰트에 관한 문제입니다. “워드프레스 블로그 폰트 변경” 을 하려면 어떻게 해야 할까요? 만약 오직 ‘한 종류의 언어만 주로 … Continue reading

Blog Statistics (2012.01.01 – 2013.02.05) [Tistory]

  Caption text from 2012.01.01 ~ 2013.02.05 (클릭하면 확대됩니다)   덤으로 아래는 오로바둑 레이팅 그래프.   Related Posts ?Blog Statistics (2010.06.18 – 2012.11.08) [Tistory]Blog Statistics (2010.06.18 – 2012.04.30) [Tistory][M1 Seminar] Week 1 : Introduction to Nonlinear Wave Equations오사카 신사이바시 야경 … Continue reading

풍선 타워 디펜스 멀티플레이 (Bloons Tower Defence Battle)

예전부터 꽤 오랫동안 즐기고 있는 게임 Bloons Tower Defence(일명, 풍선 터뜨리기) 시리즈의 멀티플레이판. 최근에 즐기고 있는데 역시 재미있다. 다만, 대전할 상대의 실력을 선택할 수 없다는 것이 단점.. 그래서 아래와 같은 상황이..ㅠㅠ 대전 화면 (오른쪽이 나, 왼쪽이 상대편) Spike Factory (렉을 … Continue reading

이메일 주소에 @대신 (at)을 쓰는 이유?

http://www.techtricksworld.com/2011/12/make-your-inbox-spam-free.html   저는 그 이유가 지금껏 “@”이라는 기호가 윈도우 등의 OS 차이나, 같은 OS라도 국가마다 문자열 버전이 달라서 그런 줄로 생각했었는데, 스팸메일 방지 때문인 것 같네요(물론 저의 추측).   gmail주소를 웹 상(블로그 프로필)에 공개하자 마자 몇 일 안 되어서 1년간 … Continue reading

Blog Statistics (2010.06.18 – 2012.11.08) [Tistory]

  아 저도 하루 평균 방문자 100 위에서 놀고 싶습니다. 포스팅이 늘어날수록 방문자가 늘어나는걸 보니 그저 신기할 뿐.     Related Posts ?Blog Statistics (2010.06.18 – 2012.04.30) [Tistory]Blog Statistics (2012.01.01 – 2013.02.05) [Tistory][M1 Seminar] Week 1 : Introduction to Nonlinear … Continue reading

Page 4 of 512345