サイトを開いて最初に目に入る、ヘッダー。
多機能な無料テーマcocoonですが、ヘッダーロゴのフォントなどを変更する設定がありません。できないことはないのですが、CSSを使うみたいです。
初心者の私はあまりCSSに触れたくないので、今回はCSSを使わずに、ヘッダーロゴをおしゃれにカスタマイズする方法を紹介していきます。
まずはそれぞれの名称をご確認ください。
![ヘッダー](https://happawormama.com/wp-content/uploads/2020/05/805caefaca4a4853cc5d9341d32a07d6-1024x400.jpg)
ここではヘッダーロゴについて説明していきます。
商用利用可能なロゴ作成ができる「ロゴメーカー」でロゴを作成する
ロゴメーカーで作成したロゴを使ったヘッダーがこちらになります↓
![ヘッダーロゴ](https://happawormama.com/wp-content/uploads/2020/05/01f15f4052a76a2e2e3842ab5047da0d-1024x155.jpg)
cocoonの設定だけではできないんです。
そこで、ロゴメーカーを使っていきます。
ロゴメーカーとは
ロゴメーカーとは、
- 商用利用可能なロゴが無料で作成できる
- インストール、登録など不要
- デザイン知識など不要でおしゃれなロゴが作成できる
というのが特徴です。
ちなみに、商用利用とは
Weblio辞書より
商品そのものに利用するイメージですが、直接または間接的に利益につながる活動への使用は商用利用であるとされるようです。ブログ・アフィリエイトで広告を載せると商用となりますので、商用利用可能な素材サイトを利用しましょう。
ロゴメーカーでヘッダーロゴ作成する手順
ロゴメーカーを開き、ショップ名を入力
![ロゴメーカー](https://happawormama.com/wp-content/uploads/2020/05/9920bdfa570aa516e64b672aadc784de-1024x496.jpg)
ここは入力しなくても進めます。
あとで入力してもOK!
ショップ名とキャッチフレーズを入力
![ロゴメーカー操作方法](https://happawormama.com/wp-content/uploads/2020/05/6e0950884ae4163a892e07ccd1fdd684-1024x477.jpg)
キャッチフレーズは入れなくてもOK!2段にしたいときに使えます。
フォントやサイズを調整
![ロゴメーカー操作方法2](https://happawormama.com/wp-content/uploads/2020/05/03426cbaf6d146e308240fc31de17b4e-1024x485.jpg)
ここからは自分でカスタマイズするだけ!
フォントやサイズ、テキストの位置などを調整していきます。
アイコンもおしゃれなものがたくさんあります。
作成できたら保存する
![ロゴメーカー保存方法](https://happawormama.com/wp-content/uploads/2020/05/bd754289d5c65e61a05cd3517b9ec57e.jpg)
保存形式とサイズを選択し、保存!
サイズ感がイメージと違ったりするので、サイズは全て保存しておくことをおすすめします。
cocoonのヘッダーに設定する
![cocoonヘッダー変更](https://happawormama.com/wp-content/uploads/2020/05/ebbd2d0bf0c9a30e17f4e533e17dd965.jpg)
cocoon設定をクリック
![cocoonヘッダー操作](https://happawormama.com/wp-content/uploads/2020/05/70d812099d993877fe79cfc56d32a1aa.jpg)
ヘッダーを選択
![cocoonヘッダー操作2](https://happawormama.com/wp-content/uploads/2020/05/38344fc5924ef78413a29ccd8a36a82f.jpg)
ヘッダーロゴの「選択」をクリック
![cocoonヘッダー変更](https://happawormama.com/wp-content/uploads/2020/05/0816fdd1c5e4436e86899deca6e321a1-1024x547.jpg)
①「ファイルをアップロード」をクリック、②「ファイルを選択」をクリック
![cocoonヘッダーファイル選択](https://happawormama.com/wp-content/uploads/2020/05/4173d8d4a97fc9de1daf1ce52a1a7594.jpg)
①「ダウンロード」②作成したロゴを選択
背景色などを選択し、プレビューで確認後、問題なければ、ページの一番下、「変更をまとめて保存」をクリック。
完成!
![ヘッダーロゴ変更完成](https://happawormama.com/wp-content/uploads/2020/05/01f15f4052a76a2e2e3842ab5047da0d-1024x155.jpg)
コメント