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

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

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Content
    ----------------------------------------------- */
    
    #main {
    	clear: both;
    	padding: 1.625em 0 0;
    }
    
    ・
    ・
    ・
    ・
    ・
    
    .entry-summary {
    	padding: 1.625em 0 0;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    


    |追加

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    
    #main {
    	clear: both;
    	padding: 1.625em 0 0;
    }
    
    ・
    ・
    ・
    ・
    ・
    
    .entry-summary {
    	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	追加	*/
    	padding: 1.625em 0 0;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

    これで投稿記事本文のフォントが変わったはずです。

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

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

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Content
    ----------------------------------------------- */
    
    #main {
    	clear: both;
    	padding: 1.625em 0 0;
    }
    
    ・
    ・
    ・
    ・
    ・
    
    .entry-title {
    	clear: both;
    	color: #222;
    	font-size: 26px;
    	font-weight: bold;
    	line-height: 1.5em;
    	padding-bottom: .3em;
    	padding-top: 15px;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    


    |変更

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Content
    ----------------------------------------------- */
    
    #main {
    	clear: both;
    	padding: 1.625em 0 0;
    }
    
    ・
    ・
    ・
    ・
    ・
    
    .entry-title {
    	clear: both;
    	color: #222;
    	font-size: 26px;
    	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	追加	*/
    	font-weight: normal;	/*	変更	*/
    	line-height: 1.5em;
    	padding-bottom: .3em;
    	padding-top: 15px;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

    これで投稿記事タイトルのフォントが変わったはずです。
    「font-weight:」を「bold」から「normal」へ変えているのは、文字が太過ぎて美しく無いと感じたので、細くするためです。

  5. 投稿記事の投稿日及びカテゴリー名、タグ表示部のフォントを変える方法
  6. /wp-content/themes/twentyeleven内にある「style.css」の「=Content」を下記の様に変更すればフォントを変えることが出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

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

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Content
    ----------------------------------------------- */
    
    #main {
    	clear: both;
    	padding: 1.625em 0 0;
    }
    
    ・
    ・
    ・
    ・
    ・
    
    .entry-meta {
    	color: #666;
    	clear: both;
    	font-size: 12px;
    	line-height: 18px;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    


    |追加

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Content
    ----------------------------------------------- */
    
    #main {
    	clear: both;
    	padding: 1.625em 0 0;
    }
    
    ・
    ・
    ・
    ・
    ・
    
    .entry-meta {
    	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	追加	*/
    	color: #666;
    	clear: both;
    	font-size: 12px;
    	line-height: 18px;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

    これで投稿記事の投稿日及びカテゴリー名、タグ表示部のフォントが変わったはずです。

  7. 投稿記事全体(タイトル、本文、投稿日及びカテゴリー名、タグ表示部)をまとめてフォントを変える方法
  8. /wp-content/themes/twentyeleven内にある「style.css」の「=Content」を下記の様に変更すればフォントを変えることが出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

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

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Content
    ----------------------------------------------- */
    
    #main {
    	clear: both;
    	padding: 1.625em 0 0;
    }
    
    ・
    ・
    ・
    ・
    ・
    
    .no-results {
    	border-bottom: 1px solid #ddd;
    	margin: 0 0 1.625em;
    	padding: 0 0 1.625em;
    	position: relative;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    


    |追加

    
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    /* =Content
    ----------------------------------------------- */
    
    #main {
    	clear: both;
    	padding: 1.625em 0 0;
    }
    
    ・
    ・
    ・
    ・
    ・
    
    .no-results {
    	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	追加	*/
    	border-bottom: 1px solid #ddd;
    	margin: 0 0 1.625em;
    	padding: 0 0 1.625em;
    	position: relative;
    }
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    

    これで投稿記事全体(タイトル、本文、投稿日及びカテゴリー名、タグ表示部)のフォントが変わったはずです。このままだと、タイトルの文字が太いので、美しく無いと感じる場合は、個別にタイトル部の変更をお薦めします。

ちなみに、「=Content」の最上部にある「#main」で「font-family:」を追加指定することにより、サイドバーを含めたContent部全体のフォントをまとめて変更する事が出来ます。

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

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



スポンサーリンク