ワードプレス無料テーマ コクーンのCocoon設定の中にある「ヘッダーレイアウト」の表示設定は、ワードプレス初心者でも簡単に設定できて便利です。
TOPページのイメージチェンジも、Cocoon設定内のプレビューで確認できるので、サイトの気分転換や季節ごとの雰囲気に合わせて完全オリジナルで自分のブログサイトを楽しむことが可能です。
今回はヘッダーの高さを変えてみた時の見え方、ヘッダーロゴ画像の設定の一例をプレビュー画面で紹介していきたいと思います。
綺麗な画像やセンスの良いイラストで飾られた個人ブログは魅力的で楽しいですね。(@takamaman52)
ヘッダーの構成と設定例
※こちらの画像はヘッダーの高さやヘッダーロゴサイズをデフォルト（空欄）にしています。
ヘッダーは「ヘッダーロゴ」「キャッチフレーズ」「グローバルメニュー」で構成されています。
Cocoonのヘッダー設定のヘッダーの高さやロゴなどの大きさは、デフォルトで簡単に表示でき、またお好みで高さや配置を簡単に変更できます。
ヘッダーの高さを指定した場合の表示例
ヘッダーレイアウト：センターロゴ（デフォルト）
高さ：指定なし（空欄）
ヘッダーレイアウト：センターロゴ（デフォルト）
高さ：50px
ヘッダーレイアウト：センターロゴ（デフォルト）
高さ：800px
高さ指定の数値を大きくして、お気に入りの写真やイラストでブログのイメージを表現するのも素敵だと思います。
ワードプレス キャッチコピーの入力手順
ダッシュボードの「外観」を開き、順番にサイト基本情報の中にあるキャッチフレーズの入力部分へ進みます。
ダッシュボード＞外観＞カスタマイズ＞サイト基本情報＞キャッチフレーズ
入力したら「公開」をクリックします。この手順でキャッチフレーズの書き換えはいつでもできます。
ブログの記事数が増えるにつれ、キャッチコピーを書き換えたくなることもよくあるようです。書き換えるための手順を覚えておくと、心配なくブログを続けていくチカラになるかもしれません。
Cocoon設定 ヘッダーロゴ画像の設定手順
画像作成ソフトでロゴ画像を作成します。今回は、一例として作成した画像サイズと設定例を紹介しています。
パソコンの画像編集ソフトなどを使い、簡単にオリジナルのヘッダーロゴを作ります。
画像編集ができるフリーソフトの「フォトスケープ PhotoScape」は、画像加工が初心者でも無料で簡単に使えて便利です。
「フォトスケープ」で検索し、ダウンロードするとすぐに利用できます。
サイトロゴ画像をCocoon設定内のヘッダーロゴに設定する前に用意しておくことから始まる下準備です。
サイトロゴ画像の作成手順
- 背景が不透明な設定の画像ファイルを新規作成
- ロゴとなるテキスト（文字）を入力。
- イラスト・写真などもお好みで挿入し、自作のヘッダーロゴを作りパソコン内に保存。
Cocoon設定 ヘッダーロゴ作成例
Cocoon設定にヘッダータブ内にある「ヘッダーロゴ」から作った画像ファイルを選択してワードプレスのメディアフォルダにアップロードします。
ヘッダーロゴサイズは、お好みでサイズ指定できますが空欄でもOKです。
ヘッダーレイアウト：センターロゴ（デフォルト）高さ：空欄
ヘッダーロゴサイズ：幅：空欄×高さ：空欄
ヘッダー背景画像の作成と設定
ヘッダーに背景画像やイラストを使って、個性的なイメージにすることもできます。
例として今回はフォトスケープを使って簡単なグラデーションの画像を作って、これを背景画像に設定してみました。
まず、フォトスケープを開き画像を「新規」作成します。背景の不透明度を0％に設定すると、透明なファイルになります。
透明の新規ファイルの右上にある「挿入」＞「長方形」を選択します。
写真やデザインがお好きなかたは、じっくりとお好みのイラストを自作するのも楽しいと思います。
作成した背景画像を選択し、最後に忘れずに「設定を保存」すれば出来上がりです。
まとめ
今回は、Cocoon設定の中のヘッダー設定で、ヘッダーのロゴ画像と背景画像の設定例を解説してみました。
ワードプレス ダッシュボードの外観にある「サイト基本情報」から、「サイトタイトル」と「キャッチコピー」をテキスト入力すれば、ヘッダーはテキストで作成されたヘッダーが表示されます。
さらにオリジナリティを表現！ということで、「ロゴ画像」とヘッダー背景画像」を作成し設定することで もう一歩、自分好みの雰囲気のあるサイトを作ることができます。
グローバルナビメニューの色と幅を簡単に設定できますので、全体のカラーバランスを考えて季節ごとに衣替えするように楽しむことも可能ですね。
これからワードプレスでブログを始めるかた、サイトのお引越しを検討中のかたはエックスサーバー
が初心者向きでオススメです。
