• 更新履歴 2010 08-23
• テンプレートの追加･変更方法
• プラグインのHTML内容を変更した後に必ず行うこと
• 位置や文字サイズ、背景色などのデザインの変更
• デフォルトの表示を変更する
• テンプレートを区分けする
• 入力した番号の公式･共有テンプレートで閲覧
• 特定のテンプレートを一時的に選択肢から外す
• ページを移動した後も適用したテンプレートで表示する
• ご利用にあたって

---

テンプレートの追加･変更方法

　select要素内にoption要素を追加します。入替えるときは既存のoption行を削除します。

公式･共有テンプレート

　プレビューボタンにカーソルを合わせるとブラウザのステータスバーに番号が表示されます。プレビューで開いたページのアドレス欄にも表示されます。

http://paro3day.blog4.fc2.com/?share=21038&index&mob=0

　shareの後に続くこの番号を value に入れます。

<option value="21038">japon</option>

　japon の部分には適当な名前を入れることができます。

<option value="21038">[P]japon</option>

　加えると次のようになります。

<option value=".">---------------</option>
<option value="20997">color</option>
<option value="23596">fresh_green</option>
<option value="21036">gokuraku</option>
<option value="20987">niziiro</option>
<option value="20988">urara</option>
<option value="21038">[P]japon</option>

ダウンロードしたテンプレート（テンプレート管理）

　テンプレートの名前を value に入れます。このとき、先頭には必ず半角数字の「0」を入れます。

0 + テンプレートの名前

<option value="0dobon">dobon</option>

　option要素内の dobon の部分には適当な名前を入れることができます。

<option value="0dobon">[S]ドボン</option>

　加えると次のようになります。

<option value=".">---------------</option>
<option value="20997">color</option>
<option value="23596">fresh_green</option>
<option value="21036">gokuraku</option>
<option value="20987">niziiro</option>
<option value="20988">urara</option>
<option value="0dobon">[S]ドボン</option>

　テンプレートの名前の先頭に「0」がある場合も「0」を加えます。

0 + 007

<option value="0007">必殺仕事人</option>

• ▲

プラグインのHTML内容を変更した後に必ず行うこと

　ダウンロードしたテンプレートにプラグインの内容を反映させるには、「自分のブログURI/?publish」にアクセスします。この措置は他のPC（自分以外の誰か）が行っても有効です。

http://paro3day.blog4.fc2.com/?publish

　あるいは、テンプレート管理ページから、リストに加えたダウンロードテンプレートの[編集]をクリックして、テンプレートの[更新]ボタンをクリックすることでプラグインの内容が反映されます。

※既に反映されている場合や公式･共有テンプレートのみ適用変更するのであれば、この措置は必要ありません。

• ▲

位置や文字サイズ、背景色などのデザインの変更

　IEはoption要素が type="file" 並に堅牢なため、option要素のスタイルは変更できません。form要素、select要素のデザインは変更できます。

　全体の横位置はform要素のスタイルを変更します。center を left に変更すると左寄せになります。

<form action="./" id="tmpForm" name="tmpForm" style="text-align:left;">

　全体の縦位置はform要素のスタイルを変更します。margin を 加えます。数値を増やすと上部余白が増加します。

<form action="./" id="tmpForm" name="tmpForm" style="text-align:centert;margin:10px 0;">

　文字サイズなどを変更するときはselect要素にスタイルを追加します。

<select name="tmpSelect" onchange="templateSlt.main(0)" style="text-align:left;font-size:11px;color:#000;background:#f8f8f8;border:1px #aaa solid;">

　ブラウザによってはoption要素のスタイルも有効です。

<option value="20997" style="background:#f6f6f6;">color</option>

　IEでテキストの左余白がどうしても欲しいときは、option要素内の先頭に全角スペースなどを入れます。

<option value="20997">　color</option>

• ▲

デフォルトの表示を変更する

　「---」の部分を別のテキストに変更します。valueの「.」は変更してはいけません。

  <option value=".">---------------</option>

  <option value=".">-----Default-----</option>

  <option value=".">テンプレート選択</option>

• ▲

テンプレートを区分けする

　見出しをつけて、テンプレートを整理します。

optgroup要素を使った方法

　IEはoptgroup要素が type="file" 並に堅牢なため、デザインのスタイルは変更できません。

　区分けしたいoption要素をoptgroup要素で挟みます。label には 見出しの名前を入れます。

<option value=".">---------------</option>
<optgroup label="■公式テンプレート" style="font-style:normal">
  <option value="20997">color</option>
  <option value="23596">fresh_green</option>
  <option value="21036">gokuraku</option>
  <option value="20987">niziiro</option>
  <option value="20988">urara</option>
</optgroup>
<optgroup label="■共有テンプレート" style="font-style:normal">
  <option value="0pazb-linie">pazb-linie</option>
  <option value="0pazw-linie">pazw-linie</option>
</optgroup>

option要素を使った方法

　IEはoption要素が type="file" 並に堅牢なため、デザインのスタイルは変更できません。

　区切りたい箇所にoption要素を追加します。value には必ず半角ハイフン「-」を入れます。option要素内のテキストには見出しを入れます。

<option value=".">---------------</option>
<option value="-">■公式テンプレート</option>
<option value="20997">color</option>
<option value="23596">fresh_green</option>
<option value="21036">gokuraku</option>
<option value="20987">niziiro</option>
<option value="20988">urara</option>
<option value="-">■共有テンプレート</option>
<option value="0pazb-linie">pazb-linie</option>
<option value="0pazw-linie">pazw-linie</option>

• ▲

特定のテンプレートを一時的に選択肢から外す

[A][B]どちらかを選択します。

[A]不要なoption要素を <!-- と --> で挟む

<option value="20997">color</option>
<!--<option value="23596">fresh_green</option>-->
<option value="21036">gokuraku</option>

[B]不要なoption要素にdisabled属性をつける

<option value="20997">color</option>
<option value="23596" disabled="disabled">fresh_green</option>
<option value="21036">gokuraku</option>

　ただし、固陋なIEでは機能しません。そこで、valueの先頭に半角ハイフン「-」をつけてスクリプトの動作を止めます。

<option value="20997">color</option>
<option value="-23596" disabled="disabled">fresh_green</option>
<option value="21036">gokuraku</option>

• ▲

入力した番号の公式･共有テンプレートで閲覧

　任意の番号を入れてボタンをクリックすると、そのテンプレートが適用されます。あらかじめ番号を知っておく必要があります。先頭に「0」をつけて、テンプレート名を入力することで、ダウンロードしたテンプレートも適用できます。

　</select> と </form> のあいだに次のコードを追加します。

</select>
<p style="margin-top:0.7em;">
 <input type="text" value="" style="width:5em;" />
 <input type="button" value="Change" />
</p>
</form>

• ▲

ページを移動した後も適用したテンプレートで表示する

　最初に現在使用（適用）しているテンプレートのHTML、head要素内（</head>の前）に次のコードを加えます。

<script type="text/javascript"><!--
(function(){if(document.cookie.match(/tmpslt=([^ ;]+)/)){
var t=unescape(RegExp.$1),h=location.href;
if(t=='.'||/(share|template|style)=/.test(h)){return;}
var e='http://'+location.hostname,b=(t.charAt(0)=='0')?'template':'share';
var c=h.slice(h.lastIndexOf('/')+1).replace(/^\?/,'&').replace(/^blog-/,'')
.replace(/^(page|date)-/,'&$1=').replace(/^entry-/,'&no=')
.replace(/^category(-)?/,'&cat=').replace(/^archives\.html/,'&all')
.replace(/(e|t)(=\d+)-(\d+)/,'$1$2&page=$3').replace(/\.html/,'');
location.href=e+'/?'+b+'='+t.replace(/^0/,'')+c;
}})();
--></script>

</head>

　次に『Select Template』プラグインのHTMLを編集します。

　1行目のform要素にclass属性（class="tmpLoad"）を追加します。

<form action="./" id="tmpForm" name="tmpForm" class="tmpLoad" style="text-align:center;">

　最後に「自分のブログURI/?publish」にアクセスして、プラグインの変更を即座に反映させます（既に反映されている場合は必要ありません）。

（例）http://paro3day.blog4.fc2.com/?publish

---

　使用（適用）しているテンプレートを変更するときは、新たに使用するテンプレートにコードを追加します。それまで使用していたテンプレートの追加コードは削除した方がいいかもしれません。

　デフォルト「---」のテンプレートを選択すると、通常のテンプレートに戻ります。

　デフォルトに戻すリンクを設置する場合は次のコードを </form> の後に追加します。「Default」の部分は「元に戻す」「通常のテンプレートで閲覧」など任意のテキストに変更してください。

</form>

<a href="javascript:templateSlt.dval()">Default</a>

　位置や文字サイズを変更する場合は次のようにします。center を left にすると左寄せになります。margin: ; は余白。font-size: ; は文字サイズです。必要なければ削除します。

<p style="margin: 9px 5px 0px;font-size: 11px;text-align: center;">
 <a href="javascript:templateSlt.dval()">Default</a>
</p>

注意点

　自己責任でご利用ください。

　一度、通常のページに移動して、そこからテンプレート適用後のページに自動でジャンプするものです。

　cookieを利用できない場合は機能しません。

　閲覧者の方がテンプレートページをブックマークしてしまう可能性が高まります。

　テンプレートページは、プラグインの反映に時間がかかることが多いため、そのような場合は「自分のブログURI/?publish」で再構築する必要があります。publishのアドレスをお気に入りに追加しておくと楽かもしれません。

　アクセス解析を使用中のテンプレートのHTMLだけにつけていると、別のテンプレートで表示したときに正常に機能しません。機能させるにはすべてのテンプレートに解析をつけるか、どのテンプレートでも表示されるプラグインのHTMLにアクセス解析のコードを移動させます。表示されるのであれば、『最新の記事』『カテゴリ』など、どのプラグインのHTMLに追加しても構いません。

• ▲

更新履歴

• 2010 08-23 22:23 - コード更新。ページを移動した後も適用したテンプレートで表示するを追加。
• 2010 04-13 01:31 - コード更新。[スクリプト] jsファイルを上書き致しましたので再ダウンロードの必要はありません。反映されないときはブラウザのキャッシュをクリアします。別サーバにアップした場合は、jsファイルを上書き修正してください。更新内容は次の通りです。
  ・トップページからの送りページ（page-no.html）が反映されないのを修正。
  ・?形式のページ（?no|?catなど）に対応。
  ・値が空欄の場合は動作しないように。

• ▲

ご利用にあたって

　自己責任でお願いします。

　公式またはダウンロードテンプレートのみの利用が望まれます。

　共有テンプレートは作者による変更がいつでも可能です。信頼できるテンプレートのみリストに加えることを推奨します。あるいはダウンロードして安全を確認したテンプレートをダウンロードテンプレートとしてリストに加えます。これはデザインテーマ作品についても同様です。

---

　利用の報告やリンクなどは不要です。どこかにリンクがあると、制作者のやる気が向上するかもしれませんが、その因果関係についてはよくわかっておりません。

　スクリプトコードの作者表記 Author ～ は削除しないでください。

　改造は自由です。別のサーバーへのアップロードはOKです。

　再配布はご遠慮ください。カスタマイズ後の再配布も含みます。

申請できるのはオリジナルのものに限られます。他所で配布されていたり、掲載されているコードを利用することは認められません。

自作を共有プラグインに登録する

関連記事

• ツイートを指定した件数ずつ表示するプラグイン　Twitter...A
• ツイートを表示するプラグイン　Twitter...
• 親子孫カテゴリプラグイン改良版 カテゴリに新着マークをつける
• 最新コメントのプラグイン『Comments...A』
• 親子孫カテゴリプラグイン「Categories...B」
• 親子カテゴリの展開と子カテゴリを孫カテゴリにするプラグイン
• 表示ページを指定のテンプレートで閲覧するFC2ブログプラグイン