Top / パーツ例

パーツ例 8種類

3つの特徴

書き方

#cols{{
CENTER:&show(画像,rounded);
CENTER:
** ここに見出し
製品、サービスの特徴を説明。製品、サービスの特徴を説明。
&button(#,success){もっと詳しく};
====
CENTER:&show(画像,rounded);
CENTER:
** ここに見出し
製品、サービスの特徴を説明。製品、サービスの特徴を説明。
&button(#,success){もっと詳しく};
====
CENTER:&show(画像,rounded);
CENTER:
** ここに見出し
製品、サービスの特徴を説明。製品、サービスの特徴を説明。
&button(#,success){もっと詳しく};
}}

パーツ例 > 3つの特徴の設置例

• 見出し部分を揃えるには、画像の大きさを同じにしたほうが良さそうだ。
• サンプル画像の大きさが異なるので、画像の大きさを%で調整したり、改行で調整して、見出しを揃えた。

メンバー紹介

書き方

#cols{{
&show(人物画像,thumbnail,circle);
*** 名前 &br;###役職###
ここに人物紹介。
ここに人物紹介。ここに人物紹介。
====
&show(人物画像,thumbnail,circle);
*** 名前 &br;###役職###
ここに人物紹介。
ここに人物紹介。ここに人物紹介。
====
&show(人物画像,thumbnail,circle);
*** 名前 &br;###役職###
ここに人物紹介。
ここに人物紹介。ここに人物紹介。
}}

パーツ例 > メンバー紹介の設置例

• サンプル画像は「いらすとや」から拝借した。
• 画像サイズを揃えたので、改行などの編集は必要なかった。

カード表示

書き方

#thumbnails{{
** 見出し
&show(画像);
ここに文章。ここに文章。ここに文章。
&button(リンク先,primary){もっと詳しく};
====
** 見出し
&show(画像);
ここに文章。ここに文章。ここに文章。
&button(リンク先,primary){もっと詳しく};
}}
#thumbnails{{
** 見出し
&show(画像);
ここに文章。ここに文章。ここに文章。
&button(リンク先,primary){もっと詳しく};
====
** 見出し
&show(画像);
ここに文章。ここに文章。ここに文章。
&button(リンク先,primary){もっと詳しく};
}}

パーツ例 > カード表示の設置例

• サンプル画像は「いらすとや」から拝借した。
• 見出し以外は、全て「中央揃え」にした。

画像回り込み

書き方

#cols{{
&show(画像);
====
ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。
ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。
}}
#cols{{
ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。
ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。
====
&show(画像);
}}

パーツ例 > 画像回り込みの設置例

• 上段と下段の間に「改行」を入れた。

スライドショー

書き方

#bs_carousel{{
画像ファイル
画像ファイル
画像ファイル
}}

パーツ例 > スライドショーの設置例

• 画像の大きさを小さくしたかったが、「,○○%」では文字が入っただけだった。
• 「&deco」を使って文字の変更をしてみたが、色の変更はできなかった。

中二病女子

ユニコーン

マンモス

ギャラリー

書き方

#cols{{
&show(画像ファイル);
====
&show(画像ファイル);
====
&show(画像ファイル);
====
&show(画像ファイル);
}}
#cols{{
&show(画像ファイル);
====
&show(画像ファイル);
====
&show(画像ファイル);
====
&show(画像ファイル);
}}

パーツ例 > ギャラリーの設置例

• 上段と下段の間に「改行」を入れた。

Googleマップ

書き方

#gmap(hide,zoom=15){{
大阪駅,大阪駅,どんどん開発してます
住所,タイトル,詳細説明
 }}

パーツ例 > Googleマップの設置例

• 住所は「東京スカイツリー」に変更してみたが、やはり失敗した。
• 住所ではなく「経度→緯度」の順番で入力をしたらGoogleマップの表示に成功した。「緯度→経度」の順番では失敗するので注意。
• ページを更新するたびに「このページではGoogleマップが正しく読み込まれませんでした。」というエラー表示が出る。「このウェブサイトの所有者ですか？」で「OK」をクリックするとGoogleマップは表示されるが、実用的ではない。

自動返信フォーム

書き方

#qform(,bootstrap,true){{
name=name,,
email=email
memo=content,内容,,,need,10

finish_mail=''
::From::差出人の名前,yourmail@sample.com
::Subject::<%lname%>様、お問い合わせありがとうございます
<%lname%> <%fname%> 様

!!!!!!ここは消してくださいね!!!!
!!
!! Fromの名前とメールアドレスを必ずご自身のものに変更してください！!!
!!!!!!

こんにちは！
○○です。

お問い合わせ、ありがとうございます。
後ほど、返信をいたしますので、今しばらくお待ちください。


---- お問い合わせ内容 ----
<%all_post_data%>

-----------------------

以上です

''

finish_msg=''
* お問い合わせの完了

こんにちは。
<%lname%> <%fname%> 様

お問い合わせ、ありがとうございました。
確認メールをお送りしましたので、
ご確認ください。

''

notice_mail=''
::Subject::<%lname%>様からのお問い合わせ
::To::yourmail@sample.com

!!!!!!ここは消してくださいね!!!!
!!
!! Toのメールアドレスを必ずご自身のメールアドレスに変更してください！!!
!!!!!!

お問い合わせがありました。

---- 内容 ----
<%all_post_data%>

フォームURL
<%form_url%>

''
}}

パーツ例 > 自動返信フォームの設置例

• Fromの名前は「Manato」、メールアドレスは「Gmailアドレス」に設定した。
• 「こんにちは！○○です。」の「○○」もManatoに書き換えた。
• 注意点として「ここは消してくださいね」の部分は必ず消すこと。
• 2019年6月12日に送信テストを終了した。
  • 結果：成功

追記 2021年4月9日：バグを発見した

送信前に「の確認」とタイトルに表示される。「問い合わせの確認」とかではなく「の確認」なのでバグである。

解決方法

bootstrapの前に任意のテキストを挿入することで解決した。

#qform(【ここに任意のテキストを入れる】,bootstrap,true){{

パーツ例の感想

• Googleマップ表示のgmapプラグインは使えない。
  • 現時点でHAIKの開発が中断されているので使えない機能だと思ったほうが良い。また、API keyは取得しているが、HAIKでの記述方法が不明なので意味がない。
• 自動返信フォームのqformは、デフォルトの記述でも十分使える。利用規約が必要な場合は、利用規約を別ページに書いて利用規約ページを指定することでチェックボックス付きの送信フォームも作れるから用途によっては良いかもしれない。
  • 「contract=ラベル,チェックボックスラベル,利用規約ページ名」
    • 現時点で「ラベル」の部分は何を書くのか不明。
    • 「チェックボックスラベル」の部分は「同意される場合、チェックを入れてください。」などと書く。

参考サイト

• パーツとは？
• Googleマップ（gmap）
• 自動返信フォーム（qform）
  • HAIK 使い方マニュアル
• 住所から緯度、経度を検索
  • Geocoding
• #qform の「確認画面」の、文字の追加方法。
  • HAIK forum
• #qform の「確認画面」の、若干の不備について教えてください。
  • github