WordPress メモ

Cocoon「ヘッダーロゴを作って設定する方法」

こんにちは、シャトーブリアンです。

WordPressに慣れてきたので、デザインをちょっとずつ自分好みに変えていっています。

WordPressテーマ「Cocoon」のカスタマイズメモです。

今回は「ヘッダーロゴを作って設定する方法」!

 

Cocoon「ヘッダーロゴを作って設定する方法」

ヘッダーロゴとはサイトの1番上のタイトルがあるところです。
Cocoonのデフォルトは、サイトカラーに文字だけというシンプルな表示です。
これを画像に変えていきます。

 

完成イメージはこちらです。

Before

After

 

ロゴの作成

ロゴを作れるサイトはいろいろあります。
その中でも「Canva」というサイトは簡単でわかりやすい!

直感的な操作で作っていくことができます。素材の種類も豊富で、しかも無料で作れるのでかなりオススメです♪

Canvaでのロゴの作り方をご紹介します。
ロゴがすでにあるという方は先へ進んでください♪

 

Canvaでロゴを作ろう!

サイトはこちらです。

Please Wait... | Cloudflare

 

1、アカウントの登録

はじめに、アカウントを登録します。

アカウントを登録しなくても使うことはできますが、途中で何度も「登録して!」と表示されるので、初めに登録してしまったほうがラクかもしれません。

Google、Facebook、メールアドレスのいずれかで登録することができます。

 

2、ロゴの作成

はじめにロゴのサイズを決めます。
このブログのタイトルは1240×240pxで作成しています。

 

サイズを決める

1、右上の「デザイン作成」のボタンを押す

 

2、「カスタムサイズ」を押す

 

3、幅と高さを入力して「新しいデザインを作成」を押す

 

指定サイズのキャンバスが出来あがります。

 

ロゴ作り

真っ白なキャンバスに文字や絵などを配置していきます。

左にメニューがあります。
・写真
・素材
・テキスト

それぞれに選択肢がたくさんあります。
テキストや素材などを組み合わせて、オリジナルのロゴが作れます。

使用する素材には無料のものと有料のものがあり、マウスポインターを近づけるとそれぞれ表示されます。

 

例えば文字を入れたい場合、「テキスト→見出しを追加」でキャンバス内に文字を入れることができます。色やサイズなどの変更は上のバーから行うことができます。

 

完成したらダウンロード!

1、右上の「ダウンロード」を押す

 

2、ファイルの種類を選んで「ダウンロード」を押す

ダウンロードしたものをパソコン内で画像として保存しましょう。

 

作ったロゴをCocoonに設定

1、Cocoon設定から「ヘッダー」を選択

 

2、ヘッダーロゴの「選択」を押して画像を選ぶ

 

3、「変更をまとめて保存」を押す

 

 

 

これで作業は終わりです。
変更できたか、ヘッダーを見てみよう♪

 

できた!

 

 

 

本家の説明はこちら♪

 

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