Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

表示ページを指定のテンプレートで閲覧するFC2ブログプラグイン

表示中のページを指定のテンプレートで閲覧するプラグイン

名前 : Select Template

対象 : 公式・共有・ダウンロード済みテンプレート

初期 : 5つの公式テンプレートに切り替え 『color』『fresh_green』『gokuraku』『niziiro』『urara』

サンプル : http://paro3day.blog4.fc2.com/

状況 : 登録(2010年4月9日)


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

 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です。

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

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

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

関連記事
  1. comment
  2. 2012-09-06 08:40 No.1408 #-URL

    手順通りにこちらの設定どおりに行ったところ、
    全てのjquery使用のテンプレートのアクティブ部分が、完全に動かなくなってしまいました
    改造はしておりません

    こちらのプラグインを削除、こちらのhead設定をテンプレートから削除し、
    クッキーキャッシュなどこちらの設定を削除や再起動しても作動しなくなってしまいました
    背景に使ってあるものなど、背景が真っ白で大変困っています

    テンプレートは全てFC2ブログのものです
    正常に直す方法はあるのでしょうか

    問題があるのでしたら注意喚起をお願いします

  3. 2012-09-06 18:00 No.1409 #-URL

    本日FC2サポート様のほうへも問い合わせましたところ
    不可のテンプレートを再度DLしてお試しくださいとのことで
    複数実行した結果、直りませんでした

    その場合やはり直接作者へ問い合わせるようにとのことでしたので
    追記いたします

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/544-3e7701df

  1. trackback