Stinger3の記事のフォント(文字)が変更できないから試行錯誤した結果

    

medium_11447128445

Stinger3の記事font(フォント)を変更しよう

こんにちは、kakujinです。

今回はWordPress”Stinger3”のテーマの記事フォントを変えましょうという提案。同じテーマを使っているサイトが多いのは”Stinger3”がそれだけ使い易い、優れているということでもあるのですが、まったく同じような見た目のサイトになってしまいますよね。

photo credit: MAGMA Slanted Volcano via photopin cc

スポンサーリンク



自分がStingerテーマそのまんまのブログを見た時の、正直な気持ちはこれです。

「あぁ、あんまりちゃんとブログやってないんだなぁ」

で、ブラウザをそっと閉じるというね。

ブログも見た目が9割?
自分がデフォルトデザインそのまんまのブログを読まない理由
http://hamako9999.net/blog-mitame/

正直同じようなサイトが多くて悩むのも事実。

フォントを変えるだけでも、見違えるようになるのでやってみる価値はあると思います。

フォントの変更は”style.css”

それでは具体的なやり方。

調べたところによると、フォントの変え方はとっても簡単。スタイルシートを変更します。所要時間5分かかりません。

参考にしたのは「ダレデキBlog」というサイトの、この記事。

ダレデキBlog:
STINGER3のフォントを変えて読みやすくする
http://lifefrom45.net/stinger3customize/post-307/

2014/4/5
いつもお世話になってます。
コメントありがとうございました。
https://twitter.com/diyakinaito1

内容まとめると、

管理画面の”外観”

”テーマ編集”

“スタイルシート(style.css)”の最下部に以下のコードを追加で貼り付ける。

* {
font-family: “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
}

以上。

“smart.css”はスマートフォン用のスタイルシートです。注意してください。

うまく行かないときはベースを直接変えよう

やってみた結果。

…変わらない。

何が良くないのか…まったく変化が見られないんですよ。

これは困った。

とった策がこれ。

ベースの”font-familiy:~”の部分を直接変える!

コードを見てみましょう。

変更前

/*—————————–
BASE
——————————*/

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

変更後

/*—————————–
BASE
——————————*/

* {
font-family:  “Lucida Grande”, “segoe UI”, “ヒラギノ丸ゴ ProN W4”, “Hiragino Maru Gothic ProN”, “メイリオ”, Meiryo, Verdana, Arial, sans-serif;
margin: 0px;
padding: 0px;
}

キーボードのCtr+fで検索ショートカットが開きます。そこに”font-family”と入力して該当部分を探すと楽です。

更新ボタンを押して、サイトを見ると無事に変更されていました。

スマートフォンのフォントは”smart.css”で変更

次はスマートフォンのフォントを変更しておきましょう。

スマートフォンのフォントファミリーは以下のようにしておきました。場所は”テーマ編集”から”smart.css”です。

コードの該当部分を以下のように変えます。

変更前

font-family: Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;

変更後

font-family:’Lato’, ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, Meiryo, メイリオ, sans-serif;

これで一安心。

参考にしたサイトは「ultimate-ez.com」というサイト。

【備忘録】今現在のfont-family指定の最善解。
http://ultimate-ez.com/2013/09/08/2547/



まとめ

色々と試行錯誤の結果、コードがおかしくなってしまったので、スタイルシートのバックアップとっておかなかったら、とても面倒なことになっていたかも。

私は変更前のコードを毎回Evernoteに保存させています。簡単なタイトル入れておけば、後で困ったことになっても復旧が楽。検索機能に優れていますし、これはとっても便利でおすすめです。

Evernote
http://evernote.com/intl/jp/

最低限、何かを変更する時はメモ帳などのテキストに保存しておくと良いです。

それにしても、見易くなったなぁ。

そうおもいませんか?

kakujinでした。

ではまた。


スポンサーリンク



関連記事

このページの先頭へ