タイトル画像をランダムで変更させる：Type D

対象テンプレート
・ Fiore

HTMLの編集を行います。
HTMLの編集から、以下の部分を探してください。（上の方にあります）

</head>

この直前に、次の記述を追加してください。

  <script type="text/javascript">
   var imglist = new Array(
      "画像のurl@1",
      "画像のurl@2" );
   var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
   var output = '<style>#HeaderInner { background-image : url("' + imglist[selectnum] + '"); }<\/style>';
   document.write(output);
  </script>

（※ver.1.5以下の場合はこちら）

  <script type="text/javascript">
   var imglist = new Array(
      "画像のurl@1",
      "画像のurl@2" );
   var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
   var output = '<style>.header-container { background-image : url("' + imglist[selectnum] + '"); }<\/style>';
   document.write(output);
  </script>

画像のurl@1、画像のurl@2という部分には使用したい画像のurlを入れます。使用したい画像が3個以上ある場合は、画像のurl@1の方の行をコピー・ペーストで増やしてください。このスクリプトでは画像は100個まで使用可能です。

なお、javascriptを使わないように設定されている環境で閲覧した場合は、ランダムで表示させることはできません。
そういった環境で閲覧した際にはスタイルシートで設定されている画像が表示されます。
スタイルシート側の編集に関しましては、スタイルシート上部に記述されている「簡易カスタマイズ」中にタイトル画像の設定部分がありますので、そちらを参照してください。
※スタイルシートで設定できる画像は一枚のみです。

fiore

クリックでテンプレートのプレビューができます。

★ 基本情報

テンプレート名 : Fiore（登録名：fiore）
最新バージョン : 1.61

更新履歴 - Update history

2014/1/3 : 1.6→1.61

[Modify] 「カテゴリ」と「タグ」のアイコンを変更

[Bug Fix]ブログの言語設定が英語等の場合に正しく日付が表示されない不具合を修正

2012/8/15 : 1.5→1.6

[Modify] FC2ブログの新仕様サーバーに対応

[Modify] 各所にアイコンを追加

[Modify] サブカラムをページ最下部まで続くように変更

[Bug Fix] ChromeやSafariで追記開閉スクリプトが正常な動作をしなかった件を修正

[Modify] その他スタイル微調整

2009/10/08 : 1.41→1.5

[Modify] 全記事一覧表示に対応

[Modify] 「前後の記事へのリンク部分」のスタイル変更

[Modify] プラグイン3の出力方法を変更

[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応

[Modify] 簡易カスタマイズ一部改良

[Modify] pre、hrなどのデフォルトスタイル変更

[Modify] その他スタイル微調整

2009/07/04 : 1.4→1.41

[Bug Fix] 独自クラスのスタイル指定を修正
（軽微な更新のため、更新通知はしておりません）

2009/07/02 : 1.3.0→1.4

[Bug Fix] 追記スクリプト仕様変更など。

[Modify] IE8用の微調整

[Modify] 独自クラス追加

2009/05/13 : 1.2.0→1.3.0

[Modify] MacIEへのスタイル適用を除外

[Other] ライセンスの変更

2009/03/30 : 1.1.0→1.2.0

[Bug Fix] HTMLの記述ミス修正

2009/03/13 : 1.0.0→1.1.0

[Modify] プラグイン3部分の表示を調整

[Modify] 追記折りたたみ機能追加

白と黒のコントラスト。
画像差し替えでインパクトの強いオリジナルテンプレートになります。
左右カラムの切り替え、幅可変／固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。

Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています（fiore 1.3.0以降）。ご了承ください。

★ テンプレート更新通知機能つき

更新があると、ブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ カスタマイズ情報（ver.1.5以下）

• ページナビゲーションの編集
• タイトル画像をランダムで変更する

★ テンプレート独自クラスについて

記事中での使用を想定したいくつかのクラスが用意してあります。

1.要素の回り込み

これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。

指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。

<img src="画像のurl" class="f-left" />

太字の部分を追加すればOKです。

なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、

<img src="画像のurl" class="f-left photo" />

というように、半角スペースとともにクラス名を追加してください。

2.写真風の枠

画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。

こんな感じになります。

指定方法
imgタグに 「class="photo"」を追加してください。

<img src="画像のurl" class="photo" />

太字の部分を追加すればOKです。

3.シンプルな枠（ver.1.41以降）

画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。

こんな感じになります。

指定方法
imgタグに 「class="imgbox"」を追加してください。

<img src="画像のurl" class="imgbox" />

太字の部分を追加すればOKです。

4.枠をつけない（ver.1.41以降）

記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ（スタイルシート上部、簡易カスタマイズ内に項目があります）と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。

指定方法 imgタグに 「class="noimgbox"」を追加してください。

<img src="画像のurl" class="noimgbox" />

太字の部分を追加すればOKです。

★ 使用条件・ライセンスについて

このテンプレートは、 クリエイティブ・コモンズ・ライセンス の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。

タイトル画像

"Good night dahlia 2" / tanakawho (flickr)

HTML・CSS

"fiore" / rimse

[ Close ]