ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPressテーマ「Stinger3」のフォントを変更する方法

      2015/02/16

WordPressテーマ「Stinger3」のフォントを変更する方法SEO対策に有利な事で有名になったWordPressの人気テーマ「Stinger3」を導入した時、一番最初に行ったカスタマイズが「フォントを変更する」でした。デフォルトの見栄えはこんな感じです…

WordPressテーマ「Stinger3」のフォントを変更する方法
このフォントでも問題は無いのですが、もう少し綺麗なフォントはないかなと思い見つけたのがこちら

WordPressテーマ「Stinger3」のフォントを変更する方法
いかがでしょうか?個人的にはこちらの方が読みやすく感じます。今回はこちらのフォントに変更する方法を備忘録として記事にします。
こちらの記事「OSXローカル環境にwordpressをインストールする方法」でも紹介したローカル環境に構築したwordpressのStinger3でこのカスタマイズをテストします。

スポンサーリンク

style.cssを開きます

ダッシュボード→外観→テーマ編集でstyle.cssを開いて頂いても、他のアプリで開いて頂いてもOKです。
デフォルトの表示はこちらです。

* {
font-family: arial, helvetica, osaka, "MS PGothic", sans-serif;
margin: 0px;
padding: 0px;
}

変更するのはこの38行目の設定の部分です。38行目をこちらのコードと入れ替えします。

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

最終的にこのような感じになると思います。

* {
font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif;
margin: 0px;
padding: 0px;
}

完成したらブログで表示を確認してください。

スポンサーリンク

簡単に変更する事が出来ました。今回ゼロからはじめる WordPressで紹介されているフォントを使用させて頂きました。読んで頂いてありがとうございました。

スポンサーリンク

 - WORDPRESS

Comment

  1. WordPressテーマ STINGER3のフォント変更 より:

    […] 取り急ぎフォント変更のやり方をサイトでみつけたので、こちらの方法でやるのですが、前のフォントが何なのかを確認して、今日には変更したいなあ。 […]

  2. clew より:

    はじめまして。

    http://dmgadget.info/wordpress-stinger3-fonts/

    こちらの記事を参考にしてフォント変更をやってみましたが上手く反映されません。
    理由が分からないのでアドバイスいただけないかと思いコメントしました。
    スティンガーのヴァージョンは以下です。

    stinger3ver20140327

    変更箇所は以下。

    ファイル名 : stinger3ver20140327: スタイルシート (style.css)

    * {
    font-family: メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “MS Pゴシック”, “MS PGothic”, sans-serif;
    margin: 0px;
    padding: 0px;
    }

    38行目は現在上のように変更しています。(ソースのコピペ)
    変更はこの1箇所のみ。

    この状態で更新してブログのフォントを確認しても変化がないんです。

    よろしければアドバイスいただけませんか?
     

Message

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

CAPTCHA


  関連記事

WordPress[Table Press] 表を作成してブログに表示
WordPress[Table Press] 表を作成してブログに表示
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
WordPress[Yet Another Related Posts Plugin] RSSに関連記事を追加
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
WordPress[Stinger3用 子テーマ] サイトマップ(目次)を設置する方法
WordPress[Stinger3用 子テーマ]サイトマップ(目次)を設置する方法
WordPress[Stinger3]Amazonアソシエイトの自動ランキングを導入
WordPress[Stinger3] Amazonアソシエイトの自動ランキングを導入
wordpress優良プラグイン
wordpress優良プラグイン
WordPress[Public Post Preview] 記事を限定公開する
WordPress[Public Post Preview] 記事を限定公開する
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
WordPress Popular PostをStinger5と同じ表示にカスタマイズ
WordPress Popular PostをStinger5と同じ表示にカスタマイズ