Cocoonのヘッダーロゴに画像を設定してオシャレにする方法

Cocoonのヘッダーロゴに画像を設定してオシャレにする方法 Cocoon

有料級の無料テーマCocoon(コクーン)のカスタマイズ備忘録です。

今回はヘッダーロゴの作成方法になります。

ヘッダーロゴ

ブログ名の「アラフォーフリーダム」の部分がヘッダーロゴです。

シンプルすぎて気づかないかもしれませんが、実はこれ画像で作っています。

 

ちなみに、初期設定のままだと
こんな感じ。↓

ヘッダーロゴデフォルト

ちょっと味気ないですよね。

 

というわけで、ちょっとオシャレなヘッダーロゴ画像を簡単に作る方法を解説したいと思います。

 

無料サイト「フリーフォントで簡単ロゴ作成」でヘッダーロゴを作成する

ヘッダーロゴの作成には、上記の「フリーフォントで簡単ロゴ作成」というサイトを使います。

インストール不要ですべての作業がブラウザ上で完結するので、簡単にロゴ画像を作ることが可能です。

 

それでは早速、作っていきましょう。

 

1.幅や高さ、フォント名などを変更する

ロゴ作成操作する箇所

まずはトップページに移動します。

入力する箇所やボタンが多くてとまどうかもしれませんが、今回いじるのは下記の部分のみです。

・幅と高さを設定(当サイトは幅:415、高さ:70)
・フォント名(好みのフォント※当サイトは”たぬき油性マジック”)
・透過PNG(チェックを入れる)
・表示するテキスト(ブログ名を入力)
・テキスト色を変更(任意※当サイトは16進数でED9537)

・作業が終わったら最後にダウンロード

幅と高さ、フォント名やテキスト色は好みで変えていいですが、幅や高さを変えた場合はアップロード後に表示がおかしくないかをPCとスマホの両方で確認してください。

 

サイズの確認と微調整がめんどくさい場合は、このサイトと全く同じ設定でも構いません。

 

フォントの確認と変更方法

フォントサンプルボタン

フォント名はカラーパレットの下にあるサンプルボタンを押せば、どんなフォントか確認することが可能です。

 

フォントサンプル一覧

一覧が表示されるので、気になるフォント名をクリックすれば・・・。

 

けいふぉんとサンプル

こんな感じでサンプルが表示されます。

 

フォント変更方法

実際に変更する場合は、フォント名が書いてある四角い部分をクリック。

プルダウンメニューから好きなフォントを選んで、変更を押せば完了です。

 

2.設定が完了したらダウンロード

たぬき油性マジック フリーフォント で簡単ロゴ作成

ロゴ画像の作成が終わったら、ダウンロードボタンをクリックして保存します。

 

それでは、画像をCocoonに設定していきましょう。

 

Cocoonにヘッダーロゴ画像を設定する

1.Wordpressのダッシュボードから「Cocoon設定」→「ヘッダー」をクリック

cocoon設定

WordPressにログインしたら、ダッシュボードからCocoon設定をクリック。

 

cocoon設定ヘッダー

そして、Cocoon設定のヘッダータブをクリックします。

 

2.ヘッダーロゴをアップロード

ヘッダーロゴ選択

ヘッダーロゴ欄で「選択」をクリック、先ほど作ったロゴ画像をアップロードします。

 

それ以外の箇所は今回特にいじりませんが、キャッチフレーズは非表示にする人も多いです。(このブログは表示しています)

好みの問題なので、表示させたくない方は非表示にしましょう。

 

変更をまとめて保存

設定が終わったら「変更をまとめて保存」をクリックして完了です。

PCとスマホで表示を確認してみておかしいところがなければ終わりになります。

お疲れ様でした。

 

始めは最小限のデザイン変更でスタートする

このサイトでデザインを大きくいじっているのは、ヘッダーロゴ画像とスキンくらいです。

スキン一覧

スキンはCocoon設定のスキン一覧から好きなのを選ぶだけなので、ほとんどデザインには時間を書けていません。

 

最初のうちは特に記事を書くことのほうが重要なので、デザインのカスタマイズは最小限にして記事を書くことを優先しましょう。

私の月10万円以上稼いでいるサイトはCocoonのデフォルトのままでした。(今はヘッダーロゴだけ変えてます)

 

デザインと収益はほとんど関係ないので、まずは記事をどんどん書いていってください。

その後、ある程度余裕が出てきたりどうしても記事を書くやる気が出ない時などにデザインを少しずついじっていけばいいと思います。

 

というわけで、今回は以上です。

では。

 

コメント