FC2ブログ用テンプレートの制作・配布。シンプルなデザインが多めです。
02:16
テンプレート名 : blanc
最新バージョン : 2.0
飾らないデザイン、真っ白なカタチ。記事が映えるシンプルテンプレート。
タイトル画像の変更、左右カラムの切り替え、幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。
Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています(blanc 2.0以降)。ご了承ください。
ver.2.0より、テンプレートの更新通知機能がつきました。更新があるとブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。
以下の項目は簡易カスタマイズとしてまとめられています。
詳しくはスタイルシート上部を参照してください。
(バージョンによって項目に多少差があります)
記事中での使用を想定したいくつかのクラスが用意してあります。
(バージョンによって項目に多少差があります)
これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえばfloat : left;としただけでは画像と文字が近すぎて、見栄えが良くありません。そこで、テンプレート側で回り込みに関するクラスを用意し、余白などをいちいち設定しなくても良いようにしてみました。
指定方法
テキストを右へ回り込ませたい場合は、「class="f-left"」を、左に回り込ませたい場合は 「class="f-right"」を画像等の要素に追加してください。
<img src="画像のurl" class="f-left" />
太字の部分を追加すればOKです。
なお、このクラスは「2.写真風の枠」、または「3.シンプルな枠」と重複して設定することができます。重複して設定する場合は、
<img src="画像のurl" class="f-left photo" />
というように、半角スペースとともにクラス名を追加してください。
画像に対して写真風の枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
こんな感じになります。
指定方法
imgタグに 「class="photo"」を追加してください。
<img src="画像のurl" class="photo" />
太字の部分を追加すればOKです。
画像に対してシンプルな枠をつけます。
「1.要素の回り込み」と重複して指定することが可能です。
こんな感じになります。
指定方法
imgタグに 「class="imgbox"」を追加してください。
<img src="画像のurl" class="imgbox" />
太字の部分を追加すればOKです。
記事中の任意の要素に枠をつけないようにします。
このクラスは、記事中の画像に枠を表示させるカスタマイズ(スタイルシート上部、簡易カスタマイズ内に項目があります)と組み合わせて利用してください。
「1.要素の回り込み」と重複して指定することが可能です。
指定方法 imgタグに 「class="noimgbox"」を追加してください。
<img src="画像のurl" class="noimgbox" />
太字の部分を追加すればOKです。
このテンプレートは、
クリエイティブ・コモンズ・ライセンス
の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。
日時
はじめまして。
このテンプレートを使用してみたいと思っています。
そこで、質問があります。
本文記事の右上の日時(年月日時刻)表記を本文記事のフッター部の先頭に移動させる+時刻を削除(年月日/commentc/trackbacks/etc・・・)に表示するにはどのようにすればよろしいでしょうか。
よろしくお願いします。
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>
ありがとうございます。
早々のお返事、ありがとうございました。
無事、反映させることができました。
その他、色などを少々変更して使用させていただきたいと思います。
ご卒業おめでとうございます
記事タイトルの三角記号の色変更
こんにちは、初めまして。
こちらのテンプレートを使わせて頂こうと思っております。
質問はタイトルの通りなのですが、記事タイトルの左端に
あります、三角形▲を横にした記号の色の変更方法を教えて
頂けますでしょうか。お忙しいところ恐れ入りますがよろしく
お願いいたします。
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;
}
というのをスタイルシートに追加していただければ非表示にすることも可能です
ありがとうございました
rimseさん、こんにちは。
ご丁寧なご回答を頂き、ありがとうございました。
画像の編集が必要だったのですね。早速試してみましたところ、
おかげ様でうまく変更することができました。ありがとうございます。
現在使わせて頂いているexnihiloもそうですが、こちらもシンプルで
スタイリッシュな上に使いやすいので、これからも末永く使わせて
頂きたいと思います。
改めまして、ご回答ありがとうございました。
benediction | ncVW9ZjY
各記事に【編集】ボタンを
はじめまして。
こちらのテンプレートをお借りしています。
ユーザータグを使ったデータベースとしてブログを作ったため、このようなシンプルかつ実用的なテンプレートを提供していただけて本当に感謝していますm(__)m
ひとつだけ希望があるのですが、ひとつひとつの記事に、編集画面に直接いけるボタンをつける事は可能でしょうか?
データベースとして利用しているため、過去記事を更新する機会が多くこちらからお聞きした次第です。
もともと編集ボタンがついたテンプレートも多く見かけますが、こちらのテンプレートよりも使い心地の良いものを見つける事が出来ずにいます。もし実現可能でしたらカスタマイズ方法を教えていただけないでしょうか。どうぞよろしくお願いいたします!
Re: 各記事に【編集】ボタンを
benedictionさん、はじめまして。コメントありがとうございます。
とても励みになります
> ひとつひとつの記事に、編集画面に直接いけるボタンをつける事は可能でしょうか?
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-->内でのみ有効となっています。位置を変更する場合は注意して下さい。
benediction | ncVW9ZjY
希望通りに出来ました
rimseさま、お忙しい中早速のお返事ありがとうございます!
教えていただいた通りに修正してみた所、希望していた通りになりました。
大変使いやすくなり感動です
これからもずっと使わせて頂きたいと思います。
このたびは本当にありがとうございましたm(__)m
papamaman | -
テンプレートを変更したいと思い、色々探していたところrimseさんのブログにたどりつきました。
その中でもblancが素敵で、是非利用させていただきたいのですが、3カラムとして利用したいのです。
カスタマイズの方法を教えていただけないでしょか?
papamamanさん、初めまして。コメントありがとうございます。
> テンプレートを変更したいと思い、色々探していたところrimseさんのブログにたどりつきました。
> その中でもblancが素敵で、是非利用させていただきたいのですが、3カラムとして利用したいのです。
>
> カスタマイズの方法を教えていただけないでしょか?
既存テンプレートの3カラム化はカスタマイズの域を超えるくらい編集箇所が多いため、「カスタマイズ」での3カラム化はあまりおすすめできません。
今こちらでいくつか3カラム化を進めているところですので、それが完成すればきちんとした形で提供出来るかと思います。
申し訳ありませんが、少しおまちいただけますか。
papamaman | -
そうなんですかぁ…
あまり知識もないのですいませんでした。
blancの3カラムができるのを期待して待ってます。
カテゴリの細分化について
初めまして☆
こちらのテンプレートがスタイリッシュでとても素敵なのでずっとお借りしています^^
ひとつ質問をさせて頂きたいのですがが、
カテゴリーをツリー式と言ったらいいのでしょうか。。?
こちらのブログのように例えばテンプレートというカテゴリを
更に細かく「製作中メモ」や「それぞれのテンプレート名」というような感じで
細かく分けて表示させたいのですが
(うまく伝えられずに申し訳ありません)
変更方法を教えて頂けますでしょうか?
お忙しいところ申し訳ございませんが宜しくお願い致します。
(ツリー式でなくてもこちらのブログのように●で表示する方法で構いませんので
よろしくお願いいたします)
Re: カテゴリの細分化について
ブンブンさん、初めまして。コメントありがとうございます。
> カテゴリーをツリー式と言ったらいいのでしょうか。。?
> こちらのブログのように例えばテンプレートというカテゴリを
> 更に細かく「製作中メモ」や「それぞれのテンプレート名」というような感じで
> 細かく分けて表示させたいのですが
> (うまく伝えられずに申し訳ありません)
> 変更方法を教えて頂けますでしょうか?
これに関しましては、テンプレートを編集する必要はございません。
FC2ブログの機能として、「親子カテゴリ」というものがございます。
http://fc2blogmanual.blog60.fc2.com/blog-entry-53.html
管理画面の、「カテゴリの編集」からカテゴリの親子関係を設定してください。
細かい表示に関しては、管理画面の「プラグインの設定」から「カテゴリ」プラグインを探し、「詳細」を開くことで設定が可能です。
なお、「カテゴリ」プラグインは二種類あります。
最初から組み込まれているプラグインは自動でツリー表示になるものです。
「公式プラグインの追加」ページから、カスタマイズ向けのカテゴリプラグインを追加することもでき、こちらは今このページで使っているように、リスト表示になります。お好きな方をお使いください。
ありがとうございました!
FC2のブログ機能として備わっていたのですね(><)
テンプレートと関係ない質問になってしまい申し訳ありませんでした。
またリスト表示のさせ方につきましても丁寧に教えて頂き本当にありがとうございます!
これからもテンプレート愛用させて頂きますね^^
Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。
ただいまお仕事でえらいこっちゃしてます。
ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。
Recent Comments