WordPress,Cocoon 超ド素人の私が「ヘッダーロゴ」と「ヘッダー背景画像」を設定できるまで
正直に言うと、私は WordPress の使い方が意外と分かりませんでした。
「初心者向け」と書いてある記事を見ても……全然わからない。（もしかして私は“初心者以下”？泣）
そこで、ここでは 私が WordPress（テーマ：Cocoon）で実際に奮闘した記録 を残しておきます。
私と同じように「本当に初めて WordPress を触る人」に、少しでも役に立てば嬉しいです。
今回やること：ヘッダーロゴとヘッダー背景画像の設定
ブログの一番上に表示される、ブログの”顔”となる部分。
ここが整うだけでブログの印象がグッと良くなるので、最初に設定しておきたいポイントです。 下記の赤い枠の部分です。
まずは用語を理解しよう
● ヘッダー
ブログの上部にあって ロゴ（タイトル） や 背景画像 が表示される部分のこと。
● ヘッダーロゴ
ブログのタイトル部分。
私はフォントや色をオリジナルにしたかったので、
背景が透明のロゴ画像を自分で作ってアップロード しました。
● ヘッダー背景画像
ロゴの後ろに表示される横長の画像。
ブログ全体のイメージが決まる大事な場所です。
事前準備で必要なもの
設定前に以下の画像を用意しておきます。
- ヘッダーロゴ（タイトルの画像）
→ 背景は透明にしておくとキレイに表示される - ヘッダー背景画像
→ 横長で、PCとスマホ両方で見たときに違和感が出ないデザインがおすすめ
※スマホでは横長画像の左右が切れる場合があるので、重要な部分は中央に寄せておくと安心です。
ここからは実際の設定手順です。
① Cocoon設定を開く
左メニューから
Cocoon設定 > Cocoon設定 をクリックします。
② 「ヘッダー」タブを選ぶ
ヘッダーの詳細設定画面が開きます。
③ レイアウト設定
「ヘッダーレイアウト」の項目を
センターロゴ にしました。
中央配置だとバランスが良く見えます。
④ 高さの調整
背景画像が十分見えるように、高さの数値を調整します。
（スマホで切れやすいので、実際にプレビューを見ながら決めるのがコツ）
⑤ ヘッダーロゴの設定
「選択」をクリックして
先ほど作成したロゴ画像をアップロードします。
⑥ ヘッダー背景画像の設定
同じく「選択」で背景画像をアップロード。
⑦ 保存
画面の一番下にある
「変更をまとめて保存」
を忘れずにクリック！
設定完了！
これでヘッダーがあなたのオリジナルデザインになります。
私は最初かなり手こずりましたが、やってみると意外とシンプルでした。
同じように「本当に初心者だけどブログを始めたい！」という方の参考になれば嬉しいです。
コメント