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

★ 基本情報

テンプレート名 : blanc
最新バージョン : 2.0

更新履歴 - Update history

09/10/08 : バージョン表記無し→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より、テンプレートの更新通知機能がつきました。更新があるとブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ カスタマイズ情報

  • 作成されていません

★ 簡易カスタマイズ項目

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

  • フォントの設定
    • 基本となるフォント
    • ブログタイトルのフォント
  • フォントサイズの変更
    • 全体の文字サイズ
    • タイトルの文字サイズ
    • ブログ紹介文の文字サイズ
    • メインカラムの文字サイズ
    • 記事の本文の文字サイズ
    • サブカラムの文字サイズ
  • 文字色の変更
    • 記事の文字色
    • サブカラムの文字色
  • 背景色の変更
    • 全体の背景色
    • 記事・コメント・トラックバック・プラグイン3の背景
  • 記事部分の枠の設定
  • カラム幅の変更
  • 記事中の画像に枠をつける
  • タイトル部分の設定
    • タイトルの背景色
    • タイトルのアクセントカラー
    • タイトルの文字色
    • ブログ紹介文・サブタイトルの文字色
  • 簡易カラーコーディネート
  • 幅可変/固定の切り替え
  • カラム配置設定

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

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

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

HTML・CSS
"blanc" / rimse
Creative Commons License
関連記事


コメント

  1. one | mQop/nM.

    日時

    はじめまして。
    このテンプレートを使用してみたいと思っています。
    そこで、質問があります。
    本文記事の右上の日時(年月日時刻)表記を本文記事のフッター部の先頭に移動させる+時刻を削除(年月日/commentc/trackbacks/etc・・・)に表示するにはどのようにすればよろしいでしょうか。
    よろしくお願いします。

    ( 01:00 [Edit] )

  2. rimse | 4HNZ8mMg

    Re: 日時

    oneさん、初めまして。コメントありがとうございます。

    > 本文記事の右上の日時(年月日時刻)表記を本文記事のフッター部の先頭に移動させる+時刻を削除(年月日/commentc/trackbacks/etc・・・)に表示するにはどのようにすればよろしいでしょうか。

    HTMLを編集します。
    まず、以下の部分を削除してください。
    (【 ▼エントリーエリア ここから 】のちょっと下あたりにあります)

    <div class="entry-time"><p class="entry-time"><%topentry_year>年<%topentry_month>月<%topentry_day>日 <%topentry_hour>:<%topentry_minute></p></div>



    次に、<dl class="entry-info">の直後に、次の記述を追加してください。

    <dt class="comment-info">投稿日</dt>
    <dd class="comment-info"><%topentry_year>年<%topentry_month>月<%topentry_day>日</dd>

    ( 02:43 [Edit] )

  3. one | mQop/nM.

    ありがとうございます。

    早々のお返事、ありがとうございました。
    無事、反映させることができました。
    その他、色などを少々変更して使用させていただきたいと思います。


    ご卒業おめでとうございますv-308

    ( 03:30 [Edit] )

  4. キノ子 | SJrrqsN.

    記事タイトルの三角記号の色変更

    こんにちは、初めまして。

    こちらのテンプレートを使わせて頂こうと思っております。
    質問はタイトルの通りなのですが、記事タイトルの左端に
    あります、三角形▲を横にした記号の色の変更方法を教えて
    頂けますでしょうか。お忙しいところ恐れ入りますがよろしく
    お願いいたします。

    ( 23:33 [Edit] )

  5. rimse | 4HNZ8mMg

    Re: 記事タイトルの三角記号の色変更

    キノ子さん初めまして。コメントありがとうございます。

    > 三角形▲を横にした記号の色の変更方法を教えて
    > 頂けますでしょうか。
    こちらは画像を使っているため、色を変えるには画像そのものを編集しなければいけません。
    http://blog-imgs-41.fc2.com/r/i/m/rimse/blanc_entrytitle.gif
    ↑まずこちらから画像をダウンロードして、各種画像編集ソフトにて色を変更してください。

    編集後の画像をファイルアップロードを介してサーバーに転送し、スタイルシートの最後尾に次の記述を追加します。
    h2.entry-title , div.comment h3 , div.trackback h3 , div.edit-comment h2 {
    background-image : url("画像のURL");
    }

    「画像のURL」には、アップロードした画像のURLを入れてください。


    画像を編集しなければいけないため、多少手間がかかってしまうのが難点です…。
    もし、画像を編集するのが面倒で、表示しないようにするだけでもOK、ということになりましたら、
    h2.entry-title , div.comment h3 , div.trackback h3 , div.edit-comment h2 {
    background-image : none;
    }
    というのをスタイルシートに追加していただければ非表示にすることも可能ですe-466

    ( 21:32 [Edit] )

  6. キノ子 | SJrrqsN.

    ありがとうございました

    rimseさん、こんにちは。

    ご丁寧なご回答を頂き、ありがとうございました。
    画像の編集が必要だったのですね。早速試してみましたところ、
    おかげ様でうまく変更することができました。ありがとうございます。

    現在使わせて頂いているexnihiloもそうですが、こちらもシンプルで
    スタイリッシュな上に使いやすいので、これからも末永く使わせて
    頂きたいと思います。

    改めまして、ご回答ありがとうございました。

    ( 07:56 [Edit] )

  7. benediction | ncVW9ZjY

    各記事に【編集】ボタンを

    はじめまして。
    こちらのテンプレートをお借りしています。
    ユーザータグを使ったデータベースとしてブログを作ったため、このようなシンプルかつ実用的なテンプレートを提供していただけて本当に感謝していますm(__)m
    ひとつだけ希望があるのですが、ひとつひとつの記事に、編集画面に直接いけるボタンをつける事は可能でしょうか?
    データベースとして利用しているため、過去記事を更新する機会が多くこちらからお聞きした次第です。
    もともと編集ボタンがついたテンプレートも多く見かけますが、こちらのテンプレートよりも使い心地の良いものを見つける事が出来ずにいます。もし実現可能でしたらカスタマイズ方法を教えていただけないでしょうか。どうぞよろしくお願いいたします!

    ( 22:07 [Edit] )

  8. rimse | 4HNZ8mMg

    Re: 各記事に【編集】ボタンを

    benedictionさん、はじめまして。コメントありがとうございます。
    とても励みになりますe-68

    > ひとつひとつの記事に、編集画面に直接いけるボタンをつける事は可能でしょうか?
    HTMLの編集を行います。ここでは、記事のフッタ部分(コメント・トラックバック・カテゴリが表示される部分)に記事編集ページへのリンクを追加したいと思います。
    HTMLの編集画面から、次の記述を探して下さい。

    <dl class="entry-info">

    この直後に、次の記述を追加します。

    <dt>記事を編集する(管理人専用)</dt>
    <dd><a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" title="[<%topentry_title>]を編集する">Edit</a></dd>


    初期設定では「Edit」という文字列で記事編集ページへのリンクが張られます。文字列を変更したい場合は太字部分を編集してください。
    また、リンクを追加する位置を変更したい場合は、下線部分のみをお好きな箇所に挿入していただければ結構です。ただし、このリンクは使用している変数の関係から、<!--topentry--> ~ <!--/topentry-->内でのみ有効となっています。位置を変更する場合は注意して下さい。

    ( 00:31 [Edit] )

  9. benediction | ncVW9ZjY

    希望通りに出来ました

    rimseさま、お忙しい中早速のお返事ありがとうございます!

    教えていただいた通りに修正してみた所、希望していた通りになりました。
    大変使いやすくなり感動ですe-257
    これからもずっと使わせて頂きたいと思います。
    このたびは本当にありがとうございましたm(__)m

    ( 02:16 [Edit] )

  10. テンプレートを変更したいと思い、色々探していたところrimseさんのブログにたどりつきました。
    その中でもblancが素敵で、是非利用させていただきたいのですが、3カラムとして利用したいのです。

    カスタマイズの方法を教えていただけないでしょか?

    ( 08:36 )

  11. rimse | 4HNZ8mMg

    papamamanさん、初めまして。コメントありがとうございます。

    > テンプレートを変更したいと思い、色々探していたところrimseさんのブログにたどりつきました。
    > その中でもblancが素敵で、是非利用させていただきたいのですが、3カラムとして利用したいのです。
    >
    > カスタマイズの方法を教えていただけないでしょか?

    既存テンプレートの3カラム化はカスタマイズの域を超えるくらい編集箇所が多いため、「カスタマイズ」での3カラム化はあまりおすすめできません。
    今こちらでいくつか3カラム化を進めているところですので、それが完成すればきちんとした形で提供出来るかと思います。
    申し訳ありませんが、少しおまちいただけますか。

    ( 09:51 [Edit] )

  12. そうなんですかぁ…
    あまり知識もないのですいませんでした。

    blancの3カラムができるのを期待して待ってます。

    ( 11:09 )

  13. ブンブン | -

    カテゴリの細分化について

    初めまして☆
    こちらのテンプレートがスタイリッシュでとても素敵なのでずっとお借りしています^^

    ひとつ質問をさせて頂きたいのですがが、
    カテゴリーをツリー式と言ったらいいのでしょうか。。?
    こちらのブログのように例えばテンプレートというカテゴリを
    更に細かく「製作中メモ」や「それぞれのテンプレート名」というような感じで
    細かく分けて表示させたいのですが
    (うまく伝えられずに申し訳ありません)
    変更方法を教えて頂けますでしょうか?
    お忙しいところ申し訳ございませんが宜しくお願い致します。
    (ツリー式でなくてもこちらのブログのように●で表示する方法で構いませんので
    よろしくお願いいたします)

    ( 22:30 )

  14. rimse | 4HNZ8mMg

    Re: カテゴリの細分化について

    ブンブンさん、初めまして。コメントありがとうございます。

    > カテゴリーをツリー式と言ったらいいのでしょうか。。?
    > こちらのブログのように例えばテンプレートというカテゴリを
    > 更に細かく「製作中メモ」や「それぞれのテンプレート名」というような感じで
    > 細かく分けて表示させたいのですが
    > (うまく伝えられずに申し訳ありません)
    > 変更方法を教えて頂けますでしょうか?

    これに関しましては、テンプレートを編集する必要はございません。
    FC2ブログの機能として、「親子カテゴリ」というものがございます。
    http://fc2blogmanual.blog60.fc2.com/blog-entry-53.html
    管理画面の、「カテゴリの編集」からカテゴリの親子関係を設定してください。
    細かい表示に関しては、管理画面の「プラグインの設定」から「カテゴリ」プラグインを探し、「詳細」を開くことで設定が可能です。

    なお、「カテゴリ」プラグインは二種類あります。
    最初から組み込まれているプラグインは自動でツリー表示になるものです。
    「公式プラグインの追加」ページから、カスタマイズ向けのカテゴリプラグインを追加することもでき、こちらは今このページで使っているように、リスト表示になります。お好きな方をお使いください。

    ( 14:30 [Edit] )

  15. ブンブン | -

    ありがとうございました!

    FC2のブログ機能として備わっていたのですね(><)
    テンプレートと関係ない質問になってしまい申し訳ありませんでした。
    またリスト表示のさせ方につきましても丁寧に教えて頂き本当にありがとうございます!
    これからもテンプレート愛用させて頂きますね^^

    ( 16:06 )

コメントの投稿

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

質問の際のお願い

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

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

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


トラックバック

Trackback URL
Trackbacks


Recent Entries