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

★ 基本情報

テンプレート名 : exnihilo
最新バージョン : 2.1

更新履歴 - Update history

14/08/24 : 2.0→2.1
[Modify] 新仕様サーバーに対応
[Modify] 他言語環境への最適化
[Modify] アイコンの変更
[Modify] スクリプトの整理
[Modify] 一部スタイルの変更
09/10/18 : バージョン表記なし→2.0
[Modify] 追記開閉スクリプト実装
[Modify] 全記事一覧表示に対応
[Modify] 「前後の記事へのリンク部分」のスタイル変更
[Modify] プラグイン3の出力方法を変更
[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応
[Modify] 簡易カスタマイズ改良
[Modify] IE8用の微調整
[Modify] MacIEへのスタイル適用を除外
[Modify] pre、hrなどのデフォルトスタイル変更
[Modify] その他色々大幅更新
08/12/19
[Modify] 一部構造を変更
[Modify] 簡易カスタマイズ項目の追加
[Modify] 2カラム/1カラム切り替え機能導入
[Modify] 幅可変/固定切り替え機能導入
[Modify] コメント投稿部分の色変更・絵文字などのパレット位置を、テキストボックスの上部に変更
[Modify] IE6用の可変幅の設定を更新
[Modify] 公式プラグインでのカレンダー表示を最適化

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

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

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

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

★ カスタマイズ情報

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

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


コメント

  1. うた | mQop/nM.

    カスタマイズについて

    はじめまして。
    テンプレートのカスタマイズについて質問があるのですが、画像に枠をつけるにはどこにタグを埋めればいいでしょうか。
    教えていただけたらうれしいです。

    ( 16:49 [Edit] )

  2. rimse | NDu29Gck

    Re: [template] exnihilo

    うたさん初めまして!

    画像に枠をつける方法についてまとめてみました。いかがでしょうか?
    http://rimse.blog73.fc2.com/blog-entry-95.html

    FC2のブログの良くわからない仕様にいろいろと惑わされてしまいました…。

    ( 01:36 [Edit] )

  3. Re: [template] exnihilo

    Exnihilo、お借りしました。
    シンプルで見やすいうえにおしゃれと、非常に完成されたデザインだと思います。
    細い線で、項目をうっすらと別けているのがいいですね。

    今後のデザインも楽しみにしています。
    それでは失礼いたしました!

    ( 16:05 )

  4. rimse | NDu29Gck

    Re: [template] exnihilo

    skycommuさん初めまして!
    お褒めの言葉ありがとうございます。とても励みになります!
    使っていて、なにか気になることなどございましたら、お気軽にコメントなどしてくださいませ!
    これからもっと良いテンプレートを作っていけるよう、勉強していきたいと思いますので、今後ともどうぞよろしくおねがいしますe-466

    ( 23:55 [Edit] )

  5. Re: [template] exnihilo

    はじめまして。
    exnihiloを使わせていただいています。シンプルだけど凝っていてステキです^^
    ところで、コメントの投稿画面のSubjectの「Re:ナニナニ」というのを消したいのですが、FC2ブログの歩き方なんかを見てもわかりませんでした。お手数ですが、教えていただけますか?

    ( 21:18 )

  6. Re: [template] exnihilo

    すみません。。。
    先ほどコメントした者ですが↑
    消すことができました^^;
    また質問に来るかもしれませんので
    よろしくお願いします。。。

    ( 21:37 )

  7. rimse | 4HNZ8mMg

    Re: [template] exnihilo

    キュートナさん初めまして!
    早速回答を…と思ったら、大丈夫だったようですね。

    ただ、いつかはちゃんと情報載せなきゃなーとは思っていたので、新規エントリーを作ってそちらで解説してみました-。
    http://rimse.blog73.fc2.com/blog-entry-176.html

    今後ともNefertのテンプレートをよろしくお願いしたしますm(_ _)m

    ( 21:46 [Edit] )

  8. ますみ | ptCUwJnI

    プラグインメニューのカスタマイズについて

    はじめまして。
    exnihiloを使わせていただいています。先月からブログを始めたばかりなのですが、このテンプレがあったので、fc2にしたといっても過言ではありません。
    とっても気に入っています。

    そのテンプレの件で分からないことがあったので、質問させていただきます。

    プラグインメニューに「リンク」があるのですが、ここに初期設定として「■管理画面」「このブログをリンクに追加する」というのが表示されているのですが、これを削除するにはどのようにすればよいのでしょうか。

    html編集画面で、関連すると思われるいろいろなものを削除してみたりしたのですが修正できず、こちらに助けを求めさせていただきました。

    初歩的な質問だったら申し訳ありません。
    よろしくお願いいたします。



    ( 00:10 [Edit] )

  9. rimse | 4HNZ8mMg

    Re: プラグインメニューのカスタマイズについて

    ますみさん、初めまして!
    Exnihiloを使っていただきありがとうございます!

    さて、ご質問の内容についてですが、管理画面へのリンクなどが挿入されてしまうのは公式プラグインの余計な機能のせいですね。
    ということで、プラグイン自体を編集することになります。

    プラグインの管理画面を開き、「リンク」プラグインの「編集」画面を開いてください。
    まず、「プラグイン説明(下部)」というところに『このブログをリンクに追加する』についての記述がなされているので、そこをばっさり削除しちゃってください。
    次に、「プラグインの改造」で【HTMLの編集】を開くとプラグインのHTMLを編集することが出来るのですが、この中の

    <li><a href="./?admin">管理者ページ</a></li>

    という部分を削除してください。

    最後に、【設定】のボタンを押して変更を保存するのを忘れずに(よく忘れちゃいます)

    多分これで大丈夫だと思います(*^-')b

    ( 00:56 [Edit] )

  10. ますみ | ptCUwJnI

    Re: プラグインメニューのカスタマイズについて

    カスタマイズの仕方を教えていただきありがとうございました。
    無事、削除することができました。

    プラグインにも編集画面があったのですね。
    ここしばらく、ずっと試行錯誤していたので、本当に助かりました。
    本当にありがとうございました。

    また分からないことがあったら質問させていただくかもしれませんが、そのときにはよろしくお願いいたします。

    ( 13:59 [Edit] )

  11. rimse | 4HNZ8mMg

    Re: [template] exnihilo

    potaさんはじめまして。
    Exnihiloですが、幅固定+センタリングをしようとすると意外と変更箇所が多くなってしまうようです。というのも、もともとの設計が結構無理やりなものなので…。

    構造について、もっとシンプルに設計しなおしたものを荒削りですが作ってみました。
    それをしばらくテストしてみて、問題なければ共有の方を更新したいと思います。
    ということで、すみませんがもう少し時間を頂きたいですm(_ _)m

    ( 10:05 [Edit] )

  12. |

    管理人のみ閲覧できます

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

    ( 15:48 )

  13. Fino | 1jhbtX.k

    Re: [template] exnihilo

    上記の件ですが、色々いじっていたら解決しました。
    お騒がせしてしまい、申し訳ありません。
    また何か質問させて頂くかもしれませんが、その際は宜しくお願い致します(*_ _)

    ( 15:55 [Edit] )

  14. |

    管理人のみ閲覧できます

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

    ( 11:44 )

  15. rimse | 4HNZ8mMg

    >>コメント15番の方へ
    編集方法を新しく記事にまとめてみました。お試しくださいませ。e-68
    http://rimse.blog73.fc2.com/blog-entry-223.html

    ( 02:38 [Edit] )

  16. hina | MMIYU.WA

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

    rimseさま、ていねいなご説明ありがとうございました!
    早速試してみますv-22

    ( 21:35 [Edit] )

  17. Amber | K47MgfVQ

    質問です。

    はじめまして。
    Exnihiloを使用させていただいています。
    今回、文字の大きさを変えたいと思い色々といじってみたのですがうまくいきませんでした…。
    メイン記事の文字の大きさはそのままで、サブメニューの本文の文字の大きさだけを
    少し小さいものに変えたいのです。
    (タイトル「プロフィール」などの大きさはそのまま)
    プラグインで大きさを設定しようにも、個々のソースをいじれるほどの技術はなく、
    一括で指定してしまいたいのですが…。

    変更することは可能でしょうか?
    もしよい方法がありましたら教えてくださると助かります。
    宜しくお願いいたします。

    ( 11:53 [Edit] )

  18. rimse | 4HNZ8mMg

    Re: 質問です。

    Amberさん、初めまして。

    > メイン記事の文字の大きさはそのままで、サブメニューの本文の文字の大きさだけを
    > 少し小さいものに変えたいのです。
    > (タイトル「プロフィール」などの大きさはそのまま)

    スタイルシートに、以下の記述を追加してくださいませー。
    .menu-body { font-size : small; }

    テンプレート中では、サブメニューの本文の要素には「.menu-body」 というクラスがつけられていますので、それに対してフォントサイズを指定するだけでOKなのです。
    なお、ここでは「一段階小さく」ということでsmallという値を使ってみました。ここはお好みでサイズを変えてみてくださいe-68

    ( 00:39 [Edit] )

  19. Amber | K47MgfVQ

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

    rimseさま、迅速な回答ありがとうございます!
    早速試してみたところ、無事に変更することが出来ました。
    もやもやとしていたのですが、これからはすっきりとした気分で過ごせそうです。

    rimseさまのテンプレートはデザインも素敵ですし、
    サポートページも親切なので非常に使いやすくてすばらしいです。
    新作も楽しみにしております!
    それではまた。

    ( 01:16 [Edit] )

  20. ヒノ | ogz9v/Dw

    デザイン拝借のお願い

    はじめまして。
    共有でexnihiloをみつけ、
    シンプルでいて、スタイリッシュなデザインに、
    一目惚れいたしました。

    exnihiloの記事部分をそのまま使用し、
    メニュー部分を、自分好みにカスタマイズしようとしたのですが、
    CSSなどの割り当てなど把握することが難しく、
    他の簡単なテンプレートからカスタムすることにしました。

    そこで、記事部分のデザインを利用させていただきたく、
    お願いに参りました。
    記事部分だけの構造でしたら、何とか把握できそうですので、
    許可が頂ければ、自分で頑張ってみたいと思います。
    つまり、他のテンプレートを土台にし、
    exnihiloの記事部分デザインを利用させていただきたいのです。

    もちろん、許可がいただけた際には、
    フッターにライセンス表示もさせていただきます。

    わがままなお願いとは思いますが、
    どうぞよろしくお願いいたします。

    ( 15:47 [Edit] )

  21. rimse | 4HNZ8mMg

    Re: デザイン拝借のお願い

    ヒノさん、初めまして。

    ご丁寧な連絡、どうもありがとうございます。
    exnihiloの一部を利用したいとのことですが、全く問題ありませんe-68(ちょっと想定外でしたがe-257
    ただ、exnihiloは簡易カスタマイズなどの項目とのかねあいで、一部のスタイルの記述が離れてされていたりすることがあるかもしれません。
    編集の際には、お気をつけてくださいませ-e-466

    ライセンスやクレジットの表示などに関しては、テンプレート全体に対しての利用部分の割合や編集の手間などを考えますと、そんなに必要ないような気もしますe-465e-330
    ものすごくライセンスの表示をしたい!というのでなければ、私自身はそんなに気にしておりませんので、外していただいても結構ですよー。
    (CCライセンス利用許諾条項にある【著作[権]者から許可を得ると、これらの条件は適用されません。】ってやつですね)


    追記
    もしアイコンもご一緒にお使いになるようでしたら、アイコンに関しては別の著作者がいらっしゃいますので、ライセンスの表示が必要になります。

    ( 01:24 [Edit] )

  22. ヒノ | ogz9v/Dw

    お返事ありがとうございます。

    許可をいただけて、
    とても嬉しく思います。
    さっそく、カスタマイズに精を出したいと思います。

    アイコンもかわいらしく、使用させていただきたいのと、
    お礼の気持ちもありますので、
    ライセンスの表示をさせていただこうと思います。

    今後のデザイン等にも陰ながら期待しております。
    お忙しいところ、ありがとうございました。

    ( 15:20 [Edit] )

  23. pota | keY5YeEU

    有難うございました!

    以前、exnihiloの幅固定+センタリングについてお尋ねしたpotaです。
     共有テンプレ、更新して下さって有難うございました。
     newテンプレ、早速ダウンロードして、今現在HP用メモに使っています。なんとかフレームを使ったテンプレートを見つけexnihiloに合わせたデザインにして今現在も使っています。
    何の知識もない私にしては上出来なのではと思っています。
    (左サイドバーなので1カラムverにしました。こういう風に作って頂けるとは思っていなかったので助かりました。)
     親切に対応して下さって、有難うございました。助かりました、これからも頑張って下さい。 
     
     

    ( 13:55 [Edit] )

  24. rimse | 4HNZ8mMg

    Re: 有難うございました!

    potaさん、お久しぶりです。気に入っていただけたようでうれしいですe-68
    また何かありましたら、お気軽にコメントしてくださいねe-319

    ( 19:52 [Edit] )

  25. |

    管理人のみ閲覧できます

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

    ( 22:41 )

  26. rimse | 4HNZ8mMg

    コメントNo.26さんへ

    Exnihiloは2カラムながら3カラム的なスペースの使い方をしておりますので、これを実質的に「3カラム化」するとなると、表示幅の関係などであまり現実的でないように思います。
    また、2カラムから3カラムへの変形は修正箇所が非常に多くなってしまいます。
    ですので、申し訳ないのですがExnihiloは2カラムでお使いいただきたく思っております。すみません。

    ( 17:06 [Edit] )

  27. rimse | 4HNZ8mMg

    (追加でいただきましたコメントは、URLが表示されておりましたので削除いたしました。ご了承ください)

    > 勝手ながら改造しているのですが、問題はないのでしょうか?
    カスタマイズなどについては制限はしておりませんので、ご自由に改変していただいて結構ですよe-68

    ( 20:49 [Edit] )

  28. |

    管理人のみ閲覧できます

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

    ( 22:18 )

  29. |

    管理人のみ閲覧できます

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

    ( 17:00 )

  30. rimse | 4HNZ8mMg

    コメント29番さんへ

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

    既存のスタイルを応用してかなり大雑把に作ってみました。
    サンプルはこんな感じです。(昔のブログに適用してみました)
    http://meaculpa.blog55.fc2.com/

    以下のカスタマイズ法は、デフォルト状態のExnihiloに対してのものです。
    既にカスタマイズしているものは、変更箇所を見比べてできる限りご自身で対応していただきたく思います。編集する前にコピーを作っておくことを推奨します。
    また、今左手しか使えないため、解説をかなり省かせていただいています。ごめんなさい。

    以下、すべてHTMLの編集になります。

    e-21 1

    <h1>
    <a href="<%url>" title="「<%blog_name>」のトップページへ"><%blog_name></a>

    赤字部分を追加

    <h1>
    <a href="<%url><!--not_index_area-->page-0.html<!--/not_index_area-->" title="「<%blog_name>」のトップページへ"><%blog_name></a>


    e-21 2
    <dt class="home">トップページへ戻る</dt>
    <dd class="home"><a href="<%url>" title="トップページへ戻る">Home</a></dd>

    赤字部分を追加

    <dt class="home">トップページへ戻る</dt>
    <dd class="home"><a href="<%url><!--not_index_area-->page-0.html<!--/not_index_area-->" title="トップページへ戻る">Home</a></dd>

    これはテンプレート中に三箇所あるはずです。すべて編集してください。


    e-21 3
    <!-- 【 ▼メインエリア ここから 】 -->

    ↓この直後に以下の記述を追加

    <!--index_area-->
    <div style="margin:0 15%;">
    <div class="entry"><div class="entry-container">
    <div class="entry-header"><div class="entry-header-container">
    <div class="entry-title"><h2 class="entry-title">Entrance</h2></div>
    <div class="entry-time"><p class="entry-time"> </p></div>
    </div></div>
    <div class="entry-body"><div class="entry-body-container">
    エントランスです。<br />記事を読む場合は<a href="<%url>page-0.html">こちら</a>から。
    </div></div>
    </div></div>
    </div>
    <!--/index_area-->
    <!--not_index_area-->


    赤字部分が簡単なタイトル、青字部分が入口に表示されるメッセージになります。
    なお、入口から移動する先(入場する場合)のURLは、「<%url>page-0.html」としてください。

    緑色の部分は左右の余白の大きさです。適当に編集していただいて結構です。


    e-21 4
    <!-- 【 ▲サブエリア ここまで 】 -->

    ↓赤字部分を追加

    <!-- 【 ▲サブエリア ここまで 】 -->
    <!--/not_index_area-->



    編集は以上です。
    既にされているカスタマイズによっては、エントランスページに必要ないものが表示されることがあるか思います。
    エントランスページのみに表示させたいものは<!--index_area-->と<!--/index_area-->で挟み、表示させたくないものは<!--not_index_area-->と<!--/not_index_area-->で挟むようにしてください。


    あとこちらのページも参考にできるとおもいます。あわせてどうぞ。
    http://fc2blogwalker.blog21.fc2.com/blog-entry-118.html

    ( 21:44 [Edit] )

  31. |

    管理人のみ閲覧できます

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

    ( 01:17 )

コメントの投稿

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

質問の際のお願い

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

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

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


トラックバック

Trackback URL
Trackbacks


Recent Entries