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

★ 基本情報

テンプレート名 : fall-time
最新バージョン : 2.0

更新履歴 - Update history

09/10/18 : バージョン表記無し→2.0
[Modify] 追記開閉スクリプト実装
[Modify] 全記事一覧表示に対応
[Modify] 「前後の記事へのリンク部分」のスタイル変更
[Modify] プラグイン3の出力方法を変更
[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応
[Modify] 簡易カスタマイズ改良
[Modify] IE8用の微調整
[Modify] MacIEへのスタイル適用を除外
[Modify] pre、hrなどのデフォルトスタイル変更
[Modify] その他色々大幅更新

秋のイメージを大胆にデザインしました。
左右カラムの切り替え、幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。

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

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

更新機能・見本 ver.2.0より、テンプレートの更新通知機能がつきました。更新があるとブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ カスタマイズ情報

  • 表示幅を固定する
    ver2.0では、幅固定への切り替え機能を標準で用意しています。詳しくはスタイルシート上部のカスタマイズ項目をご覧ください。

★ 簡易カスタマイズ項目

以下の項目は簡易カスタマイズとしてまとめられています。 詳しくはスタイルシート上部を参照してください。
(バージョンによって項目に多少差があります)

  • フォントの設定
    • 基本となるフォント
    • ブログタイトルのフォント
  • フォントサイズの変更
    • 全体の文字サイズ
    • タイトルの文字サイズ
    • ブログ紹介文の文字サイズ
    • メインカラムの文字サイズ
    • 記事の本文の文字サイズ
    • サブカラムの文字サイズ
  • 文字色の変更
    • 全体の文字色
    • 記事の文字色
    • ブログタイトルの文字色
    • ブログ紹介文の文字色
    • サブカラムの文字色
    • 一部のアクセントカラー
  • カラム幅の変更
  • 記事中の画像に枠をつける
  • 幅可変/固定の切り替え
  • カラム配置設定

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

記事中での使用を想定したいくつかのクラスが用意してあります。
(バージョンによって項目に多少差があります)

1.要素の回り込み

T38@sapporo 2081222_DSC00456

これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえば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.要素の回り込み」と重複して指定することが可能です。
090109_DSC00477
こんな感じになります。

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

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

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

3.シンプルな枠

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

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

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

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

4.枠をつけない

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

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

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

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

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

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

タイトル部写真
"against the white sky"/Ozyman (Flickr)
Creative Commons License
HTML・CSS
"fall-time" / rimse
Creative Commons License
関連記事


コメント

  1. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 11:49 )

  2. rimse | 4HNZ8mMg

    Re: [template]fall-time

    コメントNo.1の方へ。
    解説用の記事を作りましたので、そちらをご覧くださいませーe-466
    http://rimse.blog73.fc2.com/blog-entry-100.html

    ( 01:52 [Edit] )

  3. honyarara | 7aHw/MZQ

    Re: [template]fall-time

    すみません、FC2のアクセス解析のタグを挿入する場所がわかりません。
    公式マニュアルにある<body>が見当たらないのです。
    HTMLに詳しくない、どシロートですが、どうぞ教えてくださいませ。

    ( 19:17 [Edit] )

  4. honyarara | 7aHw/MZQ

    Re: [template]fall-time

    上と同じ者です。
    最後の方の</body>は見つけられましたので、その前に貼り付けて見ましたが、ダメでした。

    ( 19:30 [Edit] )

  5. rimse | 4HNZ8mMg

    Re: [template]fall-time

    honyararaさん、初めまして。

    Nefertのテンプレートでは、<body>の書き方がちょっと特殊になっています。
    他の方の参考にもなるよう、新たに記事として保存しておきましたので、そちらをご覧くださいませ。
    http://rimse.blog73.fc2.com/blog-entry-104.html

    お手数おかけして申し訳ありませんm(_ _)m

    ( 01:28 [Edit] )

  6. honyarara | 7aHw/MZQ

    Re: [template]fall-time

    うまく行きました。
    助かりました。ありがとうゴザイマス♪

    ( 22:37 [Edit] )

  7. |

    管理人のみ閲覧できます

    このコメントは管理人のみ閲覧できます

    ( 17:29 )

  8. rimse | 4HNZ8mMg

    コメント7番の方へ

    コメントありがとうございます。

    まず、画像のようになってしまう件に関しましては、コメント・トラックバックを不可にした状態で発生するものでして、最近更新したテンプレートなどでは修正されていますが、Fall-timeではまだ未修正となっています。すみません。
    修正方法に関しましては、http://rimse.blog73.fc2.com/blog-entry-211.htmlこちらの記事を参照してくださいませ。

    また、カラムの幅調整は、スタイルシート中の
    /*[5.1]*/
    #main {
    width : 63%;
    overflow : hidden;
    }
    と、
    /*[16.1]*/
    div#sub{
    width : 35%;
    float : right;
    /* for IE5 */ text-align : center;
    padding-top : 1em;
    }
    のwidthの値を変更してください。
    なお、このとき二つの値の合計が「99%」になるようにしてください(合計が「100%」だと、InternetExplorerでカラム落ちが発生することがあります。)

    ( 22:23 [Edit] )

  9. fca | Wnd/Bf3Y

    コメ7番です。お早い対応に痛み入ります。
    さっそくアドバイス通りにやってみましたら上手くいきました。お世話おかけしました。他のテンプレも素敵なものばかりで、今回のものに限らず機会があればお借りしたいと思っています^^

    どうもありがとうございましたv

    ( 18:52 [Edit] )

コメントの投稿

(コメントの編集・削除時に必要)
(管理者にだけ表示を許可する)

質問の際のお願い

テンプレートに関する質問は、それぞれのテンプレート専用の記事にて受け付けています。トップページの「Templates Information」から、各テンプレート用の記事へリンクが張ってあります。

質問の際には、情報の共有のため非公開コメントはご遠慮くださいませ。
また、使用しているバージョンによって編集内容が異なる事があるため、多くの場合ソースコードの確認が必要になります。出来る限りブログのURLを入力してください。ブログのURLを公開したくない場合は、質問内容を公開コメントで投稿した後、非公開コメントにてブログのアドレスを追加投稿してくださいませ。

質問以外のコメントは、ご自由にコメントしていただいて結構です。たくさんのコメントお待ちしております。


トラックバック

Trackback URL
Trackbacks


Recent Entries