FC2ブログ用テンプレートの制作・配布。シンプルなデザインが多めです。
23:19
テンプレート名 : fall-time
最新バージョン : 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です。
このテンプレートは、
クリエイティブ・コモンズ・ライセンス
の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
rimse | 4HNZ8mMg
Re: [template]fall-time
コメントNo.1の方へ。
解説用の記事を作りましたので、そちらをご覧くださいませー
http://rimse.blog73.fc2.com/blog-entry-100.html
Re: [template]fall-time
すみません、FC2のアクセス解析のタグを挿入する場所がわかりません。
公式マニュアルにある<body>が見当たらないのです。
HTMLに詳しくない、どシロートですが、どうぞ教えてくださいませ。
Re: [template]fall-time
上と同じ者です。
最後の方の</body>は見つけられましたので、その前に貼り付けて見ましたが、ダメでした。
rimse | 4HNZ8mMg
Re: [template]fall-time
honyararaさん、初めまして。
Nefertのテンプレートでは、<body>の書き方がちょっと特殊になっています。
他の方の参考にもなるよう、新たに記事として保存しておきましたので、そちらをご覧くださいませ。
http://rimse.blog73.fc2.com/blog-entry-104.html
お手数おかけして申し訳ありませんm(_ _)m
Re: [template]fall-time
うまく行きました。
助かりました。ありがとうゴザイマス♪
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメント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でカラム落ちが発生することがあります。)
コメ7番です。お早い対応に痛み入ります。
さっそくアドバイス通りにやってみましたら上手くいきました。お世話おかけしました。他のテンプレも素敵なものばかりで、今回のものに限らず機会があればお借りしたいと思っています^^
どうもありがとうございましたv
Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。
ただいまお仕事でえらいこっちゃしてます。
ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。
Recent Comments