WordPressテーマTwenty Elevenでヘッダーにあるブログタイトルのフォントを変える方法

Pocket
LINEで送る

本投稿記事の内容は、「WordPress3.4」のテーマ「Twenty Eleven1.4」での話であり、バージョンが大きく異なると動作しない場合があります。
※2013/01/07追記 テーマ「Twenty Twelve」の場合については「WordPressテーマTwenty Twelveでヘッダーのサイトタイトル、キャッチフレーズ、ヘッダー画像の背景色、フォントを変更する方法」を参考にして下さい。

WordPressテーマTwenty Elevenの標準のままだと、表示される文字のフォントが美しくないと感じていたので、フォントを変えてみることにしました。

今回は、投稿記事サイドバーのフォントに続き、ヘッダータイトルのフォントの変更方法についてです。

変更するフォントは、同じく、

を参考に「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」にしました。いろいろ問題もあるみたいですが、Macでは「ヒラギノ角ゴ Pro W3」、WindowsVista以降では「メイリオ」 、WindowsXPでは「MS Pゴシック」 、それ以外では「sans-serif」を表示させる事を想定しています。但し、私はWindowsVistaしか持っていないため、WindowsVistaでしか確認は出来ていません。

  1. ヘッダータイトルのフォントを変える方法
  2. /wp-content/themes/twentyeleven内にある「style.css」の「=Header」を下記の様に変更すればフォントを変えることが出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

    例)「style.css」
    フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」に変更する場合

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Header
    ----------------------------------------------- */
    
    #branding {
    	border-top: 2px solid #bbb;
    	padding-bottom: 10px;
    	position: relative;
    	z-index: 9999;
    }
    #site-title {
    	margin-right: 270px;
    	padding: 3.65625em 0 0;
    }
    #site-title a {
    	color: #111;
    	font-size: 30px;
    	font-weight: bold;
    	line-height: 36px;
    	text-decoration: none;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    


    |変更

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Header
    ----------------------------------------------- */
    
    #branding {
    	border-top: 2px solid #bbb;
    	padding-bottom: 10px;
    	position: relative;
    	z-index: 9999;
    }
    #site-title {
    	margin-right: 270px;
    	padding: 3.65625em 0 0;
    }
    #site-title a {
    	color: #111;
    	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	追加	*/
    	font-size: 30px;
    	font-weight: normal;	/*	変更	*/
    	line-height: 36px;
    	text-decoration: none;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

    これでヘッダータイトルのフォントが変わったはずです。
    「font-weight:」を「bold」から「normal」へ変えているのは、文字が太過ぎて美しく無いと感じたので、細くするためです。
    ちなみに、「#site-title」に追加しても変更出来るみたいです。

  3. ヘッダータイトル下のキャッチフレーズのフォントを変える方法
  4. /wp-content/themes/twentyeleven内にある「style.css」の「=Header」を下記の様に変更すればフォントを変えることが出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

    例)「style.css」
    フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」に変更する場合

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Header
    ----------------------------------------------- */
    
    #branding {
    	border-top: 2px solid #bbb;
    	padding-bottom: 10px;
    	position: relative;
    	z-index: 9999;
    }
    #site-title {
    	margin-right: 270px;
    	padding: 3.65625em 0 0;
    }
    #site-title a {
    	color: #111;
    	font-size: 30px;
    	font-weight: bold;
    	line-height: 36px;
    	text-decoration: none;
    }
    #site-title a:hover,
    #site-title a:focus,
    #site-title a:active {
    	color: #1982d1;
    }
    #site-description {
    	color: #7a7a7a;
    	font-size: 14px;
    	margin: 0 270px 3.65625em 0;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    


    |追加

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Header
    ----------------------------------------------- */
    
    #branding {
    	border-top: 2px solid #bbb;
    	padding-bottom: 10px;
    	position: relative;
    	z-index: 9999;
    }
    #site-title {
    	margin-right: 270px;
    	padding: 3.65625em 0 0;
    }
    #site-title a {
    	color: #111;
    	font-size: 30px;
    	font-weight: bold;
    	line-height: 36px;
    	text-decoration: none;
    }
    #site-title a:hover,
    #site-title a:focus,
    #site-title a:active {
    	color: #1982d1;
    }
    #site-description {
    	color: #7a7a7a;
    	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	追加	*/
    	font-size: 14px;
    	margin: 0 270px 3.65625em 0;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

    これでヘッダータイトル下のキャッチフレーズのフォントが変わったはずです。

ちなみに、「=Header」の「#branding」に「font-family:」を追加指定することにより、グローバルメニューを含めたヘッダー全体のフォントをまとめて変更する事が出来ます。

Pocket
LINEで送る

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



スポンサーリンク