コンテンツ編

C01 サイトマップを作成する。

サイト内の全ページのサイトマップを作成します。

【手順】

1. 以下のおまじないを記述します。page=　にはページ名を指定します。作成したいページ名をすべて記述してください。

   （例）
   #contentsx(page=haik講座,fromhere=off)
   #contentsx(page=haikの構造,fromhere=off)

2. 以下のスクリプトをサイトマップを作成するページにコピペします。

   #beforescript{{
   <style type="text/css">
   <!--
   /* 文字サイズと行間を調整 */
   .haik-container ul.list1, .haik-container ol.list1 {
       font-size: 14px;
       line-height: 14px;
   }
   -->
   </style>
   }}

【解説】

• 文字サイズと行間の初期値が大きくて間延びしているので小さく調整しています。

C02 カレンダーの文字サイズと隔週土曜日の文字色を変更する。

QHMのとき、カレンダーの文字サイズを変更したいという要望があり対応しましたが、今回はさらに隔週土曜日の文字色を変更したいという要望に対応しました。
カレンダーは #calendar2 を使用します。マニュアルは、 旧QHM会員マニュアルを参照してください。
参考）QHMユーザのためのTips　カレンダーの文字を大きくしたい

• こちらは通常のカレンダー

  << 2016.2 >> [コンテンツ編]
  日	月	火	水	木	金	土
  	1	2	3	4	5	6
  7	8	9	10	11	12	13
  14	15	16	17	18	19	20
  21	22	23	24	25	26	27
  28	29

• 文字サイズを大きくし、隔週土曜日の文字色を変更したカレンダー

  << 2016.2 >> [コンテンツ編]
  日	月	火	水	木	金	土
  	1	2	3	4	5	6
  7	8	9	10	11	12	13
  14	15	16	17	18	19	20
  21	22	23	24	25	26	27
  28	29

【手順】
1. 以下のスクリプトをページ内にコピペします。

-こちらは通常のカレンダー
#calendar2(201602,off)

-文字サイズを大きくし、隔週土曜日の文字色を変更したカレンダー
#html2(<div class="bigcalendar">)
#calendar2(201602,off)
#html2(</div>)

#beforescript{{
<style type="text/css">
<!--
/* カレンダーの文字サイズを大きくする */
.bigcalendar table.style_calendar {
    font-size:22px;
}

/* 隔週土曜日の文字色を変更する */
.bigcalendar table.style_calendar tr:nth-child(2n) td.style_td_sat a{
    color: #FF0000;
}
-->
</style>
}}

【解説】
1. #beforescript内で　bigcalendarというクラスを新規に定義します。
2. #calendar2 の前後を#html2 で囲み、bigcalendarクラスの開始と終了を指定します。
　終了タグの #html2(</div>)　が抜けたりすると画面が真っ白になってどうしようもない状態になりますので、十分に注意して必ずプレビューで確認してから更新してください。

C03 スマホのときだけ常に画面下部に電話番号を表示する

スマホのときだけ、画面下部に電話番号の画像を表示します。そこをタップすると電話がかかります。パソコンのときは、お問合せの画像を表示します。そこをクリックすると、問合せのページへジャンプします。
パソコンで当サイトをご覧のときは、マウスでブラウザの横幅を変更してみてください。画面の右下の画像が変化します。

• スマホの時だけ以下の画像を表示します。
  
• パソコンの時だけ以下の画像を表示します。(2016/03/09 仕様追加）
  

【手順】
1. 電話の画像を作成し、SWFUでアップします。当サイトの画像は　bnr_fix_tel50p.png 幅：170px 高さ：40px です。
問合せの画像も作成します。　bnr_fix_contact.png
2. 以下のスクリプトを電話番号を表示したいページ内にコピペします。全てのページに表示したいときは、フッターにコピペしてください。

#beforescript{{
<style type="text/css">
<!--
.fixpos {
bottom:0;
height:40px;
left:0;
line-height:0;
margin:0;
text-align:right;
position:fixed;
width:100%;
}
.fixpos a {
margin-right:40px;
}
-->
</style>
}}

#only_mobile{{{
#html{{
<div class="fixpos">
<a href="tel:03-1234-5678"><img src="swfu/d/bnr_fix_tel50p.png" alt="電話はこちらへ"></a>
</div>
}}
}}}

#only_pc{{{
#html{{
<div class="fixpos">
<a href="http://haik.qhmtips.com/index.php?%E5%95%8F%E5%90%88%E3%81%9B"><img src="swfu/d/bnr_fix_contact.png" alt="お問合せはこちらへ"></a>
</div>
}}
}}}

【解説】

• 固定の位置を指定するクラス fixpos を作成し、そこに画像を表示させます。
• #only_mobileプラグインを使い、モバイル（スマホ）のときだけ電話の画像を表示します。
• #only_pcプラグインを使い、パソコンのときだけ問合せの画像を表示します。（仕様追加）
• 画像の位置をもっと左に寄せたいときは　margin-right:40px;　の値を大きくしてください。

C04 画像のメニューをPCとモバイルでいい感じに並べたい

パソコン(PC)で一行に4個並べている画像のメニューを、スマホ（モバイル）で2個づつ2行に並べる方法です。通常は、スマホの表示では1行に１つの画像が表示されるようになりますが、それを2個づつ2行に表示するようにしてあります。
【手順】

1. 画像を作成しSWFUでアップします。
   当サイトの例では　横:170px 高さ:40px の画像を用意(menu1.png ....)
2. 以下のおまじないを記述します。

   #only_pc{{{
   &deco(#C7243A){こちらのメニューは、PCのときのみ表示します。};
   #cols{{
   &show(menu1.png,,);
   ====
   &show(menu2.png,,);
   ====
   &show(menu3.png,,);
   ====
   &show(menu4.png,,);
   }}
   }}}
   
   #only_mobile{{
   &deco(#C7243A){こちらのメニューは、モバイルのときのみ表示します。};
   CENTER:&show(menu1.png,,,70%);　　&show(menu2.png,,,70%);&br;
   CENTER:&show(menu3.png,,,70%);　　&show(menu4.png,,,70%);&br;
   }}

【解説】

• PCのときは、#only_pcプラグイン内に#colsを使い４段組表示します。
• モバイルのときは、#only_mobileプラグイン内で2個づつ2行表示します。

  #only_mobileの中では #colsが有効にならないようなので、画像を並べているだけです。
  表示の画像サイズを少し小さくして(70%表示)、スマホで綺麗に表示するように調整しています。
  パソコンで当サイトをご覧のときは、マウスでブラウザの横幅を変更してみてください。画像の表示が変わります。

  こちらのメニューは、PCのときのみ表示します。