FC2ブログ用テンプレートの制作・配布。シンプルなデザインが多めです。
22:33
テンプレート名 : exnihilo
最新バージョン : 2.1
1カラムへの切り替え、幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
タグは記事横に、プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQueryをテンプレート内で使用しています。
Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています。ご了承ください。
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です。
このテンプレートは、
クリエイティブ・コモンズ・ライセンス
の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。
うた | mQop/nM.
カスタマイズについて
はじめまして。
テンプレートのカスタマイズについて質問があるのですが、画像に枠をつけるにはどこにタグを埋めればいいでしょうか。
教えていただけたらうれしいです。
Re: [template] exnihilo
うたさん初めまして!
画像に枠をつける方法についてまとめてみました。いかがでしょうか?
http://rimse.blog73.fc2.com/blog-entry-95.html
FC2のブログの良くわからない仕様にいろいろと惑わされてしまいました…。
skycommu | -
Re: [template] exnihilo
Exnihilo、お借りしました。
シンプルで見やすいうえにおしゃれと、非常に完成されたデザインだと思います。
細い線で、項目をうっすらと別けているのがいいですね。
今後のデザインも楽しみにしています。
それでは失礼いたしました!
Re: [template] exnihilo
skycommuさん初めまして!
お褒めの言葉ありがとうございます。とても励みになります!
使っていて、なにか気になることなどございましたら、お気軽にコメントなどしてくださいませ!
これからもっと良いテンプレートを作っていけるよう、勉強していきたいと思いますので、今後ともどうぞよろしくおねがいします
キュートナ | -
Re: [template] exnihilo
はじめまして。
exnihiloを使わせていただいています。シンプルだけど凝っていてステキです^^
ところで、コメントの投稿画面のSubjectの「Re:ナニナニ」というのを消したいのですが、FC2ブログの歩き方なんかを見てもわかりませんでした。お手数ですが、教えていただけますか?
キュートナ | -
Re: [template] exnihilo
すみません。。。
先ほどコメントした者ですが↑
消すことができました^^;
また質問に来るかもしれませんので
よろしくお願いします。。。
Re: [template] exnihilo
キュートナさん初めまして!
早速回答を…と思ったら、大丈夫だったようですね。
ただ、いつかはちゃんと情報載せなきゃなーとは思っていたので、新規エントリーを作ってそちらで解説してみました-。
http://rimse.blog73.fc2.com/blog-entry-176.html
今後ともNefertのテンプレートをよろしくお願いしたしますm(_ _)m
ますみ | ptCUwJnI
プラグインメニューのカスタマイズについて
はじめまして。
exnihiloを使わせていただいています。先月からブログを始めたばかりなのですが、このテンプレがあったので、fc2にしたといっても過言ではありません。
とっても気に入っています。
そのテンプレの件で分からないことがあったので、質問させていただきます。
プラグインメニューに「リンク」があるのですが、ここに初期設定として「■管理画面」「このブログをリンクに追加する」というのが表示されているのですが、これを削除するにはどのようにすればよいのでしょうか。
html編集画面で、関連すると思われるいろいろなものを削除してみたりしたのですが修正できず、こちらに助けを求めさせていただきました。
初歩的な質問だったら申し訳ありません。
よろしくお願いいたします。
Re: プラグインメニューのカスタマイズについて
ますみさん、初めまして!
Exnihiloを使っていただきありがとうございます!
さて、ご質問の内容についてですが、管理画面へのリンクなどが挿入されてしまうのは公式プラグインの余計な機能のせいですね。
ということで、プラグイン自体を編集することになります。
プラグインの管理画面を開き、「リンク」プラグインの「編集」画面を開いてください。
まず、「プラグイン説明(下部)」というところに『このブログをリンクに追加する』についての記述がなされているので、そこをばっさり削除しちゃってください。
次に、「プラグインの改造」で【HTMLの編集】を開くとプラグインのHTMLを編集することが出来るのですが、この中の
<li><a href="./?admin">管理者ページ</a></li>
という部分を削除してください。
最後に、【設定】のボタンを押して変更を保存するのを忘れずに(よく忘れちゃいます)
多分これで大丈夫だと思います(*^-')b
ますみ | ptCUwJnI
Re: プラグインメニューのカスタマイズについて
カスタマイズの仕方を教えていただきありがとうございました。
無事、削除することができました。
プラグインにも編集画面があったのですね。
ここしばらく、ずっと試行錯誤していたので、本当に助かりました。
本当にありがとうございました。
また分からないことがあったら質問させていただくかもしれませんが、そのときにはよろしくお願いいたします。
rimse | 4HNZ8mMg
Re: [template] exnihilo
potaさんはじめまして。
Exnihiloですが、幅固定+センタリングをしようとすると意外と変更箇所が多くなってしまうようです。というのも、もともとの設計が結構無理やりなものなので…。
構造について、もっとシンプルに設計しなおしたものを荒削りですが作ってみました。
それをしばらくテストしてみて、問題なければ共有の方を更新したいと思います。
ということで、すみませんがもう少し時間を頂きたいですm(_ _)m
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Re: [template] exnihilo
上記の件ですが、色々いじっていたら解決しました。
お騒がせしてしまい、申し訳ありません。
また何か質問させて頂くかもしれませんが、その際は宜しくお願い致します(*_ _)
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
>>コメント15番の方へ
編集方法を新しく記事にまとめてみました。お試しくださいませ。
http://rimse.blog73.fc2.com/blog-entry-223.html
ありがとうございました!
rimseさま、ていねいなご説明ありがとうございました!
早速試してみます
質問です。
はじめまして。
Exnihiloを使用させていただいています。
今回、文字の大きさを変えたいと思い色々といじってみたのですがうまくいきませんでした…。
メイン記事の文字の大きさはそのままで、サブメニューの本文の文字の大きさだけを
少し小さいものに変えたいのです。
(タイトル「プロフィール」などの大きさはそのまま)
プラグインで大きさを設定しようにも、個々のソースをいじれるほどの技術はなく、
一括で指定してしまいたいのですが…。
変更することは可能でしょうか?
もしよい方法がありましたら教えてくださると助かります。
宜しくお願いいたします。
rimse | 4HNZ8mMg
Re: 質問です。
Amberさん、初めまして。
> メイン記事の文字の大きさはそのままで、サブメニューの本文の文字の大きさだけを
> 少し小さいものに変えたいのです。
> (タイトル「プロフィール」などの大きさはそのまま)
スタイルシートに、以下の記述を追加してくださいませー。
.menu-body { font-size : small; }
テンプレート中では、サブメニューの本文の要素には「.menu-body」 というクラスがつけられていますので、それに対してフォントサイズを指定するだけでOKなのです。
なお、ここでは「一段階小さく」ということでsmallという値を使ってみました。ここはお好みでサイズを変えてみてください
Amber | K47MgfVQ
ありがとうございました!
rimseさま、迅速な回答ありがとうございます!
早速試してみたところ、無事に変更することが出来ました。
もやもやとしていたのですが、これからはすっきりとした気分で過ごせそうです。
rimseさまのテンプレートはデザインも素敵ですし、
サポートページも親切なので非常に使いやすくてすばらしいです。
新作も楽しみにしております!
それではまた。
ヒノ | ogz9v/Dw
デザイン拝借のお願い
はじめまして。
共有でexnihiloをみつけ、
シンプルでいて、スタイリッシュなデザインに、
一目惚れいたしました。
exnihiloの記事部分をそのまま使用し、
メニュー部分を、自分好みにカスタマイズしようとしたのですが、
CSSなどの割り当てなど把握することが難しく、
他の簡単なテンプレートからカスタムすることにしました。
そこで、記事部分のデザインを利用させていただきたく、
お願いに参りました。
記事部分だけの構造でしたら、何とか把握できそうですので、
許可が頂ければ、自分で頑張ってみたいと思います。
つまり、他のテンプレートを土台にし、
exnihiloの記事部分デザインを利用させていただきたいのです。
もちろん、許可がいただけた際には、
フッターにライセンス表示もさせていただきます。
わがままなお願いとは思いますが、
どうぞよろしくお願いいたします。
rimse | 4HNZ8mMg
Re: デザイン拝借のお願い
ヒノさん、初めまして。
ご丁寧な連絡、どうもありがとうございます。
exnihiloの一部を利用したいとのことですが、全く問題ありません(ちょっと想定外でしたが
)
ただ、exnihiloは簡易カスタマイズなどの項目とのかねあいで、一部のスタイルの記述が離れてされていたりすることがあるかもしれません。
編集の際には、お気をつけてくださいませ-
ライセンスやクレジットの表示などに関しては、テンプレート全体に対しての利用部分の割合や編集の手間などを考えますと、そんなに必要ないような気もします
ものすごくライセンスの表示をしたい!というのでなければ、私自身はそんなに気にしておりませんので、外していただいても結構ですよー。
(CCライセンス利用許諾条項にある【著作[権]者から許可を得ると、これらの条件は適用されません。】ってやつですね)
追記
もしアイコンもご一緒にお使いになるようでしたら、アイコンに関しては別の著作者がいらっしゃいますので、ライセンスの表示が必要になります。
ヒノ | ogz9v/Dw
お返事ありがとうございます。
許可をいただけて、
とても嬉しく思います。
さっそく、カスタマイズに精を出したいと思います。
アイコンもかわいらしく、使用させていただきたいのと、
お礼の気持ちもありますので、
ライセンスの表示をさせていただこうと思います。
今後のデザイン等にも陰ながら期待しております。
お忙しいところ、ありがとうございました。
有難うございました!
以前、exnihiloの幅固定+センタリングについてお尋ねしたpotaです。
共有テンプレ、更新して下さって有難うございました。
newテンプレ、早速ダウンロードして、今現在HP用メモに使っています。なんとかフレームを使ったテンプレートを見つけexnihiloに合わせたデザインにして今現在も使っています。
何の知識もない私にしては上出来なのではと思っています。
(左サイドバーなので1カラムverにしました。こういう風に作って頂けるとは思っていなかったので助かりました。)
親切に対応して下さって、有難うございました。助かりました、これからも頑張って下さい。
Re: 有難うございました!
potaさん、お久しぶりです。気に入っていただけたようでうれしいです
また何かありましたら、お気軽にコメントしてくださいね
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメントNo.26さんへ
Exnihiloは2カラムながら3カラム的なスペースの使い方をしておりますので、これを実質的に「3カラム化」するとなると、表示幅の関係などであまり現実的でないように思います。
また、2カラムから3カラムへの変形は修正箇所が非常に多くなってしまいます。
ですので、申し訳ないのですがExnihiloは2カラムでお使いいただきたく思っております。すみません。
(追加でいただきましたコメントは、URLが表示されておりましたので削除いたしました。ご了承ください)
> 勝手ながら改造しているのですが、問題はないのでしょうか?
カスタマイズなどについては制限はしておりませんので、ご自由に改変していただいて結構ですよ
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメント29番さんへ
コメントありがとうございます。
既存のスタイルを応用してかなり大雑把に作ってみました。
サンプルはこんな感じです。(昔のブログに適用してみました)
http://meaculpa.blog55.fc2.com/
以下のカスタマイズ法は、デフォルト状態のExnihiloに対してのものです。
既にカスタマイズしているものは、変更箇所を見比べてできる限りご自身で対応していただきたく思います。編集する前にコピーを作っておくことを推奨します。
また、今左手しか使えないため、解説をかなり省かせていただいています。ごめんなさい。
以下、すべてHTMLの編集になります。
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>
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>
これはテンプレート中に三箇所あるはずです。すべて編集してください。
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」としてください。
緑色の部分は左右の余白の大きさです。適当に編集していただいて結構です。
4
<!-- 【 ▲サブエリア ここまで 】 -->
↓赤字部分を追加
<!-- 【 ▲サブエリア ここまで 】 -->
<!--/not_index_area-->
編集は以上です。
既にされているカスタマイズによっては、エントランスページに必要ないものが表示されることがあるか思います。
エントランスページのみに表示させたいものは<!--index_area-->と<!--/index_area-->で挟み、表示させたくないものは<!--not_index_area-->と<!--/not_index_area-->で挟むようにしてください。
あとこちらのページも参考にできるとおもいます。あわせてどうぞ。
http://fc2blogwalker.blog21.fc2.com/blog-entry-118.html
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。
ただいまお仕事でえらいこっちゃしてます。
ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。
Recent Comments