p
b^直書き貼り付け$方式では、ボタンのHTML及びCSSコードを、ホストページ(貼り付け先のページ)に直に貼り付けます。ウェブページとボタンを統合的にデザインしたい方にお勧めの方式です。

p
以下にb^直書き貼り付け$方式で、ボタンを貼り付ける例を説明します。この例では、貼り付けるボタンのKeyを b^my-poll$ 、テンプレートの名前を b^tpl-direct$ と仮定いたします。

#################################################################
ts
HTMLコードの||準備

p
ホストページに直接貼り付けるHTMLコードの準備を行います。

p
b^iine/templates/tpl-direct/html/tpl.html$ をテキストエディタで開いてください。テキスト全体に文字列の置換を行うので、置換機能を持ったエディタを使用してください。(ウインドウズのメモ帳には置換機能があります。) ファイルの内容は編集しますが、元のファイルを上書きしてはいけないので、作業を行う前に別のファイル名に保存しておくことをお勧めします。

p
最初にファイル内のHTMLコードを、以下のように、v^<div class="aiin-css %css-ctar%">$とv^</div>$で囲みます。

code
v^<div class="aiin-css %css-ctar%">$
.....................
.....................
.....................
v^</div>$
/code

p
次に、以下のプレースホルダを置換します。

ui
%css-ctar%

ui
%url-tpl%

br

info
HTMLファイル内では、プレースホルダ( k^%url-tpl%$ )はあまり使われません。もしファイル内で使われていなかったら、置換の作業はスキップできます。

p
ファイル内にあるすべての k^%css-ctar%$ を k^aiin-css-(テンプレートの名前)$ で置換します。このチュートリアルでは、貼り付けるボタンのテンプレートの名前は b^tpl-direct$ ですので、k^%css-ctar%$ を k^aiin-css-tpl-direct$ で置換します。

p
ファイルの中で、k^%url-tpl%$　のプレースホルダが使われていたら、k^%url-tpl%$ を b^tpl-direct$のテンプレートフォルダを指すURLで置換します。URLは以下のような形になります。

code
http://.....(iineフォルダまでのURL)...../iine/templates/tpl-direct/
/code

p
これでHTMLコードの準備ができました。後のステップで、このHTMLコードをホストページに挿入します。

#################################################################
ts
CSSコードの||準備

p
b^iine/templates/tpl-direct/css/tpl.css$ をテキストエディタで開いてください。テキスト全体に文字列の置換を行うので、置換機能を持ったエディタを使用してください。(ウインドウズのメモ帳には置換機能があります。) ファイルの内容は編集しますが、元のファイルを上書きしてはいけないので、作業を行う前に別のファイル名に保存しておくことをお勧めします。

p
最初にファイル内のCSSコードを、以下のように、v^<style>$とv^</style>$で囲みます。

code
v^<style>$
............
............
............
v^</style>$
/code

p
次に、以下のプレースホルダを置換します。

ui
%css-ctar%

ui
%url-tpl%

br

p
ファイル内にあるすべての k^%css-ctar%$ を k^aiin-css-(テンプレートの名前)$ で置換します。このチュートリアルでは、貼り付けるボタンのテンプレートの名前は b^tpl-direct$ ですので、k^%css-ctar%$ を k^aiin-css-tpl-direct$ で置換します。

p
ファイルの中で、k^%url-tpl%$ のプレースホルダが使われていたら、k^%url-tpl%$ を b^tpl-direct$のテンプレートフォルダを指すURLで置換します。URLは以下のような形になります。

code
http://.....(iineフォルダまでのURL)...../iine/templates/tpl-direct/
/code

p
これでCSSコードの準備ができました。後のステップで、このCSSコードをホストページに挿入します。

#################################################################
ts
ホストページの||準備

p
まず最初にl^put-two-lines-on-hostpage|二行貼り付け$方式でホストページにボタンを貼り付けてください。(Keyは b^my-poll$ 、テンプレートは b^tpl-direct$ を選択)

p
b^二行貼り付け$で貼り付けた後のHTMLは、以下のような状態になっています。

code
<head>

v^<script src="................../iine/cn/cn.php"></script>$

</head>

v^<div class="ajax-iine" data-pid="my-poll" data-tid="tpl-direct"></div>$

/code

p
この時点で、ボタンがきちんと表示されていることを確認してください。

#################################################################
ts
HTMLコードを||貼り付ける

p
ホストページのdivタグの間に、v^「1. HTMLコードの準備」$で作ったHTMLコードを挿入します。

code
<div class="ajax-iine" data-pid="my-poll" data-tid="tpl-direct">
v^(...ここに「1. HTMLコードの準備」で作ったHTMLコードを貼り付ける...)$
</div>
/code

#################################################################
ts
CSSコードを||貼り付ける

p
ホストページのscriptタグの下に、v^「2. CSSコードの準備」$で作ったCSSコードを挿入します。

code
<script src="................../iine/cn/cn.php"></script>
v^(...ここに「2. CSSコードの準備」で作ったCSSコードを貼り付ける...)$
/code

#################################################################
ts
$cfg["load-resource"]||を||オフにする

p
b^iine/templates/tpl-direct/config.inc.php$ をテキストエディタで開いて、以下のように、k^$cfg["load-resource"]$にv^０$を設定してください。

code
k^$cfg["load-resource"]$ = v^0$;
/code

p
これでテンプレート側からHTMLコードとCSSコードがロードされなくなり、ホストページに貼り付けたHTMLコードとCSSコードが有効になります。

p
これでボタンの直書き貼り付けが完了いたしました。

tpl
std