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」の「=Widgets」を下記の様に変更すればフォントを変えることが出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

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

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Widgets
    ----------------------------------------------- */
    
    .widget-area {
    	font-size: 12px;
    }
    .widget {
    	clear: both;
    	margin: 0 0 2.2em;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    


    |追加

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Widgets
    ----------------------------------------------- */
    
    .widget-area {
    	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	追加	*/
    	font-size: 12px;
    }
    .widget {
    	clear: both;
    	margin: 0 0 2.2em;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

    これでサイドバー全体のフォントのフォントが変わったはずです。ちなみに、「.widget」に追加しても変更出来るみたいです。

  3. サイドバーのウィジェットタイトルのフォントだけを変える方法
  4. /wp-content/themes/twentyeleven内にある「style.css」の「=Widgets」を下記の様に変更すればフォントを変えることが出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

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

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Widgets
    ----------------------------------------------- */
    
    .widget-area {
    	font-size: 12px;
    }
    .widget {
    	clear: both;
    	margin: 0 0 2.2em;
    }
    .widget-title {
    	color: #666;
    	font-size: 10px;
    	font-weight: 500;
    	letter-spacing: 0.1em;
    	line-height: 2.6em;
    	text-transform: uppercase;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    


    |追加

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Widgets
    ----------------------------------------------- */
    
    .widget-area {
    	font-size: 12px;
    }
    .widget {
    	clear: both;
    	margin: 0 0 2.2em;
    }
    .widget-title {
    	color: #666;
    	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	追加	*/
    	font-size: 10px;
    	font-weight: 500;
    	letter-spacing: 0.1em;
    	line-height: 2.6em;
    	text-transform: uppercase;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

    これでサイドバーのウィジェットタイトルのフォントだけが変わったはずです。

それから合わせて、

で、味気ないウィジェットのタイトルバーをカスタマイズすることをお薦めします。

Pocket
LINEで送る

スポンサーリンク

One thought on “WordPressテーマTwenty Elevenでサイドバーのフォントを変える方法

コメントを残す

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

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



スポンサーリンク