ratio_3_2 のカスタマイズ方法

トップページのキャプション文字のフォントと文字サイズを変える方法【baserCMS ratio_3_2】

トップページのキャプション文字のフォントと文字サイズを変える方法【baserCMS ratio_3_2】
、キャプションの背景と文字色を変更しました。

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

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

フォントの変更方法

Before

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

After

pickupfont4.png

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

実践編

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

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

pickupfont6.png

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

メイン画像2の下の部分

pickupfont7.png
こちらの部分も同様に探すと、.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,"MS Pゴシック",sans-serif
} 
★豆知識 : フォントを指定する際は、font-family:という記述を使います。左から表示させたい順番に記述していきます。この場合だと、YuGo-Medium が最優先の表示候補になります。ただし、表示する端末にそのフォントがない場合、後者のフォントが順番に適用されていきます。スマートフォンでフォントが変わるのはその為です。またOS専用のフォントもあるので、いくつかは必ず記述するのが基本になっています。

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

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

文字サイズの変更方法

フォント変更すると、文字の大きさが変わりますのでそれぞれ変更していきます。
文字サイズはパソコン、タブレット表示それぞれサイズ指定があるので、custom.css に追記する方法ではなく、style.min.css を直接書き換える方法を取りますので、ソースのバックアップを必ず取ってから作業して下さい。

メイン画像2の下の部分

pickupfont7.png

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

Google Chromeだと「 Ctrl + U 」で下記のように検索出来ます。
pickupfont8.png
font-size:24px を任意の数字に変えることで変更出来ます。当サイトは 22px に設定してあります。

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

pickupfont6.png

こちらも同様に .pickup .thumbnail .thumbnail-title を検索します。
pickupfont9.png
赤線がタブレットでのサイズ。青線がPCでのサイズです。当サイトは18 → 16px に、22 → 20px に変更しています。

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

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

ページを更新する (PCからは F5 を押す)

スーパーリロードする (PCから Ctrl + F5 を同時押し Windows)

キャッシュをクリアする

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

最後に・・・

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

このフォントです。

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

こんな感じです。

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

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

 
ブログランキングに参加しています(^^)/
応援して頂けると励みになります。

にほんブログ村 デザインブログ Webデザインへブログランキング

月別アーカイブ一覧

新着情報

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。郡山青藍病院 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ピュアネス藍 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。ボンブエーノボーノ 様

2019-05-23

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

【baserCMS の 人気テーマ ratio_3_2】を導入したサイトを追加しました。薪窯キッチンペロッタ 様

2017-06-25

当サイトでは、テーマ ratio_3_2 を導入したサイトを下記のページでご紹介しております。→ 「ratio_3_2」導入サイトご紹介しま...

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

【baserCMS】の管理画面(ダッシュボード)を完全SSL化(保護された通信)する方法

2017-06-19

baserCMSの管理画面がSSL化に対応していない!管理画面も完全SSL化させる方法→ 前回、やっとSSL化したのですが、管理画面がSSL...

baserCMS

CakePHP(tm) : Rapid Development Framework