Cocoon ヘッダー(サイトタイトル)フォント変更

ブログのこと
スポンサーリンク

ロゴはお店(ブログサイト)の看板です

ブログは書くことも大切ですが、見てもらうことがもっと大切です。
まずはお店(ブログ)の看板を整えるためにヘッダーの所のサイトタイトル(屋号)を入れます。
標準のCocoonで使われているフォントでも良いのですが、ちょっとお洒落にしたいな自分の色を出したいな?とか思ってしまうものです。

そこで今回はGoogleフォントを使ってサイトタイトルのフォントを変更してみました。
前の記事でも書きましたがCSSを書き込むので必ず子テーマを使用してください。

php、CSSなどを変更するときにはCocoon サポート対象外のものを読んだうえで行って下さい。
サポート対象外のもの
当テーマでは、できる限りサポートを行いたいと思いますが、管理者の時間的都合上サポートできないものもあるのでご了承ください。

Googleフォント
https://fonts.google.com/

Googleフォントの入れ方

googleフォントに日本語選択

ここに色々なフォントがあります。
languageでjapaneseを選択すれば日本語もあります。

数えませんでしたがフォントが沢山あります。
上から下まで見渡して自分が気に入るフォントを探しましょう。
僕は今回Jacques Francois Shadowと言うフォントを選択しました。

googleフォントから選択

気に入ったフォントが見つかったら右上のプラスボタンをクリックします。

htmlタグとCSSコード表示作業

下にバーが出ます。バーをクリックするとhtmlタグcssコードが出ます。

htmlタグとCSSコードの表示

図の赤い部分HTMLタグ青い部分cssコードの部分になります。
htmlタグとcssコードをメモ帳などにコピペするかGoogleフォントページは開いたままにしておいてください。
次にCocoonを開き作業を進めていきます。

htmlタグ、cssコード

htmeタグを書き入れる手順1
htmeタグを書き入れる手順2と保存

Cocoonの外観エディットを開き、右側のtmp-userhead-insert.phpに進み
メモ帳またはGoogleフォトに出ているhtmlタグを貼りつけます。
貼りつけたら 一番下のファイルを更新をしてください。

CSSコードを書き入れる場所の指定と保存

次にスタイルシートにcssコードを貼りつけます。
先ほどのメモ帳、またはGoogleフォントに出ているcssコードを貼りつけます。
しかし、これだけでは足りないので対象個所にクラス名を記載します。

/タイトルフォント/
.site-name-text {
font-family: ‘Jacques Francois Shadow’ ;
}

記述は上記のようになります。
コピペして Jacques Francois Shadow’ コードを入れ替えて頂ければ良いと思います。

ファイルの更新を押していただいて自分のサイトを表示させてみてください。
ヘッダーのサイトタイトルのフォントが変更できます。

フォントの大きさも変えたいって方は下記に記しておきます。
font-size: (文字大きさ)px; にサイズを入れてあげれば文字大きさを変更できます。

/タイトルフォント/
.site-name-text {
font-family: Jacques Francois Shadow’ ;
font-size: 100px;
}

フォントの色を変えたい場合はcolor:#(カラーコード);を入れてあげればフォント色を変更することが可能です。

カラーコード?何それ?って方もいますよね。
そんな方はCocoon設定ヘッダータブを開き下の方にヘッダー色(ロゴ部)があります
そこの ロゴ文字色をクリックしてお好きな色を選んで保存して頂ければ変更できます。

カラー設定の手順1
カラー設定の手順2
カラー設定の手順3 色の設定
変更前と変更後の比較

まとめ

ちょとイメージと違ったなと思ったら、新たにgoogleフォントを選んでhtmlタグとcssコードを 同じ要領で書き込んで、ご自身のイメージにあったフォントに変えてみてください。

という事でCocoonテーマ サイトタイトルフォントの変更方法を記載しました。
最後まで読んで頂きありがとうございます。
また、次の記事でお会いいたしましょう。

コメント

タイトルとURLをコピーしました