【WordPress】フォントと見出しの変更

投稿日:04/27/2014 更新日:

フォントがみにくい!という声にお応えして、フォントを変えました。

もともと、このWordpressサイトはSahifaというテーマを利用していて、Sahifaにプリインストールされているフォントの中で見やすそうなものを選んでいたのですが、どうにもしっくりくるフォントがないので、CSSをいじることにしました。

フォントの変更

WordPressの設定画面から、外観>テーマ編集 を選択。

右列にたくさんのphpファイルが並びますが、その一番下にスタイルシートがあります。

テーマがSahifaの場合は、style.cssとrtl.cssが存在します。

このうち、rtl.cssは文字を右から左に読む(right to left)言語が対象なので、無視。

style.cssを開き、body内のフォントを定義している部分を探します。

このサイトの場合はこんな記述でした。

font-family: 'Droid Sans',Arial,Verdana,sans-serif;

この文字列を、次の文字列で置換しました。windowsでは大好きなメイリオ、macではヒラギノproNになるようにしています。

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

他にも、変えたい部分がある場合は、とにかくフォントが定義されている個所を検索して、上記のコードで置換。

こうして、ブログのフォントを(個人的に)見やすいフォントに変更しました。

参考サイト: CSSのfont-family指定はこれで決まり!(2013春)

見出し(h3タグ)に枠線(左側と下枠)を付ける

これはまさに↑のような演出。Stingerとかのテーマだと、デフォルトで設定されていてカッコいい。見た目にも話題の切り替わりどころが分かりやすいので、CSSをいじるついでに設定しました。

やり方は簡単。

h3タグに次の要素を設定します。

h3 {
border-color: #B40404;
padding: 4px 0px 0px 8px;
border-style: solid;
border-width: 0px 0px 1px 4px;
}

これでホーム画面のタイトル名や、記事内の見出しに赤い線が引かれるようになりました。

参考サイト:web制作支援

スポンサードリンク

Copyright© ガンサバイバーのデジタル日誌 , 2018 All Rights Reserved.