« DropboxやInsyncでATOKの辞書を同期させてみる | トップページ | Google日本語入力の開発版GoogleJapaneseInput-1.4.1003.10xリリース! »

2012/03/01

ココログのテーマをmade in USAテーマにしCSS変更で日本語を見やすくした

ココログにはテンプレートがたくさんあります.でも,画面をワイドに使った3列のテンプレートというのはあまりありません.今回は私が利用しているココログベーシックで出来る海外テンプレートの利用方法とユーザーCSS変更についてまとめてみました.

ココログフリーとベーシック・プラス・プロ

ココログには,無料で使えるココログフリー と,有料のココログベーシック・プラス・プロ というプランがあります.

ココログフリーはこんな感じでプラスして有償のオプションがあります.

また,ココログベーシック・プラス・プロの違いはこのようになっています.

前に書いた通り,Nifty-Serveからの流れで@nifty会員になっている人はココログベーシックが無料で使えます.なので,ココログベーシックを利用している人はかなり多いのではないかと思います.

最近スマートフォンからのアクセスが増えてきているので,@niftyの広告が入るココログベーシックからココログプラス(月額472.5円)への変更も考えているところです.

ココログで使えるテーマ

さて,そんなココログですが,すべてのプランでテーマが使えます.ココログオリジナルテーマでは様々なテーマやテンプレートを使うことが出来ます.

昔使っていたテーマは3列のテーマだったのですが,中央の列(本文)の幅が狭く,どうにか広く使いたいと考えていました.

ブログのデザイン設定方法が変わりますにあるように,2011年4月以降,ココログのデザインに変更があったようです(今まで作ったものは使えるとのこと).これによると,「ココログオリジナルテーマ」というものに変更になったんだそうです.

いつの間にかココログオリジナルテーマというものに変更されていたのですね.

実は以前からココログのテンプレートをどうにか出来ないかと考えていたところ,「テーマの種類」に「made in USA」という項目を発見したのです.それで,私のblogはmade in USAテーマの中にある「緑草」というテーマに変更していました.

Greenglass

この「緑草」を選択した理由は,3列あるということと,本文が可変であると言うことでした.

実はそんなことをしなくても現在ではココログのFAQに本文の幅を「可変」にすることができると書いてありました.
ただし,「リッチテンプレート」(現在もう新規に作成できない)やオリジナルテーマについては無理とのこと.

ココログのCSSについて

そうして「緑草」テーマにしてかなり経過していたのですが,どうもUSAのCSSをそのまま持ってきたのでフォントがきれいに見えないのです.ユーザーCSSの変更をすれば良かったのですが面倒だったので放置していたのです.

今回やっとCSSを変更したのですが,このCSSにあるfont-family設定は非常に奥が深くて,環境によって答えが異なるために最終的な答えがないのです.逆に言うとfont-family設定をしなくてブラウザーに任せるべきだという意見もあるくらい.

私のココログのCSSはどこにあるのかと思って調べてみたら,管理ページトップ→コントロールパネル→ファイルマネージャーを見てhome/blog(これは設定によって違うみたい)にstyle.cssがありました.ここを見るとこのようになっていました.

Blog_css_default

ここにあるstyle.cssは実体ではなく,上のアドレスにある所からインポートしているようです.
インポート元はココログのベースCSSとポータルCSSである
・ココログのアドレス/.shared-cocolog/themes/common/base-weblog.css
と,オリジナルテーマ「緑草(GreenGlass)」に関連したCSSである
・http://theme.cocolog-nifty.com/themes/classic/theme-green.css
をインポートしているようです.

今回は,下のtheme-grees.cssに関わるfont-familyを変更することにしました.

theme-grees.css にはfont-familyとしてこのようなものがあります.
font-family: Arial, sans-serif;
font-family: Georgia, 'Times New Roman', serif;
font-family: Verdana, Arial, sans-serif;
font-family: 'Trebuchet MS', Verdana, sans-serif;

これらのフォントを見ると,GeorgiaとTimes New Romanがセリフ(ひげ)つきで,あとはゴシック体のサンセリフとなっています.

ということで,sans-serifになっているものは以下のように変更しました.

font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif;

これはメイリオorMeiryo→ヒラギノ角ゴ Pro W3orHiragino Kaku Gothic Pro→MS Pゴシックという順番で選択するもので,メイリオやヒラギノのないWindows環境だとMS Pゴシックで表示し,ヒラギノフォントがある環境ではヒラギノフォントで表示し,メイリオがある環境ではメイリオを優先します.
本当はヒラギノを最優先で書くらしいのですが,Windows環境でヒラギノをインストールしていると小さな文字がつぶれてしまうということでメイリオを優先しました.

ただし,これではMacでMicrosoft Officeをインストールしている場合にヒラギノよりメイリオが優先されるので,その方はFont Bookでメイリオを「使用停止」にするなどしないといけないようだ.

Windowsでヒラギノを使う場合に小さな文字がつぶれる(gdippを使っても)件はMicrosoftが悪いんだよなぁ.

また,Georgiaなどのserifを指定しているものに関しても今回はメイリオ→ヒラギノのままにしておきました.ヘッダに使っているくらいなのでメイリオにしちゃいました.

ココログのカスタムCSSの変更方法

最後に,ココログのカスタムCSSの変更方法について記しておきます.ココログの管理ページ→ブログ一覧→ブログ名→デザインにある「カスタムCSSを編集」を押すと出てくるテキストボックスに追加・変更するCSSを貼り付けて確認し,OKだったら変更を保存するだけです.

Customcss

今回はtheme-grees.cssにあったfont-familyを以下のように変更しました.

Customcss2


最後に,font-familyの設定に関しては悩むことが多いので,ここをこうした方がいいよというアドバイスがありましたらtwitter(@fumi_fukuoka)までお願いいたします.

« DropboxやInsyncでATOKの辞書を同期させてみる | トップページ | Google日本語入力の開発版GoogleJapaneseInput-1.4.1003.10xリリース! »

パソコン・インターネット」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事

コメント

この記事へのコメントは終了しました。

広告


  • Googe Adsense

Ad




  • ネットショップ

Googleで検索

2016年6月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    

SNS

アクセス解析