【Cocoon】ヘッダーのブログタイトルの色・サイズ・スタイルをカスタマイズ

cocoon ヘッダー サイトタイトル

 

おかぴー

こんにちは!
WEBデザイナーのおかぴー(@blueokap)です。

今回は、Twitterでよく直接質問をしてくれる「まめハムさん」から、Cocoonのテーマでサイトのタイトルの文字をカスタマイズをしたいとの相談を頂きました。

まめハムさん

おかぴーさん、こんにちは。

今Cocoonの設定の「サイトのタイトル」の部分にブログのタイトルを入力しているんですけど、その文字をもう少し目立たせたくて。

こちらが相談時のブログのタイトル部分です↓

cocoon ヘッダー サイトタイトル

 

確かに、現状だと文字サイズが小さく、文字色も白のため背景に隠れてしまってる感じがあり目立ちませんね。

ここにはトップページへ飛ぶリンクもあるため、できれば大きくして目立たせた方が良さそうです。

そして、文字のスタイルも少し上品に変えてみたいとの相談内容でした。

結果、今回のカスタマイズでこんな感じになりました↓

cocoon ヘッダー サイトタイトル

 

この文字は、WordPressの管理画面の「設定>一般>サイトのタイトル」にブログのタイトルを入力している場合に表示される文字なので、同じように設定されていれば上の画像以外の文字スタイル・色・サイズにも変更可能です。

では、具体的なカスタマイズ方法を書いていきます!

 


カスタマイズ方法

 

今回は、この手順でカスタマイズしていきます!

カスタマイズ手順
  1. Cocoonの子テーマにheader.phpを用意(このファイルもカスタマイズします)
  2. 文字スタイルを変えるコードをコピペ
  3. CSSで色・大きさを変更

カスタマイズするときは、子テーマを使いますので、Cocoonの公式HPから子テーマをダウンロードして設定しておきましょう。
また、必ずバックアップをとってから行ってくださいね。

バックアップについては、こちらの記事でまとめています^^↓

ワードプレスでバックアップを取る方法をパターン別にまとめました!

2018.11.29

 

また、作業を始める前にFTPソフトを使って、Cocoonの親テーマから「header.php」を子テーマに用意しましょう。

親テーマから、子テーマにFTPソフトを使ってファイルを用意する方法はこちらの記事で解説しています↓

具体的に解説!カスタマイズするファイルを子テーマにインストールする方法

2018.09.15

この記事の「編集したいテーマを親テーマから子テーマにインストールする流れ」を参照してください。

この記事では、STORKの親テーマ(jstork)から子テーマ(jstork_custom)への操作方法を画像を使って解説していますが、

Cocoonの場合は親テーマ(cocoon-master)から子テーマ(cocoon-child-master)と名称が変わるだけで、操作方法は同じです。

 

Cocoonの子テーマにheader.phpを用意してスタイルを変更

 

まずは文字スタイルを変更です。
たくさんのスタイルが探せる「Google Fonts」というサイトを使います。

google font

 

ここでは、好みの文字スタイルを探してクリックすると、対象のコードが表示されます。

そのコードをコピペすればスタイル変更できるという優れもの!

 

①サイトから変更したいスタイルを探し、右上の「+」ボタンを押します。

google fonts 使い方

 

②すると、下の画像の赤枠のようにコピペするためのコードが出てきますのでコピーしておきます。

google fonts 使い方

 

③ここからWordPressの操作に移ります。まず子テーマのheader.phpを開きます。

具体的な場所はこちら↓

管理画面から、「外観>テーマの編集」に進み、右上の編集するテーマが「Cocoon Child」になっていることを確認します。

きちんと子テーマに用意できたら、テーマヘッダー(header.php)というファイルが増えているはずですので、このファイルを選択して開きます。

google fonts 使い方

 

④43行目に、②でコピーしたコードを貼り付けます。

※これは43行目である必要は特になく、11行目の<head>〜55行目の</head>の間なら基本的にどこにコピペしても大丈夫です。

google fonts 使い方

 

今回のまめハムさんのカスタマイズでは、「Arvo」というスタイルを使っていますが、この部分があなたの好みのスタイルによって変わります。

つまり、違うスタイルであればこのコピペするコードが変わってきますので、スタイルを変更したいときは再度このサイトからコードをコピーしてきてください。

 

⑤子テーマにコードをコピーできたら、今度は先ほどのGoogle Fontsのサイトで、下の画像の赤枠にあるコードをコピーします。

google fonts 使い方

 

⑥今コピーしたコードを、WordPress管理画面の「外観>カスタマイズ>追加CSS」に貼り付けます。

下の画像がその貼り付ける場所なのですが、ただ貼り付けるだけでは足りないため、対象箇所のクラス名(.logo-header a span)を一緒に記載します。

おかぴー

「CSSのクラス名」とは、簡単にいうと「各コードに名前をつけて、その名前の所にどんなデザインを適用するか?」指示するものです。

これにより、記事の本文やその他の文字には影響を及ぼさずに、ヘッダーのサイトのタイトル部分だけに文字の色・スタイル・大きさが適用されるというわけです。

 

google fonts 使い方

 

こちらが、クラス名も記載したコードです↓

ソースコード

.logo-header a span{
font-family: 'Arvo', serif;
}

これにより、文字のスタイルが変更されました↓

cocoon ヘッダー サイトタイトル

 

CSSで大きさを変更

 

さて、今度は大きくして目立たせましょう!

ソースコード

.logo-header a span{
font-family: 'Arvo', serif;
font-size:48px;
}

「font-size」という文字サイズを変更するコードを追加しました↓

cocoon ヘッダー サイトタイトル

 

画面に対して文字サイズが変わりましたね。
この「48px」というのは、お好きな数字に調整してみてください。

 

CSSで色を変更

 

では、最後に色を変えます。

ソースコード

.logo-header a span{
font-family: 'Arvo', serif;
font-size:48px;
color:#333;
}

「color」という文字の色を変更するコードを追加しました↓

cocoon ヘッダー サイトタイトル

 

これでパソコン画面のカスタマイズは完成です!

最後に、スマホで見たときの調整です。

文字のスタイルと色は先ほどのコードで適用されているのですが、もし文字の大きさも別途調整したい場合は以下のコードを追加でコピペしてください↓

ソースコード

/*スマホのサイトタイトルの文字サイズ変更*/
@media screen and (max-width:768px){
#header .site-name-text{
font-size: 48px;
}
}

パソコンと同様に、「font-size」の部分だけあなたのブログに合った数字を入力してくださいね。

 

まめハムさん

できましたー!!

色や大きさをたまに変えたいとか思って、究極、ヘッダー画像に画像編集ソフトで文字を入れて作るしかないかなって思ってました。

おかぴー

希望通りに解決できてよかったです!

まめハムさんがおっしゃる通り、この方法なら文字の大きさと色はCSSで数字と色のコードをいじるだけで簡単に変更ができちゃいますし、

文字のスタイルもたくさんサンプルがある「Google Fonts」から見つけてコピペするだけでできるので、わざわざ画像編集ソフトで画像ごと変えなくてもできるので便利だと思いますよ!

 

『 わーい♪ 』

おかぴーのプロフィール画像8

『 よっしゃー! 』

まとめ

 

ヘッダー画像にブログのタイトルを入れて作る方法もありますが、今回はコードを使うことで細かなサイズや色の調整も簡単にできるように工夫しました。

こういった数字や色のコードをカタカタっと変えるだけで見た目を好きなものにすぐに変更できるのが、CSSの魅力だと思います^^

あなたもCocoonのレイアウトで何かこうしたいな〜っていうのがあれば、お気軽にご相談くださいね!

 

 

 

 

ビジネスモデル作り

あなただけのブログデザインが出来上がったら、
そのブログを収益化できるモデルに生まれ変わらせてみませんか?

自分が育てたブログで収益化できる楽しさを知ってほしい。
そのための知識やノウハウがここにあります。

デザインのことは僕に任せて、収益化するための知識とノウハウを思いっきり学んでみませんか?


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください