Shopifyのテーマエディターの解説(ヘッダー）
Shopifyのテーマエディターのヘッダーについて解説致します。
ヘッダーは以下の画像の青いブロックで囲まれたところをいいます。
↑画像1
↑画像2
そもそもヘッダーとは何かを解説すると、ホームページの上部に配置され、サイトタイトル、画像などが表示されている箇所のことをいいます。
画像1の左側メニュー欄のヘッダーをクリックしてください。
そうすると、左側メニュー欄がこういった画面に切り替わると思います。
↑画像3
1つずつ解説していきます。
まず、配色ですが、下の画像4の5種類から選択することができます。
↑画像4
この画像4の画面は左側メニュー欄の「配色」の中をクリックすることで表示されます。
配色は告知バーの時と同じようにアクセント1〜反転までの5種類です。
今回も、それぞれの配色パターンの違いについて載せます。
↑アクセント1
↑アクセント2
↑背景1
↑背景2
↑反転
次に、ロゴについて解説します。
↑画像5
現在のこのサイトにはロゴがありません。
出現させるにはどうしたらいいでしょうか。
↑画像6
画像6の左側メニュー欄にある
テーマ設定]でロゴを編集する、の
テーマ設定] をクリックしてください。
そうすると、左側メニュー欄がこういった画面に切り替わります（画像7）。
↑画像7
テーマ設定について、細かな説明はここでは割愛します。
画像7の「ロゴ」をクリックしてください。
そうすると、こういったものが現れます（画像8）
↑画像8
この画像8の「ロゴ」の中の「画像を選択」から、ロゴ画像を選択できます。
「ロゴ」の中の「画像を選択」をクリックしてください。
そうすると、画像9の表示になります。
↑画像9
私がもともと練習で紅茶の画像とサーフィンの画像を1回ここで使ってみたため、ライブラリにその2つの画像が表示されています。
画像9の上のメニューの右にある「無料の画像」をクリックしてください。
そうすると、画像10の表示になります。
↑画像10
「Staff Favorites」や「Shop Local」といったメニューがありますが、
これは Shopifyが商用利用しても良いですよーと許可が降りている画像になります。
この中の「Staff Favorites」をクリックしてください。
↑画像11
今回は、画像11の中の右上の夕日の画像を選択します。
そうすると、画像12のように、Home 、Catalog 、Contactの左側に夕日の画像が表示されました。
↑画像12
このロゴ画像ですが、左側メニュー欄の「デスクトップ用ロゴの幅」のpx数を変更することによって、大きさを変えることができます。
試しに300pxにしてみましょう（画像13）
↑画像13
ロゴ画像がとても大きくなりましたね。
ですが、これだと大きすぎるため、
120pxに設定しておきます（画像14）
↑画像14
「デスクトップ用ロゴの幅」ですが、50px～300pxまで変更可能になっています。
次に、ファビコン画像について解説します。
上の画像14の中の左側メニュー欄 ファビコン画像の中の「画像を選択」をクリックしてください。
そうすると、画像9の画面がまた表示されます。
今回は、「Staff Favorites」の中の紅茶の画像を選択しましょう。
↑画像15
選択しました。
ファビコン画像とはwebブラウザで新規タブを開いたときにタブに表示される画像になります。
ですが、
この編集画面のファビコンを確認すると、
画像16のようになっています。
↑画像16
ここはあくまで編集画面のため、ファビコンは変わっていないということになります。
画像15の左上にある[←]閉じるボタンを押して
Shopifyの管理画面に戻ってください。
左側メニュー欄のオンラインストア→目のマークを押して下さい（画像17）
↑画像17
そうすると、
↑画像18
先程、設定した紅茶の画像がファビコンになっています。
続いて、ロゴの説明に戻ります。
先程設定した夕日のロゴ画像ですが、画像19のように
位置を変えることも可能です。
この画像19の表示は左側メニュー欄のデスクトップのロゴの位置の中をクリックすることで出てきます。
↑画像19
位置の種類には4種類ありますが、それぞれの違いについても載せます。
↑左上
↑上部中央
↑中央部左側
↑中央
次に、「メニュー」の解説をします（画像20）
↑画像20
画像20の「Main manu」をクリックしてください。
そうすると、画像21の画面になります。
↑画像21
この画面ではメニュー欄の名称、リンク先、メニューの追加をすることができます。
試しに、Home を Top に変えてみましょう。
画像21の Home の右にある編集をクリックしてください。
そうすると画像22の表示が右に出てきます。
↑画像22
ここで現在設定しているメニューの名称を変更することができます。
↑画像23
個の画面ではリンク先の変更もできます。
画面右下のボタンの
緑のボタンで、変更を適用する をクリックしてから
メニューの保存 をクリックしてください。(画像24)
↑画像24
↑画像25
変更が適用されて、HomeがTopに変わりました。
試しにメニュー項目の追加もしてみましょう。
画像21の画面に行って、青い文字の「メニュー項目を追加する」をクリックしてください。
そうすると、画像26が右に出てきます。
↑画像26
notice(お知らせ)というメニューを追加してみましょう。
リンク先はBlogsの中のnewsにします(画像27)
↑画像27
画面右下の緑ボタン「追加する」をクリックしましょう(画像28)
↑画像28
そうすると、同じ画面にて「notice」が追加されています(画像29)
↑画像29
右下の緑ボタン「メニューを保存」をクリックし、
この画面を×で閉じて、元のテーマエディター画面に戻ってみましょう。
(更新させない場合はページ更新してみてください)
先ほど設定した「notice」が追加されています(画像30)
↑画像30
続いて、メニュー欄の表示の変更もしてみましょう。
↑画像31
テーマエディタ画面左側メニューの
画像31の「変更」をクリックしてください。
そうすると、画像32が表示されます。
↑画像32
メニューを変更をクリックしてください。
そうすると、画像33の画面に切り替わります。
↑画像33
Footer menu と、 Main menu があり、
現在は Main menu が選択されていることがわかります。
Footer menu を選択してみましょう。
↑画像34
メニュー欄の表示が変わりました。
このsearchというのは文字通り「検索」になります。
実際にsearchをクリックして見ましょう。
すると、画像35の画面に切り替わります。
ここで、サイト内で何か検索したいキーワードを入力するということですね。
ちなみにですが、このメニュー欄、自分で1から作ることもできます。
画像36の青字の「メニューを作成」をクリックしてください。
↑画像36
この画面にて、メニューを1から作成できます。
↑画像37
試しに少し適当に作ってみます。
「お試しメニュー」というメニューを作成しました。 メニュー欄の項目はa、b、cとしています。
↑画像38
この「お試しメニュー」にチェックマークを入れたところ、問題なくサイトに適用されました（画像39）
↑画像39
次に、デスクトップのメニュータイプについて解説致します。(画像40)
↑画像40
デスクトップのメニュータイプとはメニューの表示の仕方を変えることができます。
ここの項目は2種類しかないです。
ちなみに、ここの2種類の表示を確認をするために事前に準備をしておくことがあります。
以下動画1を見てください。
↑動画1
以下が、それぞれのメニュータイプの違いになります。
↑
ドロップダウン
↑メガメニュー
Discussion