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 ]

限定配布テンプレート復活

公開を一時停止していた限定配布のテンプレート群を復活させました。
変換方式を変えたのに伴い、ファイルサイズがちょっと大きめに。なお、ファイルを表示させるとテキストが色分けされていますが、これは私が編集の際に使っている強調表現と同じモノになっているみたいです（普段使ってるテキストエディタの機能で変換させたので）。

文字化けなどしておりましたら、教えていただけるとありがたいです－。

なお、herba-3c-miniも一応ソースコードをダウンロード出来るようにしてありますが、こちらのバージョンは以前のモノと同じなので、herba-3c/herba-3c-miniの統合バージョンが出来ましたらそちらを使った方がよろしいかと思います－。


また、Snowdanceのver.2βをこのブログに適用出来るようにしておきました。
テスト中ですので、気になる表示などがありましたらお気軽にコメントしてくださいませ

Herba-3c ver.2β

Herba-3cとHerba-3c-miniの統合を目指してみました。
3カラムものはこっちのブログだと使えない（HTMLの構造が違うので、スタイル切り替えスクリプトを適用できない）ので、MeaCulpaに適用してみています。
ちなみに、カラム配置変更機能と同様、クラス名を一部変えるだけで「mini」にすることが出来ます－。
miniだとこんなかんじ。
β版ってことで、不具合探し中です。最近眠たい時間帯にしかテンプレいじっていないので、ミスがたくさんありそう

暴走。

↑クリックでスタイルを適用できます。
切り替え直後に表示が乱れていることがあります。その際はページを再読み込みをしてください。

カッとなってやった。文字のジャンプ率でどれだけデザインできるか、がテーマ。小説とか書く人にはいいかもとか思ったり。

制作時間約45分（笑）。まだ全くテストしていないので色々不具合あるかと思います。

申請しましたー

これ以上細かくいじってたら、いつまで経っても登録できない！ということで、fioreを共有に申請してきました。
更新通知機能とか、バージョンの明記とかで更新が確認しやすくなったと思うので、多少の機能追加とかなら楽な気持ちで更新できそうです。
（あまりこの機能を使う人いなさそうだけど）

テンプレートのナンバーが「26239」なので、あと100個くらいテンプレートが処理されれば登録されるっぽいです。今の登録のペースだと結構かかりそうだな～。

オリジナルクラス

fioreから、記事中での使用を想定したいくつかのクラスを用意しておきたいと思います。
今のところ、次の二つを用意しています。

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

2.写真風の枠
画像に対して写真風の枠をつけます。

こんな感じになります。いかがでしょー。

color : inherit;

CSSには、文字色を指定するcolorというプロパティがあるのですが、これにinheritという「親要素を継承する値」を入れればリンクの色の指定とかカスタマイズとかも楽になるんじゃない？というわけで「color:inherit;」を導入してみました。が、相変わらずIEでテストするとどうもうまくいかない。なんでだーと思って調べてみたら
http://d.hatena.ne.jp/unageanu/20080706/1215335813
これでした。勘弁してください。
ホントIE滅びないかなぁ。

また色々修正です。むー。

違い探し（≠間違い探し）

とりあえず今のHTML・CSSでFioreはほぼ完成とします。

プラグイン3を記事上部への移動したというのが目玉です。
また、テンプレートの更新が使っていてわかるよう、テンプレート更新通知機能なるものもつけてみました。
←こんな感じで、更新があると★マークがつきます。普通なら気づかないレベル。
バージョンも表記するようになったので、更新内容などもちょっとわかりやすくなるんじゃないかと思います。


そのほか、多言語用変数の導入によって一部の記述が簡略化・変更されていたり、使っていてもわからないレベルでの修正がいくつか加えられています。重要度低いので適当に羅列しておきますね。
・出力されるソースをきれいに。
・<body>につけられるクラス名の変更
・スタイルシートへのリンクの方法を変更
・コメントちょっと追加
・改行コードによる半角スペースの出力を一部抑制
・音声読み上げブラウザ用に、重複する部分をスキップ出来るアンカーを追加。


CSSには、目次っぽいのをつけてみました。
カスタマイズ項目もかなり増えています。気持ち悪いです。
絵文字の表示位置も調整してみました－。


とりあえずこんな感じで、もう少しテストしていきます。


それと、この場を借りて拍手コメントへのお返事的内容を書かせていただきます。
「herba-3c-miniは再公開する予定です。が、色々とつけたい機能が増えてしまったので、もう少し時間がかかってしまうかもしれません。すみません。
一つの案としてですが、herba-3cと統合した状態で配布してしまおうかなとも考えています。」

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

対象テンプレート
・ Ad-astra

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>#header { background-image : url("' + imglist[selectnum] + '");background-position : 50% 50%; }<\/style>';
document.write(output);
</script>

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

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



■古いバージョン用（Ver.2.0未満）のスタイルシート編集方法
編集箇所はナンバリングを参考に探してみてください。

/*[3.1]*/
#header {
  background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/adastra_title.jpg");
  background-repeat : no-repeat;
  background-position : 100% 0;
  padding : 170px 0 110px;
  color : #fff;
}

下線部分を、javascriptがオフの状態に表示させたい画像のurlに置き換えてください。

Busy State

忙しくて色々手つかずです。
一応、テンプレートに関してはゆっくりながら少しずつ作業していますので、気長に待っていただけるとうれしいです

普段からカメラを持ち歩くようにしているのですが、今日は快晴＋放射冷却のおかげで良い写真が撮れました。

Exnihiloのカラム幅調整方法

Exnihiloの幅の調整方法を紹介します。
対象は最新バージョン（08/12/19以降のもの）になります。
★ExnihiloのVer.2.0より、簡易カスタマイズ項目内に幅の調整方法がまとめられています。

ここでは標準のスタイルを「書き換える」のではなく、スタイルを「追加」する方法でやっていきます（この方が安全なので）。

まず、メインカラム（記事側）とサブカラム（プラグイン側）の幅の調整方法です。
以下の記述をスタイルシートの最後尾に追加してください。

.shift-off div#main {
  width:70%; /*メインカラム側の幅*/
}
.shift-off div#sub {
  width:29%; /*サブカラム側の幅*/
}
/*二つの値を足して「99%」になるように調整してください。*/

…ということで、書いてあるとおり、二つの値の和が99%になる点に注意してください。

次に、記事タイトルと記事本文の幅の調整方法です。これも以下の記述をスタイルシートに追加してください。

.entry-header , 
dl.entry-tag {
  width : 35%;
  /*この値が記事タイトルの幅になります*/
}
div.entry-body ,
dl.entry-thread ,
dl.entry-info {
  margin-left : 35%;
  /*上の値と同じ数値を入れてください。*/
}

これも書いてある通りですが、こちらは二つの値が「同じ値」ですのでお気をつけて。


もしどこか編集中に失敗してしまっても、追加したスタイルを消せば元通りになりますので、安心していじってみてください

てんぷれーたー

いろいろなテンプレートを見て、どんなテンプレートが便利かをちょこちょこ勉強してみたのですが、Ｅ - テンプレートさんのテンプレートが便利すぎて噴いた。というお知らせ。
デザイン・技術ともに共有テンプレーターの中ではトップレベルだと思います。
もっとjavascriptとか勉強しておけばよかったなーと痛感させられますね。

新着テンプレートを見たらどこか見覚えのあるテンプレートが表示されていたので、作者さんのブログにいってみたら案の定以前テンプレートを作っていた方でした。当時は一方的にライバル視してた気がします。勝手に。
一年以上テンプレートを作っていなかったみたいですが、パッと見て何となく作者さんがわかるというのはそのテンプレートに作者さんの独創性・センスがあふれているからなんだなーと感じさせられました。

デザインを見ただけで作者がわかるくらいのセンスを身につけたいなぁ。
今はまだ「独創性ってなんですか。おいしいの？」状態。無い物ねだりです(-ω-｀)


追記
テンプレートのダウンロードページのコメントを読ませていただいたのですが、読んでいる最中に間違ってコメントの削除ボタンをクリックしてしまい、いただいたコメントを一件削除してしまいました…！
決して内容に問題があったわけではありません！せっかくコメントしていただいたのにすみません

テンプレート自体の削除といい、ワンクッションあればいいのに

多言語変数で悩む。

ベースHTMLの大幅更新をすることにしました。
・多言語用変数を使ってみる
・プラグイン3の表示位置を記事上部に変更してみる
というのが主な目的。

ただ、多言語用変数の使い勝手の悪さにいらいらー。
ということで、思い切ってフォーラムに要望出してみました。
http://blog.fc2.com/forum/viewtopic.php?f=11&t=23972

眠い中書いたから文章変かも。
とりあえず今日はもう寝よ-…。

テンプレート作りも大変なんです。まったく。

I wish you a Happy New Year!

あけましておめでとうございます。
今年もよろしくお願いいたします

逆輸入

Snowdanceをカスタマイズして使われている方がたくさんいらっしゃってとてもうれしい今日この頃なのですが、カスタマイズされている方のデザインをパクって参考にして、一つスタイルを作ってみました。

テスト中は↑クリックでスタイルを適用できます。
テンプレート名は「Fiore」。Snowdanceの「カスタマイズがかなり面倒」という弱点を克服すべく、構造を思いっきり簡略化させてみました。

すごく細かいことなのですが、色合いを変えた縦線を二つ、1ピクセルだけ間隔をとって並べるというデザインが最近のお気に入りです。
最近つくったテンプレートのどこかには必ずこのスタイルが記述されてるほど。うーん、ここまでくると気持ち悪いな…。