パーツとは？

「パーツ」とは、段組を使ったメンバー紹介や
パネル表示を使ったページリンクなど便利に使える組み合わせです。

見出しや、箇条書きといった文字装飾よりも、
もうすこし大きい単位、「枠+見出し+説明+ボタンリンク」を
組み合わせたものがパーツとなります。

haikテーマを導入すると、編集画面で「パーツ」ボタンが現れます。
このパーツボタンをクリックして、使いたいパーツを選ぶと、
自動で『パーツ用のおまじない』が入力されます。

この入力されたパーツをカスタマイズしたり、
組み合わせることで、様々な表現が可能になります。

更に、このパーツは「様々な機能の組み合わせ」ですので、
「ご自身で改良したり、作り出す」こともできます。

ここでは、代表的なパーツを細かく解説しつつ、
パーツを改良する方法、パーツを作り出す方法を説明します。

パーツ挿入機能

最初は、haikに用意されているパーツを利用しましょう。

いきなり自分で作るのは難しいため、用意されたものを使い、
カスタマイズし、仕組みを理解しましょう。

パーツ機能は、以下のような例になります。

• アイキャッチ — サイト上部の、目を引く部分のパーツです
  • ベーシック — キャッチコピー + オファーボタンのシンプルな構成です
  • モダン — 背景画像に効果をつけた、今風の構成です

• ナビ — ナビ部分で使うパーツです
  • 右揃え — ナビの項目を右寄せにします
  • 検索ボックス付き — ナビにページ内単語検索ボックスが挿入されます
    
    

パーツのカスタマイズ

パーツの仕組みを知るために、カスタマイズをやってみましょう。

まず、パーツ挿入機能から、パーツを呼びだし、
『パーツ』→『メンバー紹介』を選びます。
すると、以下のようなコードが現れます。

これは、#cols という段組を使って、
その中に「画像」「見出し３」「サブ見出し」「説明文」を、
メンバーの数だけ繰り返しています。

たとえば、もう１人増やしたい場合は、
１列に４人並べるか、次の行に置くようにします。

cols の代わりに thumbnails を使うと、
段組み１つ１つに、枠がつきます。
適宜書き換えをして、メンバーを入れ替えたりできます。

このように、貼り付けられたパーツのおまじない（Wiki書式）を少し変更すれば、
自分なりの表現が簡単にできます。

『完成イメージ』が完璧にできあがって、
そのために『どんなプラグインや、表現を使えば良いか？』がイメージできないと、
パーツを自分で作ることはできません。

そこで、代表的なパーツを使うことから始め、
徐々に自分らしく表現をしていけばよいでしょう。

代表的なパーツについて

以下、代表的なパーツの構成要素について解説します。
構成要素と、表示を見比べることで、
パーツの仕組みが理解できるようになるでしょう。

アイキャッチ（ベーシック）

アイキャッチパーツ（ベーシック）は、 #eyecatchのおまじないに、背景画像を指定します。
中には、キャッチコピーとオファーボタンを設置しています。
シンプルですが、良い画像と良い文章のみで、インパクトが出せます。

アイキャッチ（動画再生）

アイキャッチパーツ（動画再生）は、
アイキャッチと２段組みの組み合わせです。
それぞれ、キャッチコピーと動画を段組みに設置すれば、
動画で、商品・サービスの価値を伝えられます。

見出し + サブ見出し

見出しとサブ見出しのおまじないを組み合わせた、
見出しパーツもあります。
かなり細かい部分ですが、ちょっとした工夫が見た目を洗練させます。

定義文

定義文を使うと、テーブル表のように、
情報を整理してみせることができます。

カード表示

#thumbnailsを使うと、
カード型の段組みができます。
メンバー紹介や、メニュー表示などに最適です。

3つの特徴

3つの特徴パーツを使って、
あなたの商品やサービスの特徴を説明しましょう。
あえて3つに絞り、制限の力を利用して、
独自性のある特徴を書きましょう。

セクション（背景色）

セクションパーツは、
サイトの中で特に強調させたい部分に使いましょう。
購入を促したり、特徴を説明したり、
背景・文字色を反転させるなど、目を引くエリアを設置できます。
#layout(fullpage)というレイアウトを使うと、よりかっこ良くなります。

フッター

haikテーマでは、
細かい情報はできるだけフッターに集めましょう。
アイキャッチやメイン部分に、しっかりと魅力を書き、
読み終わって「もっと知りたい」と思った時に、
フッターのリンクをたどってもらうように設計しましょう。

ナビ、メニューのパーツについて

ナビやメニューには、専用のパーツが用意されています。
それぞれ、「サイトの - ナビ編集」「サイトの - メニュー編集」から編集を行います。

ナビを組み合わせる

haikのナビは、#bs_navというおまじないを組み合わせることができます。
ナビの左側にメインの項目、右側に検索フォームといった具合です。

ワンページ用ナビ

ページ内リンクを活用して、ワンページサイトを作成することもできます。
ページ内の見出しに、アンカー名をつけることで、
ナビ項目をクリックすると、見出しの位置に移動します。
わかりやすいアンカー名をつけるようにしましょう。

メニュー（検索フォーム付き）

haikのメニューは、「箇条書き形式」で書きます。
（※従来までの「見出し形式」ではなく。）
検索フォームをナビに置く代わりに、メニューに置いても良いでしょう。

メニュー（ページ内リンク）

メニューにも、アンカーを使用することで、ページ内リンクができます。
コンテンツの見出しにリンクさせるなどができます。

メニューの置き換え

#menu を使うと、ページ毎に個別のメニューを表示できます。
好きな名前でページを作成し、メニューの内容を書き、
#menu(作成したページ名)を本文編集に書きます。
共通のメニューではなく、ページ毎にメニューを変えたい場合にお使い下さい。

パーツを自分で作る方法

パーツを自分で作る場合、以下のように考えます。

1. レイアウトを考える
2. 中身の構成を考える
3. レイアウトに必要な機能を選ぶ
4. 中に必要な機能を選ぶ
5. 実際に書いてテスト

たとえば、レストランのメニューを用意するとします。

• サラダ
• アラカルト
• メイン
• デザート
• ドリンク
• コーヒー

それぞれ、イメージ画像と、商品名をリストで表示する場合、
以下のようなレイアウトを考え、構成を考えます。

これらを実現するのは、thumbnails(枠付き段組み)です。
これを使って、枠を作ります。

プラグインのリストを眺めて、
どのような表現が可能か知っておくと発想しやすくなります。

thumbnailsで骨組みを作ります。
ここでは、見やすいように分けていますが、
実際は、下へ続けて書いてください。

その中に、見出し、画像、箇条書きを使って内容を書きます。

中身を埋めていく
そして、これらを目立つように「大きな枠」で囲ってみましょう。
section を使います。

section を使って調整する
実際にできたものが、こちらです。