« 第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう | トップページ | 第31回:現在の閲覧者数を表示するカウンターを設置してみよう »

2006/05/20

第30回:文字(フォント)の設定を変えてみよう

ココログ内で使用されている文字の種類を変更してみましょう。
ココログではカスタムテーマのテンプレートを使用している場合、「デザインの編集」→「テーマを変更」部分である程度のフォント指定が出来ますが選択できるフォントがそんなに多くありません。
CSSでフォントの種類を設定すればその他の自分好みのフォントを利用できますし、「テーマの変更」ではまとめて設定されてしまう部分も別々のフォントにすることが可能です。

手順

  1. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、リッチテンプレート適用時には利用できません。
    CSSを編集するためには、まず「カスタム・テンプレート」 を作成してください
    ※カスタムテンプレートの作り方は
    第3回: カスタムテンプレートを作ってみよう
    を参照して下さい。
  2. 「編集」画面のCSS記述欄に、適用したいセレクタに対するCSSを記述する。

    <記述例>:ブログタイトル(メイン)部分に適用する場合

    #banner h1 a
    {
    font-family : Verdana,"MS UI Gothic" ,"MS Pゴシック",sans-serif; /*文字の種類*/
    font-size : 20pt; /*文字の大きさを指定*/
    font-weight : bold; /*文字の太さを指定*/
    font-style : italic; /*斜体*/
    color : #6699cc; /*文字の色を指定*/
    }
     
  3. 「変更を保存」ボタンを押す。
    ※「確認」ボタンを押せば保存前に出来上がりを確認出来ます。
  4. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  5. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  6. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  7. イメージ通りに出来ているかどうか確認する。

以上です。
上手くできましたか?

上記のCSSを実際に適用するとこんな↓感じになります。

初めてのココログ・カスタマイズ

あんまり格好良くはないですね^^;

ここがポイント

  • ココログ内でフォントが指定できる主なセレクタ(上記の例でいうと「#banner h1 a」の部分) は下記のようになっています。
    参考にして下さい。

セレクタ

適用部分
#banner a ブログタイトル全体
#banner h1 a ブログタイトル(メイン)
#banner h2 サブタイトル部分
#comment-text textarea, #comment-text-field textarea コメント入力欄
.content 本文表示欄全体
.content p 記事の本文
.content h2 記事の日付
.content h3 記事のタイトル
.content p.posted 記事のフッター
#calendar カレンダーの日付
#calendar caption カレンダーのタイトル
.sidebar h2 サイドバーのリストタイトル
.sidebar li サイドバーのリスト内項目
.link-note 「ココログからのお知らせ」 などの文字
#powered 「ココログロゴ」の前後の文字
a リンク文字
.sidebar a サイドバーのリンク文字
blockquote 引用
  • 文字の種類(特に書体)の表示は閲覧者側の環境に依存します。
    つまり、管理者側でフォント(書体)を設定しても閲覧者のPCにそのフォント(書体) が入っていなければ、設定したようには見えないということです。
    ですのでフォントを設定する場合は、

    □自分でダウンロードしたオリジナルフォントは使わない
    □基本的に「全てのPCで100%自分が設定したように表示されるとは限らない」
    (これは全ての表示についていえることですが)

    ことを頭に置いておくといいと思います。
  • 「どうしてもこの書体が使いたい。これで見て欲しい」という場合は、 その書体で作った文字を画像にして貼り付けるのが一番確実です。
    記事本文に適用するのは現実的ではありませんが、ブログタイトルや、サイドバーのタイトルなどでしたら効果があると思います。

    以下、各プロパティの簡単な説明です。
  • 文字の種類(書体)
    文字の種類は間にカンマ( , )を入れることで複数同時に指定することが出来ます。
    指定したフォントが閲覧者側のPCにインストールされていないことも考えて、いくつか同時に指定したほうが安全です。
    先に書いたフォントが優先的に表示されるようになっています。
    フォント名にスペースが含まれる場合はフォント名の前後を二重引用符( " ) または一重引用符( ' )で囲ってください
    また、全角・半角・大文字・ 小文字などの違いも全て正しく書かないと適用されませんので注意しましょう。
    指定の最後に「一般分類名」(serif = 明朝体系、sans-serif = ゴシック体系、cursive = 筆記体系、 fantasy = 装飾系、monospace = 等幅系)を指定しておくと、その前で指定したフォントが全て使用できない場合、 最終的な代替フォントとなります。
    詳細については下記サイトを参考にして下さい。
    「TAG index」様内 『フォントを指定する』
  • 文字のサイズ
    例で使用した「数値」+「単位」 の他にいろいろな設定方法があります。
    詳細については下記サイトを参考にして下さい。
    「TAG index」様内 『文字のサイズを指定する』
  • 文字の太さ
    通常は「bold」で太字、「normal」で通常の太さを表します。
    その他、数値で9段階に設定する方法などがあります。
    詳細については下記サイトを参考にして下さい。
    「TAG index」様内 『文字の太さを指定する』
  • 斜体文字
    「italic」と「oblique」が設定可能です。
    「italic」は通常の書体を斜体にした上で、少し筆記体のように表示した文字です。
    一方「oblique」は単純に斜体表示になります。
    但し筆記体が適用されるのは英文だけですので、日本語表記の場合は2つとも同じ表示になります。

お世話になりました

「TAG index」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


|

« 第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう | トップページ | 第31回:現在の閲覧者数を表示するカウンターを設置してみよう »

カスタマイズ」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

こんにちはTakoさん
度々で申し訳ないですがKayです(・.・;)今回フォントの設定を4ヶ所試し(.sidebar a,.content,textarea#comment-text,#banner)反映された部分とされてないとこが出て来てしまったのですが、、、?
試した4ヶ所で色が反映されず、「.content」と「textarea#comment-text」では全てが反映されませんでした。因みに指定した色はココログ内で使われてない色を指定しました。原因が分りましたら教えてください。お願いします。

投稿: Kay | 2006/06/22 08:24

■Kayさん
こんにちは。

1.CSSの中に書いてある「nomal」という単語のスペルが間違っています。
正しくは「normal」となります。

2.「#banner」部分はリンク文字になっていますので、
「#banner a」またはメインタイトルだけなら「#banner h1 a」に訂正してください。

3.「.content」部分は、これだけだと本文のp部分にCSSが適用されないようなので、「.content p」に対しても同じCSSを記述するといいと思います。

4.コメント欄については、セレクターを
「#comment-text textarea, #comment-text-field textarea」に変更してみて下さい。

以上で反映されると思います。

※4.については私の記事の記述に曖昧な部分がありましたので、後ほど訂正しておきます。

投稿: tako→Kayさん | 2006/06/22 20:05

またもや、恥ずかしい失敗をしてしまいました(/。\) スペルを間違えてたなんて(全てコピペでやったもので)(^^;)ゞ 
ちゃんと反映されましたのでご連絡まで、┌ (((^^;)(;^^) )) ありがとうございました!

投稿: Kay | 2006/06/23 09:33

Takoさん こんにちは
またもや私の質問で申し訳ないのですがブログのメインタイトルとサブタイトルのフォントを別にしたく「#banner h1 a」 「#banner h2 a」に分けたのですが、分ける前は反映されてましたが今回反映されなくなってしまいましたので何が原因か見て頂けますか、お願いします。
#banner h1 a
{
font-family : Gulimche,"New Gulim",富士ポップP; /*文字の種類*/
font-size : 30pt; /*文字の大きさを指定*/
font-weight : normal; /*文字の太さを指定*/
font-style : normal; /*標準*/
color : #ffcccc; /*文字の色を指定*/
}


#banner h2 a
{
font-family : OCRB,STROKE,"Estrangelo Edessa"; /*文字の種類*/
font-size : 16pt; /*文字の大きさを指定*/
font-weight : normal; /*文字の太さを指定*/
font-style : normal; /*標準*/
color : #ffcccc; /*文字の色を指定*/
}

それと、もう1つ質問があるのですがサイドバーのタイトルの名称の変更は出来るのでしょうか?例えば最新の記事をRECENT ENTRYに変えり出来ますか?

投稿: Kay | 2006/06/25 07:11

■Kayさん
こんにちは。

反映されないのは、文字が流れている部分でしょうか?
ここは、KayさんがMarqueeタグをご自分で入れているので
aタグの属性がなくなっているようです。
なので、セレクターを
#banner h2 marquee
にすれば多分大丈夫なのではないかと…。
但し、私のページでは「marquee」タグは使っていないので、本当にこれで適用されるかどうかは自信がありません。
ダメだったらごめんなさい。

サイドバーのタイトルについては「表示言語」でしたら変更できます。
「管理画面トップ」→「ブログタブ」→「設定」→「表示設定」→「表示言語」
の部分です。

投稿: tako→Kayさん | 2006/06/25 10:03

サブタイトルの文字の流れてる部分とメインタイトルの「家の犬と子供達」の部分の両方が反映されなかったのですが、文字の流れてる部分セレクターを「#banner h2 marquee」に変えて見ましたが変わりませんでした(^_^;) そのままにしておきますっ(^_-)-☆
「#banner h1 a」 ←これはメインタイトルの部分ですよね?この部分もの影響が出てるのですか?
それとサイドバーのタイトルの名称の変更は「表示設定」→「表示言語」では「日本、日本語のみ」で設定されてるので変えることが出来ないのです。ココログカスタマーサービスに聞いてみます。

投稿: Kay | 2006/06/26 08:13

■Kayさん
こんにちは。

…結局、お役に立てなかったようですね。
あまり応用が効かなくてスミマセン^^;

サイドバーのタイトルの表示言語については、フリーでは変更できないようですね。
【参考:プラン別比較表】
http://support.cocolog-nifty.com/howto/2006/03/post_32b9.html
※「設定」→「表示言語の選択」参照
上記のコメントで設定の確認をしたときに、見ていた管理画面がたまたま「プラス」のほうだったので全く気付かずにそのまま回答してしまいました。
混乱させてしまい申し訳ありませんでした。

投稿: tako→Kayさん | 2006/06/27 23:15

いえ、いえTakoさんのお陰でかなりカスタマイズが出来ました♪
丁寧に教えてくださって本当にありがとうございます。
これからも困った時はよろしくお願いします!

投稿: Ka | 2006/06/28 03:42

こんにちわ。いつも参考にさせていただいています。
コメント欄の 名前・アドレス・URLの文字が消えてしまっているみたいなのですが その文字の色は変えれますか?

投稿: tomo | 2007/10/22 19:43

■tomoさん
こんにちは。

>その文字の色は変えれますか?

名前→#comment-name
メールアドレス→#comment-email
アドレス(URL)→#comment-url

に対してそれぞれ文字色を設定すれば変更できます。
色の指定については上記記事の内容を参考にして下さい。

投稿: tako→tomoさん | 2007/10/22 21:01

突然にコメントして申し訳ありません。こちらのページで使用されているフォントは何ですか?。とても優しくていいなあと思っています。宜しくお願い申し上げます。

投稿: なな | 2012/11/29 22:36

■ななさん

こんにちは。コメントありがとうございます。

こちらのCSSでは「Meiryo UI」(メイリオ UI)と「MS UI Gothic」を指定しています。
Windows7を利用されているのであれば「Meiryo UI」、それより前のOSなら「MS UI Gothic」で表示されていると思います。

メイリオは丸みを帯びた可愛らしいフォントですよね。
「Meiryo UI」はそのメイリオの幅を少し狭くしたフォントで、特にカタカナがキュッとしているところが気に入っています。
但し、Windows7よりも前のOSには標準インストールされていませんので、他OSで表示される場合を考えて同じUI系の「MS UI Gothic」を一緒に指定しています。

以上、ご参考になれば幸いです。

投稿: tako | 2012/11/29 22:57

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/1866884

この記事へのトラックバック一覧です: 第30回:文字(フォント)の設定を変えてみよう:

« 第29回:半透明フィルター(CSS)を使わずに、画像を半透明っぽくみせてみよう | トップページ | 第31回:現在の閲覧者数を表示するカウンターを設置してみよう »