コンテンツ編

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 カレンダーの文字サイズと隔週土曜日の文字色を変更する。

Firefoxでは正常に動作しますが、IE、Chrome、iPhoneで正常に動作しないことがわかりました。
このTipsは未完成ですので使わないでください。申し訳ありません。

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行に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を使い4段組表示します。
  • モバイルのときは、#only_mobileプラグイン内で2個づつ2行表示します。

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

こちらのメニューは、モバイルのときのみ表示します。

menu1.png  menu2.png

menu3.png  menu4.png


ご意見箱

皆様のご意見をお待ちします。

  • 早速の対応ありがとうございます。
    希望通りになりました。

    ありがとうございました。 -- muuuuuw 2016-02-15 (月) 13:23:57
  • tomzo様
    先ほどの件 ログアウトすると隔週土曜日の色はかわりませんでした。
    当方Chromeなので、でめなのかなと思います。
    ログアウト前はちゃんといろが変わっていました。
    取り急ぎご報告まで
    -- muuuuuw 2016-02-15 (月) 13:28:05
  • muuuuuwさんへ
    何故かログイン中は、うまくいきますがログアウトするとダメですね。調査してみますが、ちょっと時間がかかると思います。 -- tomzo 2016-02-18 (木) 22:20:10
  • 初めまして、sadaと言います。
    「スマホのときだけ常に画面下部に電話番号を表示する」を参考にさせていただいております。
    これを、パソコンのみに表示させてくて、「#only_mobile{{{
    」を、「#only_pc{{{」に変更して使って見ましたが、「#only_pc{{{」にしますとサイトの編集が出来なくなってしまいました(汗)
    編集画面で文字も打ち込めないし、プレビューボタンや更新ボタンも押せなくなりました…。
    仕方が無いので、バックアップファイルからフッターのファイルを上書きして元に戻しましたが、どうにかしてパソコンのみに電話番号を表示させて問い合わせページへリンクさせたいのですが、下記に用に変更しても同じようにサイトの編集が出来ない状態です。

    #only_pc{{{
    #html{{
    <div class="fixpos">
    <a href="/contact/"><img src="swfu/d/index.png" alt="お問い合せはこちらへ"></a>
    </div>
    }}
    }}}

    お忙しいとは思いますが、何が原因かおわかりでしたら教えて頂けると助かります。 -- sada 2016-03-06 (日) 04:41:27
  • sada さんへ
    #only_pc を追加してみましたが、何も問題なく動作しています。
    href="/contact/" ではリンクできません。ここには、HTMLで記述しているので、フルパスを記入する必要があると思います。
    -- tomzo 2016-03-09 (水) 00:32:38
  • tomzo様、検証ありがとうございます!

    tomzo様の画像を使わせて頂いて同じように設置すると出来ました!
    自サイトで設置しようとしたのは縦が400pxの縦長の画像で、
    .fixpos {
    bottom:0;
    height:400px;
    とすると、編集画面が固まってしまいます。

    実際に下記のように記述しました。
    本当にお手数をおかけしますが、原因がおわかりでしたら教えて頂けると幸いです。
    どうぞ宜しくお願い致します。

    #beforescript{{
    <style type="text/css">
    <!--
    .fixpos {
    bottom:0;
    height:400px;
    left:0;
    line-height:0;
    margin:0;
    text-align:right;
    position:fixed;
    width:100%;
    }
    .fixpos a {
    margin-right:0px;
    }
    -->
    </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/contact400.png" alt="お問合せはこちらへ"></a>
    </div>
    }}
    }}} -- sada 2016-03-09 (水) 02:18:56
  • sadaさんへ
    高さ400pxの画像で確認したところ、確かに編集画面が固まりますね。調べてみましたが原因不明です。
    なぜ、400pxもの高さの画像が必要なのですか? -- tomzo 2016-03-09 (水) 20:44:14
  • tomzo様、確認して頂き本当にありがとうございます。
    400pxもの高さの画像が必要なのは、下記のサイトのように右端にお問い合せのボタンを表示させたいと思いました。
    http://www.mizuho-law.net/

    tomzo様の方でも、編集画面が固まるのであればあきらめられます。
    tomzo様のスクリプトを使い、画像を小さくしたりしてもう少し頑張ってみます!
    この度は本当にありがとうございました!
    m(_ _)m -- sada 2016-03-09 (水) 23:54:28

当ページは役に立ちましたか?

選択肢 投票
とても役に立った 3  
少しだけ 0  
あんまり 0