ヘッダー作成

2021-02-042021-06-16WordPress,新規作成,模写作成,作り方,ホームページ,グローバルメニュー,Font Awesome,header.php,ヘッダー,Cocoon,STINGER8,ルクセリタス,WordPress学習,WordPress模写,WordPress新規作成,WordPress,初心者向け

WordPress模写のステップ５
WordPress新規作成のステップ５

ヘッダー作成

【初心者向け】
ワードプレスでウェブサイト作成
親切丁寧にナビゲート♪

WordPress模写、新規作成ともにステップ５です。
いよいよ記事作成ですね！

サイトのレイアウトにはいろいろなタイプがありますが、
当サイトでも使用しているのはこのレイアウトです。
この中でヘッダーとフッターの作成をします。

真ん中の部分はサイドバーがなかったり、逆にサイドバー、ボディ、サイドバーと３カラム（列）になったりとレイアウトの種類がありますが、ヘッダーとフッターはどのサイトでも設定されていると思います。

今回はヘッダー、次回フッターの作成をしていきます。

WordPress模写の今回はこのステップ！

WordPress編　webサイト模写

今回のMENU

ヘッダー作成

ヘッダー作成

ヘッダーの作成

ヘッダーとは画面の最上部ですね。

模写編の題材（上）と新規作成編の題材（下）のサイト画面です。
どちらも赤枠で囲っている部分がヘッダーです。

上の模写サイトのヘッダーでは会社ロゴとグローバルメニューが表示されています。
下ではサイト名とお問い合わせボタンを表示しています。

HTMLとCSSでコーディングする場合

<header>
 <div class="header_menus_sp background_white pc_display_none">
  <div class="header_menus_left">
<!-- 割愛 -->
  </div>
  <div class="header_menus_right">
    <div class="header_top">
<!-- 割愛 -->
    </div>
    <nav class="global-nav">
<!-- 割愛 -->
    </nav>
    <div class="hamburger" id="js-hamburger">
<!-- 割愛 -->
    </div>
    <div class="black-bg" id="js-black-bg"></div>
    </div>
  </div>
</header>

/*********/
/* header */
/*********/
header {
  width: 100%;
  padding-bottom: 0; }

main {
  width: 100%;
  color: black; }

.header_menus_pc {
  left: 0;
  right: 0;
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: row; }

　　　　　┆
　　　　　┆

このように項目ごとにコーディングしていくことになります。
最初から入力するとなるとかなりの工数がかかってしまいます。

WordPressならテーマにもよりますが、表示させたい項目や画像をクリックして選択するだけでヘッダーを作成することができます。

Cocoon 　ルクセリタス　 STINGER 8 のテーマごとにまとめます。

Cocoon

新規作成編での題材、私自身のポートフォリオサイトのテーマが Cocoon です。
テーマって何？（編集編ステップ１）でもお話しましたが、
このテーマは初心者にもやさしく、至れり尽くせりテーマです。

WordPress デビューにおススメかも！！

メニューバーの Cocoon を選んでタブの中からヘッダーをクリックします。

これが Cocoon のヘッダー設定画面です。

ヘッダーレイアウトの種類
ヘッダーの高さ
ヘッダーにロゴを表示させるかどうか
ヘッダーの背景画像の設定
ヘッダーの色の指定

などなどクリックひとつで設定ができます。

いろいろと選択してプレビューを見ながら設定してみるといいと思います。

次は右側のお問い合わせボタンです。

外観 → メニューを選択します。
次にオレンジ枠でヘッダーメニューを選択します。
なければヘッダーメニューを作成します。
緑枠の固定ページからお問い合わせを選びます。
これもなければメニューを追加をクリックして作成します。
メニューに追加されると水色枠にお問い合わせが表示されます。
青枠のメニューを保存をクリックします。

ルクセリタス

テーマ：ルクセリタスでは Luxeritas → カスタマイズ（外観） → 背景・タイトル・ロゴ画像と進みます。

この画面でロゴや背景画像の設定をしています。

他に Luxeritas → カスタマイズ（外観） → ヘッダーでもヘッダーの高さなどが設定できます。

それから背景がグリーンの画像の下のピンクの部分がグローバルメニューです。

これ『編集編ステップ１テーマって何？』でご案内したルクセリタス独特のシステムでデザインファイルというのがあります。
グローバルメニューの部分はここで選択したデザインファイルによって表示されています。

デザインファイルの設定はテーマ：ルクセリタスでは Luxeritas → デザイン選択を選びます。

メニューの内容は Luxeritas → カスタマイズ（外観） → メニュー → グローバルナビで設定することができます。

メニュー名（HOME,ワードプレス編等）を表示させるには項目を追加をクリックします。（赤枠）
すると右側にオレンジ枠のメニューから選択、もしくは新規ページを追加を選びます。

オレンジ枠で追加したフロントページがグリーン枠に表示されます。
グリーンの円の矢印▼をクリックすると詳細設定ができます。
元の名前の欄にオレンジ枠のページ名が表示されています。
メニューに別の名前で表示したい場合はナビゲーションラベルに入力します。（ブルー枠）
<i class="fas fa-home" fa-fw></i>はアイコンを表示させるためのコードです。

またイエロー枠のように項目を右にずらすと上の項目の子メニューになります。
「WordPress編」をクリックすると「WordPress化」が表示されます。
メニューの入れ替えもドラッグでできます。

<i class="fas fa-home" fa-fw></i>は家のアイコンです。
Font Awesome にはたくさんのアイコンが揃っています。

Font Awesome 公式サイト
https://fontawesome.com/icons?d=gallery

【Font Awesome】初心者でもすぐ使える！簡単Webアイコン入門 | CodeCampus

【Font Awesome】初心者でもすぐ使える！簡単Webアイコン入門 | CodeCampus icon facebook icon icon h ...

https://blog.codecamp.jp/font-awesome-icon

ツイッターやフェイスブックなど有名企業のロゴなどもあり
サイト作りには欠かせません。
一覧表を見ているだけでも楽しいですよ。

使ってみたくなるよね！！

Font Awesome のフォントを利用するための設定です。

ダッシュボードからルクセリタス → カスタマイズに進んで Font Awasome タブを選びます。
以下のように設定してください。

Font Awesomeバージョン	Font Awesome 5
アイコンの読込方法	Web Fonts with CSS ( Web フォントで表示 )
CSSの読込方法	非同期（レンダリング高速）
CSSの読込元	CDN
フォントファイル本体の読込元	CDN