ロゴはお店(ブログサイト)の看板です
ブログは書くことも大切ですが、見てもらうことがもっと大切です。
まずはお店(ブログ)の看板を整えるためにヘッダーの所のサイトタイトル(屋号)を入れます。
標準のCocoonで使われているフォントでも良いのですが、ちょっとお洒落にしたいな自分の色を出したいな？とか思ってしまうものです。
そこで今回はGoogleフォントを使ってサイトタイトルのフォントを変更してみました。
前の記事でも書きましたがCSSを書き込むので必ず子テーマを使用してください。
Googleフォント
https://fonts.google.com/
Googleフォントの入れ方
ここに色々なフォントがあります。
languageでjapaneseを選択すれば日本語もあります。
数えませんでしたがフォントが沢山あります。
上から下まで見渡して自分が気に入るフォントを探しましょう。
僕は今回Jacques Francois Shadowと言うフォントを選択しました。
気に入ったフォントが見つかったら右上のプラスボタンをクリックします。
下にバーが出ます。バーをクリックするとhtmlタグとcssコードが出ます。
図の赤い部分がHTMLタグで青い部分がcssコードの部分になります。
htmlタグとcssコードをメモ帳などにコピペするかGoogleフォントページは開いたままにしておいてください。
次にCocoonを開き作業を進めていきます。
htmlタグ、cssコード
Cocoonの外観→エディットを開き、右側のtmp-user→head-insert.phpに進み
メモ帳またはGoogleフォトに出ているhtmlタグを貼りつけます。
貼りつけたら 一番下のファイルを更新をしてください。
次にスタイルシートに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設定→ヘッダータブを開き下の方にヘッダー色(ロゴ部)があります
そこの ロゴ文字色をクリックしてお好きな色を選んで保存して頂ければ変更できます。
まとめ
ちょとイメージと違ったなと思ったら、新たにgoogleフォントを選んでhtmlタグとcssコードを 同じ要領で書き込んで、ご自身のイメージにあったフォントに変えてみてください。
という事でCocoonテーマ サイトタイトルフォントの変更方法を記載しました。
最後まで読んで頂きありがとうございます。
また、次の記事でお会いいたしましょう。
コメント