キットの組みヘッダー部品

「まず最初に」「新規サイトを作る」の項目を終えたら、後はキットの部品ヘッダーを挿入・編集すれば「キット組みヘッダーで作るサイト」の外観は完成です。

ここでは、部品ヘッダーの入れ方と編集方法を解説してみます。


まずは、ページを作る際にテンプレートを設定しますがその時に「kit-header」を選択しているか確認してみてください。後は、エディターで一番上に来るように入れたいヘッダー部品のボタンを押して配置します。


ヘッダーは2種類、商品画像なしがAのヘッダーで、 商品画像ありがBのヘッダーです。それぞれ82種類のヘッダー画像が用意してあります。

配置の方法
1
os

先ずはテキストタブを押してテキストエディターにします。次に右の部品メニュー呼び出しの中の「組みヘッダー部品」を押します。

すると、上記のようにヘッダー部品のボタンが現れます。部品組みヘッダーの種類は上記の「サムネイル」を押すか、もっと大きなサンプルを見るならこの部品表のサンプルの項目を開いて部品番号を決めてください。


1
os

この段階ではエディター内には何も書かれていないと思いますので、エディターにカーソルを入れた状態にして、配置したい番号のボタンを押すと、組みヘッダー部品が配置されます。

もし何かエディターに書かれていたなら、一番上に来るようにカーソルをいれて配置してください。


1
os

次に、ビジュアルタブを押してビジュアルエディターにします。上記のように組みヘッダーが実際のサイトに近い感じで表示されるので、先ずは文字を打ち替えたり、文字の大きさを変えたり、文字に色をつけたり、写真と重なって見にくければ、文字に縁取りをしたりと文字系を先に編集していきます。
(拡張エディターの使い方は、左メニュー欄に解説がありますのでそちらを参考にしてください)

「更新」ボタンを押して保存も忘れずに作業をしてください。


商品画像

商品画像入りのBを使う場合は、商品画像はだいたい下のサンプルの画像と同じ感じでの縦横比率でトリミングしてください。


作られた画像は、 「 user-photo 」フォルダーの中にアップしてください。
場所は、 「 wp-content 」フォルダーの中の、 「 themes 」フォルダーの中の、 「 wordpress-landingpage 」フォルダーの中の、
「 image 」フォルダーの中の、 「 user-photo 」フォルダーの中に作った登録フォルダー内にアップしてください。ワードプレスは階層が深いので注意してアップしてください。

キット組みヘッダー Aタイプ
os
あああああああああああああああああああああああああ
ああああああああああああああああああああ
ああああああああああああああああ
キット組みヘッダーAタイプ
組みヘッダー番号「72」
ここが
ポイント
あああああああああああああああああああああああああああああああああ
ここが
ポイント
あああああああああああああああああああああああああああああああああ
ここが
ポイント
あああああああああああああああああああああああああああああああああ
os

配置後は、文字はワードプレスのエディターにて、打ち直しや、文字の太さ、大きさ、色などを編集してください。

ここではエディターでは編集できない部分を編集していきます。

エディターはテキストエディターにして編集を行います。


帯などの部品は色を変えられます。

<!-- ▼トップ帯色変え▼ -->
<div class="n-header-topobi" style="background-color: #415e9f;">

こちらは上部の帯の色です。

<!-- ▼中央帯色変え▼ -->
<div class="n-header-big03" style="background-color: #fefde0;">

こちらは、タイトル下の帯の色です。

下の楕円形の画像は何色か差し替えができます。

<!-- ▼楕円左▼ -->
<div class="n-header-maru" style="background-image: url(image/btn/m-09.png);">

ピンクの部分の数字を変えていきます。

キット組みヘッダー Bタイプ
os
あああああああああああああああああああああああああ
ああああああああああああああああああああ
ああああああああああああああああ
キット組みヘッダーBタイプ
組みヘッダー番号「72」
11111
商品のイメージ写真です
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
ああああああああああああああああああああああああああああああああああああああああああああああああああああああ
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
os

配置後は、文字はワードプレスのエディターにて、打ち直しや、文字の太さ、大きさ、色などを編集してください。

ここではエディターでは編集できない部分を編集していきます。

エディターはテキストエディターにして編集を行います。


帯などの部品は色を変えられます。

<!-- ▼トップ帯色変え▼ -->
<div class="n-header-topobi" style="background-color: #415e9f;">

こちらは上部の帯の色です。

<!-- ▼中央帯色変え▼ -->
<div class="n-header-big03" style="background-color: #fefde0;">

こちらは、タイトル下の帯の色です。

商品画像の右の白い帯は固定になっています。


商品画像は、

<!-- ▼商品画像▼ -->
<div class="n-header-goods"><img src="image/user-photo/goods-01.png" width="100%" height="auto" alt="11111">

こちらのピンクの部分を作った画像の名前に拡張子ごと差し替えてください。

キット組みヘッダー編集が終わったら

組みヘッダーの編集が終わったら「更新」をおして保存して、後はサイト内を部品を使いながら本文を組んでいきます。

後の作業的な流れは

・部品を使ってサイトを作っていく
・フッターリンクを編集する

となります。どちらを先にしても問題ありません。ただ作りやすさからすると先ずは先にサイトの構築を開始して出来上がったら最後にフッターリンクを配置して編集する方が、作業はわかりやすくなります。

os
os