新着情報

前回、キャプションの背景と文字色を変更しました。

→ トップページのキャプションの背景色と文字色を変える方法～PC表示編～

今回は、キャプション文字のフォントの変更方法とサイズの変更方法をご紹介いたします。

フォントの変更方法

Before

赤枠で囲った部分のフォントスタイルを変更する方法になります。

After

サイトのキャラクター性に合わせたり、社風に合わせたり飲食店や美容室など、様々な性格があると思いますので、それに合わせてフォントを変えたい方もおられると思います。今回は、固定ページやブログで使われているフォントに合わせてみます。

---

実践編

今回はキャプションのタイトル部分だけ変更しますので、ピンポイントでクラス名を指定します。（全て統一する方法は後日ご紹介します）

画像下の背景がグレーの部分

レイアウトテンプレート → CSS一覧 → style.min.css で該当する箇所を探してみると、.pickup .thumbnail .thumbnail-title が見つかりました。

メイン画像２の下の部分

こちらの部分も同様に探すと、.mainvisual-col-02 .thumbnail .thumbnail-title　がみつかりました。

これらをまとめて任意のフォントを適用させます。（個別にも設定可能です）

今回は、custom.cssに追記します。

追加コード

.pickup .thumbnail .thumbnail-title,.mainvisual-col-02 .thumbnail .thumbnail-title{
font-family:YuGo-Medium,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif
} 

追加保存が出来たら、TOPページを確認しましょう。

変わりましたか？ 変わらない場合は、更新するかキャッシュを削除してみて下さい。

文字サイズの変更方法

フォント変更すると、文字の大きさが変わりますのでそれぞれ変更していきます。

メイン画像２の下の部分

レイアウトテンプレート → CSS一覧 → style.min.css に移動して、
.mainvisual .thumbnail .thumbnail-title と検索して下さい。

Google Chromeだと「 Ctrl ＋ U 」で下記のように検索出来ます。

font-size:24px　を任意の数字に変えることで変更出来ます。当サイトは 22ｐｘ に設定してあります。

画像下の背景がグレーの部分

こちらも同様に .pickup .thumbnail .thumbnail-title を検索します。

赤線がタブレットでのサイズ。青線がPCでのサイズです。当サイトは18 → 16ｐｘ に、22 → 20px に変更しています。

これで、全て変更完了です(^^)/
 

表示が変わらない時は・・・

ページを更新する （PCからは F5 を押す）

スーパーリロードする （PCから Ctrl ＋ F5 を同時押し Windows）

キャッシュをクリアする

→ ブラウザのキャッシュをクリアする方法（PC）
 

最後に・・・

今回はピンポイントでフォントを変更する方法をご紹介いたしました。というのも、全部を変えてしまっても良いのですが、記事やタイトルに使われているこのフォントが意外と気に入っているからです。

このフォントです。

h2の見出しにも適用されていて、書体が変わると目につきやすいと感じています。ただ、そのまま使うとパンチが弱い気がするので、太くして影もつけています。

こんな感じです。

若干ボヤけた感じもあるので、微調整して改めてご紹介したいと思います。

お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。