サイトの『顔』ともいえる【ヘッダー部分】の設定をしていきたいと思います。
WordPressテーマ『Cocoon』の設定であれば簡単にヘッダーの作成ができます。
合わせてヘッダー部分にロゴを入れると自身のサイト感が出てきますので、ぜひロゴ作りにもチャレンジしてみてください！
以下がヘッダー部分になります。
今回はこちらのヘッダー部分にヘッダーロゴ（画像）を入れていきます
補足としてロゴ位置などの設定に関しても記載をしていきたいと思います
ヘッダー設定【WordPress(Cocoon編)】
まずはヘッダーロゴの設定から始めていきましょう。
ヘッダーロゴを入れてみてから各項目を微調整していけばいいので以下の通りで設定をしていきます
Cocoonの方は以下の手順で設定を行っていきます
管理画面⇒Cocoon設定⇒Cocoon設定の順にクリックをしましょう
Cocoonの設定画面で以下のメニューが表示されますので『ヘッダー』をクリックします。
Step1:ヘッダーロゴ設定
ヘッダーロゴという項目で画像/ロゴを設定します
『選択』をクリックして画像/ロゴを選択しましょう
『ファイルをアップロード』『メディアライブラリ』と表示が出たら画像を選択していきます。
『ファイルをアップロード』新規データを読み込む
『メディアライブラリ』既存のデータを読み込む
今回は新規でアップロードします。
画面左上のタブをクリックし、画面中央の「ファイルを選択」をクリックしてアップロードする画像ファイルを選択して下さい。
※『ファイルをドロップしてアップロード』でも簡単にアップロードできます。
選択したら画像の選択をクリックします
以下の画面に選択した画像/ロゴが反映されます
Step2:ヘッダーロゴサイズ設定
サイトで使用するロゴのサイズに合わせて高さ×幅の設定をしましょう
私のヘッダーロゴサイズは高さ750×幅200です
ヘッダー部分とヘッダーロゴ部分は同じような場所ですが、少しだけ異なりますのでいちお理解しておきましょう。
【ヘッダー部分】
【ヘッダーロゴ部分】
微調整しながら、ロゴが良い感じのサイズで表示されれば設定OKです
Step3:ヘッダーレイアウト
私はセンターロゴ（スリムメニュー）に設定しております
ヘッダーレイアウトの位置は以下の表に書き出してみましたので参考にしてみてください
| ロゴ位置 | ロゴ位置サンプル | 特徴 |
|---|---|---|
| センターロゴ（デフォルト） |  | 画像/ロゴどちらでもOKです |
| センターロゴ（トップメニュー） |  | 画像/ロゴどちらでもOKです ※メニューがロゴ上部に配置されます |
| センターロゴ（スリムメニュー） |  | 画像/ロゴどちらでもOKです |
| センターロゴ（スリムトップメニュー） |  | 画像/ロゴどちらでもOKです ※メニューがロゴ上部に配置されます |
| トップメニュー |  | シンプルな文字のみのロゴ向き ※ロゴとメニューが横並びに配置されます |
| トップメニュー(右寄せ) |  | シンプルな文字のみのロゴ向き ※ロゴとメニューが横並びに配置されます |
| トップメニュー小 |  | シンプルな文字のみのロゴ向き ※ロゴとメニューが横並びに配置されます(スリム) |
| トップメニュー小(右寄せ) |  | シンプルな文字のみのロゴ向き ※ロゴとメニューが横並びに配置されます(スリム) |
運営するサイトのデザインがロゴ位置/メニュー位置の配置で大きく印象が変わってくると思いますのでお好みに合わせて設定してみると良いでしょう
Step4:ヘッダーの固定
ページをスクロールしても、ヘッダーが追従してくる機能です
これも好みですが、サイトのデザイン次第では使える機能かなと思っています!
※パソコン環境のみの動作です
Step5:高さ
ヘッダーの高さをpx数で指定できます。
モバイルの環境ではモバイル用設定のものが利用されます。未入力の場合はデフォルト設定になります。（最小：0px、最大：800px）
Step6:高さ(モバイル)
モバイルでのヘッダーの高さをpx数で指定できます。
834px以下のタブレット以下の幅の狭い端末用です。未入力の場合はデフォルト設定になります。（最小：0px、最大：600px）
Step7:キャッチフレーズの配置
次にキャッチフレーズの表示をしていきます
キャッチフレーズとはサイトの簡単な説明になります！
管理画面⇒設定⇒一般の順にクリックをしましょう
一般設定の画面の以下の場所にキャッチフレーズの入力をします
キャッチフレーズの設定ができたら変更を保存をクリックしましょう
キャッチフレーズの表示位置は3パターンです
キャッチフレーズの位置は以下を参考にしてみてください
| キャッチフレーズ位置 | キャッチフレーズ位置サンプル | 特徴 |
|---|---|---|
| 表示しない | 表示なし | なし |
| ヘッダートップ |  | キャッチフレーズがヘッダー上部に来ます |
| ヘッダーボトム |  | キャッチフレーズがヘッダー下部に来ます |
私の設定はキャッチフレーズなしで設定をしています！
Step8:ヘッダー背景画像
ヘッダー背景画像はサイトのデザインに合わせて設定してみましょう！
ヘッダー画像を選択していきます
わかりやすくカラフルな画像を設定してみます
設定ができたら変更を保存をクリックしましょう
こんな感じになります
画像全体が表示されていないので『高さ』を変更していきましょう！
画像のサイズによっては以下のヘッダー高さを変える必要があります
Step5･6のヘッダー高さとモバイルヘッダー高さを変更し好みのサイズに設定します
ヘッダー高さ500/モバイルヘッダー高さデフォルトで設定しなおします
いい感じです！
Step9:ヘッダー全体色とヘッダー色（ロゴ部）
以下で設定をしていきます
サイトのデザインで色の変更をしてみてください
さいごに
ヘッダー部分はサイトの『顔』ともいえる大事な部分です
Cocoonであればヘッダーの設定も簡単にできますので是非設定してみてほしいと思います。
皆様がサイト作成するうえで、納得するロゴデザインの参考にしていただけると幸いです。
ロゴの作成方法に関する記事はこちら
コメント