FC2ブログ用テンプレートの制作・配布。シンプルなデザインが多めです。
02:16
テンプレート名 : Fiore(登録名:fiore)
最新バージョン : 1.61
白と黒のコントラスト。
画像差し替えでインパクトの強いオリジナルテンプレートになります。
左右カラムの切り替え、幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示されます。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。
Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています(fiore 1.3.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です。
このテンプレートは、
クリエイティブ・コモンズ・ライセンス
の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。
無双寂滅 | LyAjo7Ec
Fiore改造の件
はじめまして。
Fioreを使っているのですが…
最新記事欄とフリースペースを出したいんですけど…
どうすれば出来るんですか?
無知なんで宜しくお願いします
Re: Fiore改造の件
無双寂滅さん、初めまして。コメントありがとうございます。
Fioreでは、プラグインカテゴリ3に登録されているプラグインが記事上部に表示されるように設定されております。
ですので、管理画面の「プラグインの設定」から、記事上部に表示したいプラグインをプラグインカテゴリ3に追加していただければ大丈夫です
(なお、プラグイン3はトップページにのみ表示される設定になっております)
タイトル画像を一定の時間毎に変更(入れ替え)させるには
初めまして。
fiore ver.1.0.0を使わせていただいております。(変形3カラムかっこいいです!)
タイトル画像を複数の画像を使って秒単位で変更させたい(スライドショーのような感じです)のですが、タグや挿入箇所を教えていただけますか?
お忙しいところ恐縮ですが、宜しくお願いいたします。
Re: タイトル画像を一定の時間毎に変更(入れ替え)させるには
0k1ramさん初めまして。コメントありがとうございます。
> タイトル画像を複数の画像を使って秒単位で変更させたい
これを実現するためにはJavascriptの知識が必要になってしまうのですが、そういった分野に疎く、今は色々と調べているところです。
申し訳ないのですが、もう少しお待ちいただけますか?ごめんなさい。
Haruka | -
背景画像について
はじめまして!サイト運営のためにFioreを使っています。背景画像の差し替えは可能なのでしょうか?
お返事ありがとうございます
あれから画像の切り替え自体は出来たのですが、ブログネームやサブタイトルが表示されず…試行錯誤中です;;
お手を煩わせてしまって申し訳ありません!
お時間のある時に宜しくお願いいたします。(塾のサイト作り、応援しています!)
Re: 背景画像について
Harukaさん初めまして。コメントありがとうございます。
Fioreのカスタマイズはご自由にしていただいて結構ですよ
何か分からないところなどございましたら、お気軽にコメントしてくださいね。
> 0k1ramさん
色々とスクリプトを試してみているのですが、正直なところかなり厳しいです。というよりも、はっきり言ってしまえば今の自分には出来ません。
すみませんが、この件に関しては他のカスタマイズ(画像のランダム表示)などで手を打っていただければ、と思っています。ごめんなさい。
どぅんがぁ | -
「タイトル画像を…」の件ではありがとうございました。
もう一つ質問してもいいですか?
左側のメインが長いと、右側のプラグインの下部が白くなってしまいます。
できたら、プラグインの下部は黒にしたいのですが、可能でしょうか?
お手数ですがよろしくお願いいたします。
どぅんがぁさん、こんばんは。
黒背景をページ下まで適用させるのは、HTMLとCSSの関係上、ちょっと難しくなっています。
ただ、ページの幅を固定してもOKというのであれば可能になります。
それでよろしければ編集方法を紹介できますが、いかがですか?
どぅんがぁ | -
ご返信ありがとうございます。
とりあえず、このままいこうと思います。
どうもありがとうございました。
ありがとうございました。
お時間を割いていただき、ありがとうございました。
画像のランダム表示で使わせていただきます!
それでは、失礼します。
UTA | InmJsLuw
たびたびすみません。
本当にすみません。
以前、花の色の差し替えのご指南を頂いた者です。
記事を更新しても、常に記事の上に表示される項目を作ろうとしています。
そこで、下の方法を行おうと思ったのですが・・・
プラグイン3に「フリーエリア」を使い、「いつも最初に表示したい」内容をプラグイン「詳細」クリックで開く画面の、「フリーエリア内容の変更」に書きます。
テンプレートHTML(2)・フリーエリアプラグイン(2')ともに、改行したい箇所に、HTMLタグ<br />を書く必要があります。
fioreは、プラグイン3があるようですが、私の管理画面には2までしかないです。
どこか別なところにすっ飛んでしまったのでしょうか?
塾のサイト作りでお忙しいときに、間抜けな質問ですみませんが・・・よろしくお願いします。
Re: たびたびすみません。
UTAさん、お久しぶりです。コメントありがとうございます。
プラグイン3はFC2ブログの標準機能ですので、テンプレート云々に関係なく必ずあるはずです。
プラグインの設定のページを開くと、
▼プラグインカテゴリ1 設定 表示する カテゴリ 位置 移動 設定 削除
と項目が並んでいると思います。
この、「カテゴリ」の部分の数値を「3」にすれば、そのプラグインはプラグイン3に移動されます。
また、新規にプラグインを追加する際の初期設定にて、プラグインカテゴリを「プラグインカテゴリ3」にすれば、プラグイン3に追加することが出来ます。
http://fc2blogmanual.blog60.fc2.com/blog-category-43.html
UTA | InmJsLuw
ありがとうございます。
お忙しいところありがとうございました。
早速やってみます。
では、失礼いたします。
画像が変更されません><。。
はじめまして、このテンプレートを使わせてもらっているんですが。。
初期の画像(お花の)を変更してみようとしたはいいんですけど、画像が変更されません><。。
やはり、サイズとかの問題でしょうかね・・・?
ごめんなさい、無知なもので・・・・
お忙しいところすいませんが、ご返答まってます!
Re: 画像が変更されません><。。
SERORIさん、初めまして。コメントありがとうございます。
画像差し替えがうまくいかない主な原因としては以下のものがあります。
1.画像のURLを間違っている
2.URL書き換えの際に記述ミスが発生している
(関連記事:http://rimse.blog73.fc2.com/blog-entry-232.html)
3.外部呼び出し不可のサーバーにある画像を使おうとしている
(ファイルアップロードを使って画像をアップロードした場合は大丈夫です)
どういう風に編集をしたのか分からないとアドバイスが難しいです。
非公開コメント、もしくはメールなどでもかまいませんので、ブログのアドレスを教えていただけるとありがたいです。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメント18番の方へ
コメントありがとうございます。
> 現在 centerの設定がされていますが、これをright とかleftとかに、画像を差し替えるたびにタイトルも雰囲気で場所を変更したいと思っています。
こちらは、スタイルシートの
/*[3.1]*/
#header {
background-color : #000;
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/snowdance_loading2.gif");
background-repeat : no-repeat;
background-position : 50% 50%;
text-align : center;
}
の「text-align : center;」を変更することで可能です。
ただし、この部分を変更すると、ブログタイトル・ブログ紹介文のどちらも同じように右揃え・左揃えになってしまいます。
もし、タイトル部分だけ変更したいというのであれば、この部分は変更せず、
/*[3.3.1]*/
#title h1 {
(略)
}
の中にtext-align : left; (もしくはright)を記述していただければ大丈夫です。
逆に、ブログ紹介文だけを変更したいというのであれば、
/*[3.6.1]*/
#introduction {
(略)
}
の中にtext-align : left; (もしくはright)を記述してください。
> タイトルの後ろにある黒い帯?みたいなのも、はずすには、どうしたら良いのでしょうか???
こちらは元々のスタイルシートを編集するとちょっと変更箇所が多くなってしまうので、別の方法で簡単に済ませようと思います。
スタイルシートの最後尾に、
#title h1 , #introduction {background : none !important;}
という記述を追加してください。
これで透過部分を外すことが出来るはずです。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
すみません、お名前を間違ってしまってました!失礼いたしました!
数日出かけておりますので(携帯で返信しています)、すみませんが少しおまちいただけますか。
ごめんなさい。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
ありがとうございました。
お忙しいところ、ご丁寧に解説頂きまして、ありがとうございました。
こちらでカスタマイズを試みたいと思います。
あと、もうひとつご質問があります。
<!-- 【 ▼幅可変・固定の切り替え 】
固定幅にする場合はクラス名の「fixed-off」を「fixed-on」としてください -->
<div id="wrapper" class="fixed-on">
<!-- 【 ▲幅可変・固定の切り替え 】 -->
こちらですが、幅可変・固定というのは、
ウインドウの大きさを変えても記事が縦長になったり広がったりしない仕様のことなのでしょうか??
onにしても横に伸びたり縮んだりするので・・・
間違っていたらすみません。
出来たら固定にカチッとさせてみたいなと・・・
思っているのですが・・・
本当に素敵なテンプレートをありがとうございます。
どうも、コメントありがとうございます。
> こちらですが、幅可変・固定というのは、
> ウインドウの大きさを変えても記事が縦長になったり広がったりしない仕様のことなのでしょうか??
そのとおりです。初期設定では画面の幅に合わせて横幅を調整していますが、fixed-onとすることで幅を一定の値に固定することができるようにしてあります。
私のテスト環境では通常に変更することができますので、もしかすると一部記述のミスなどがあるのかもしれません。今ある情報だけでは原因を特定することが難しいので実際の記述を拝見したいのですが、ブログのアドレスを教えていただけませんでしょうか。非公開コメントやメールなどでも結構です。よろしくお願いしたします。
コメント20番・22番の方へ
コメントありがとうございます。
教えていただきました敬称をつけるカスタマイズですが、正直なところおすすめできません。理由は以下のものです。
・クラス名を不用意に増やすことで、既存のクラスとの競合が起こる可能性がある
・2バイト文字を使えない
・HTMLに必要のない要素が増える
・上に関連し、音声読み上げソフトを用いた場合不自然になる
(これはソフトのバージョンなどで解消されていたりもしますが)
ということで、javascriptで処理する方法を無理矢理考えました。
fioreのver1.1.0以上で動作します。
まずコメント表示の
<div class="comment-header"><p><%comment_mail+name> | <%comment_url+str> | <span class="trip"><%comment_trip></span></p></div>
という部分を、次のように変更してください。
<div class="comment-header"><p><span class="commenter-name" title="<%comment_name>"><%comment_mail+name></span> | <%comment_url+str> | <span class="trip"><%comment_trip></span></p></div>
次に、html上部の</head>の直前に、次の記述を追加してください。
<script type="text/javascript"><!--
jQuery.noConflict();
jQuery(document).ready(function($){
$('.commenter-name[title="管理者名"]').append("@管理人");
$('.commenter-name[title="さんをつけたい人の名前"]').append("さん");
$('.commenter-name[title="さんをつけたい人の名前"]').append("さん");
$('.commenter-name[title="さんをつけたい人の名前"]').append("さん");
});
--></script>
「管理者名」と、「さんをつけたい人の名前」の部分を変更してください。
なお、各行をコピー・ペーストすることで、名称をつけたい人を変えることも出来ますし、append("さん")の「さん」の部分をかえることで、敬称も自由に変更することができます。
> それと、ブログ全体の文字(記事の文字だけでも構わないのですが…)
の色を変えたいのですが、
> (中略)
> スタイルシートの変更だけだと、HTMLには変更はいらないのでしょうか??
スタイルシート側の変更だけで通常は大丈夫です。
何かしらの原因で変更が適用されないのかもしれませんが、現状ではわかりかねますので、もしよろしければブログのアドレスを教えていただけませんでしょうか。
> 背景画像、ではなく背景の色を変更する事は可能でしょうか??
以下の太字部分を変更してください。
/*[3.1]*/
#header {
background-color : #000;
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/snowdance_loading2.gif");
background-repeat : no-repeat;
background-position : 50% 50%;
text-align : center;
}
ただし、背景色を変更するとロード中の画像が浮いて見えてしまうので、必要なければ下線部分の記述を削除してください。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメント26番さんへ
コメントありがとうございます。
文字色については、指定通り変更されているように見られます。
確認ですが、簡易カスタマイズ中の文字色の変更にかんするカスタマイズでは、「記事中で指定された色」については変更することが出来ません。あくまで記事中で文字色について指定されていない部分のみに適用されます。
過去の記事を見ますと、記事中で文字色を指定しているため、色が変更されていない部分がありますが、それは仕様通りの動作となっています。
また、ブログを拝見致しましたところ、試行錯誤段階のカスタマイズが所々に残っていて、それが原因でかなり表示が崩れてしまっているようです。
確認できたものをあげますと・・・
テンプレート中でタイトル画像のランダム表示をお使いいただいているようですが、こちらも少し記述が間違っているようです。
http://rimse.blog73.fc2.com/blog-entry-240.html
こちらのコメントNo.2の注意点をご覧くださいませ。
スタイルシート側のタイトル画像の変更についてのカスタマイズで、指定方法が間違っております。
まずスタイルシートでは、背景画像は一つしか設定することが出来ません。
それは、繰り返し記述を追加しても同じです。
スタイルシート側は、「Javascriptを使用しない設定にしている場合に表示させる画像」を一つ選び、その画像のurlを設定するようにしてください。
コメントの名前を表示する部分のHTMLが、カスタマイズ途中のミスだと思いますが、一部二重に記述されており、以降のHTMLの構造が崩れております。
かなりごちゃごちゃになってしまっていますので、一度テンプレートをダウンロードし直して、一つずつカスタマイズを適用し直したほうがよろしいかもしれません…。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
さらっと確認した程度ですが、大きな問題は発生していないように見られます。
ただ、Firefoxではページ左上のナビゲーションがクリックできないようです。
おそらく、fc2ではない方のアクセス解析スクリプトによって透明な領域が確保され、その下にナビゲーションが入り込んでしまっているからだと思いますが・・・詳しいことはちょっとわからないです。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
コメント30番さんへ
コメントありがとうございます。
> メインに表示される記事の下に『スポンサーサイト』というものが出てきているのですが、これはこちらのテンプレートに設定されているのでしょうか?
これはFC2側の仕様変更によるものです。
http://blog.fc2.com/info/blog-entry-355.html
http://blog.fc2.com/info/blog-entry-358.html
ブログ管理画面の「◆FC2インフォメーション」に告知がありますが、多くの方がご覧になっていないようで、ユーザーフォーラムなどにも多数質問がされているみたいですね。
FC2側もきちんと告知期間を設けるか、もしくは広告を表示しない設定をデフォルトにしてほしいものです。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
こんにちは。初めてブログを始めたんですが、こちらのテンプレートを使わせていただいております。
それで、画像の差し替えを行なったんですが、CCライセンスとフォトの所はちゃんと消したりしたんですが、Nefertへのリンクのとろはデフォルトで、
Template[Fiore 1.2.0] By Nefert
となっていますが、画像を変えた場合、
Base TemplateDesign By Nefert
という風に書き換えた方がいいのでしょうか?。
haruさん、初めまして。コメントありがとうございます。
> 画像を変えた場合、
> Base TemplateDesign By Nefert
> という風に書き換えた方がいいのでしょうか?
私のクレジット表示につきましては、特に書き換える必要も、書き換えてはいけないということもありませんよ
原著作者が私であることがわかる範囲で、ご自由に扱ってくださって結構です。
なお、書き換えずにそのままお使いいただいている場合にはテンプレートの更新通知機能が働きます。
末永くお使いいただけるのであれば、書き換えない方が便利かもしれません(笑)
御返答ありがとうございます
rimseさん、お返事ありがとうございました。
更新通知があった方がいいので、そのままの表記でいる事にします
テンプレート内に色々カスタマイズ方が分かりやすく書いてあるので、初心者の私でもとても使いやすいです。
末永く使わせていただきますね^^b
度々質問申し訳ありません
公式プラグインのフリーエリアを追加して、「ACR WEB」というところの「アクセスランキング」というのを設置したら、【ページにエラーが発生しました】と表示されるようになってしまったのですが、どのように対処したらよろしいのでしょうか。
【ページでエラーが発生しました】の部分をダブルクリックしたら、
ライン:2
文字数:193
エラー:文字が正しくありません
コード:0
URL:(私のブログのURL)
という風に表示されました。
どうやら、「ACR WEB」のアクセスランキングの設定で、文字コードが【SHIFT-JIS】というのだとエラーが表示されるみたいです。
文字コードを、【EUC-JP】や【UTF-8】に変えるとエラーは表示されないんですが、アクセスランキングの表示文字がメチャクチャになってしまうみたいです。(見慣れない漢字ばかり表示されてしまいます)
お手を煩わせてしまって申し訳ないのですが、お時間が空いた時でいいので、宜しくお願い致します。
大変申し訳ありませんでした。
あれから色々自分でやってみて、どうやらURLがそのまま表示されていると、このテンプレートではエラーが出るみたいでした。
置換というのを行なって、表示をブログ名やサイト名に置き換えるようにしたら、エラーがでなくなりした。
解決したようで何よりです。
私としても貴重な情報となりました。ありがとうございます!
使用前にお聞きしたいのですが
フォントの変更はできますか?
ゴシックにしたい時はどうすればよいのでしょうか?
また、Macフォントのヒラギノ角ゴや丸ゴの設定はできますか?
レイアウトがとっても気に入ってしまって♪
いろいろ試してはいるのですけど、、
もし設定でできるとのご回答がありましたら
ぜひぜひ使わせて頂きたいと思います!
Re: 使用前にお聞きしたいのですが
hanaさん、初めまして。コメントありがとうございます。
> フォントの変更はできますか?
> ゴシックにしたい時はどうすればよいのでしょうか?
> また、Macフォントのヒラギノ角ゴや丸ゴの設定はできますか?
フォントの設定は、スタイルシートを編集することで変更することができます。
スタイルシートの、
/*[2.1]*/
body {
margin : 0;
padding : 0 25px;
line-height : 1.5;
font-family : "Verdana" , "MS UI Gothic" , "Osaka" , sans-serif;
font-weight : normal;
text-align : center;
background-color : #666;
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/fiore_background.png");
background-repeat : repeat-x;
background-position : 0 0;
background-attachment : fixed;
}
太字部分がフォントの設定になっておりますので、使いたいフォントなどを追加してください。前にあるフォントほど、優先的に使われるようになります(書かれている順に利用できるフォントかどうか判断していくため)。
例として、ヒラギノ角ゴシックを優先的に指定し、メイリオ、その他フォントの指定を増やした場合は次のようになります。
font-family : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Verdana", "MS UI Gothic", "Osaka", "MS Pゴシック", "MS P Gothic", "Helvetica", "Gothic", sans-serif;
スタイルシートの記述方法については
http://www.htmq.com/style/font-family.shtml
などを参照してくださいませ。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
お返事遅れてしまいました。ごめんなさい。
追記の件に関しましては、全称セレクタ(* {~})を使いますと、すべての要素に対して処理を行うため、多少動作が重くなるとの噂です。
動作を変に重くしない、最低限のユーザビリティを確保できる、といった点で、通常のテキストとアンカー部分にのみ処理を限定させるのをおすすめ致します。
スタイルシートに次の一文を追加してくださいませー。
body , a { cursor:crosshair; }
フォントの変更に関して、追加の情報です。
タイトル部分はまた別にフォントを指定していることを忘れていました・・・。
ということで、スタイルシートの
/*[3.4.1]*/
#title h1 a {
font-family : "Lucida Sans Unicode" ,"Verdana" ,"MS UI Gothic" ,"Osaka" ,sans-serif;
/* for IE6 */
position : relative;
z-index : 3;
}
の太字部分を削除してくださいませ。
お手数おかけします…。
JUNON | riYmEOQE
コメント欄の表示について
こんにちは。
最近使わせていただいています。
自分の所では、スパム投稿防止の為一定期間以降はコメントの投稿ができないようにしています。
コメント受付終了後はコメントも表示されなくなってしまうので、終了後も表示されるようにするのはどうすればよいでしょうか?
また、記事の最後尾(追記は除く)からコメント表示欄に直接飛べるようにしたいのですが、どのように変更したらよいのか判りません。
コメントが無い状態で、このリンクが表示されたままでもかまいません。
ご助言を頂けると嬉しいです。
よろしくお願いします。
Re: コメント欄の表示について
JUNONさん、初めまして。コメントありがとうございます。
FC2のやっつけ仕事・付け焼き刃的仕様のため、完璧に対応するのはちょっと難しそうですね。
http://blog.fc2.com/forum/viewtopic.php?f=3&t=23240
ユーザーフォーラムに似たようなものがありました。
変更箇所が多そうなので、少しお待ちいただけますか?
JUNON | riYmEOQE
判りました。
お手数をお掛けしますがよろしくお願いします。
m(_ _"m)ペコリ
Re: コメント欄の表示について その2
JUNONさん、遅れてしまいまして申し訳ありません。
改良案をいくつか試してみたのですが、やはり完璧には対応できませんでした・・・。
といっても違和感はそれほど無いと思いますので、ご容赦ください。
妥協を重ねた結果、編集箇所も少なくて済みました・・・。
まず、HTMLの編集箇所です。
【1】――――
--><!--allow_comment--><!--
--><dt class="comment-info">コメントをする・見る</dt><!--
--><dd class="comment-info"><a href="<%topentry_link>#view_comment">Comments<span class="comment_num">(<%topentry_comment_num>)</span></a></dd><!--
--><!--/allow_comment--><!--
--><!--deny_comment--><!--/deny_comment--><!--
赤字部分を削除してください。
【2】――――
<!-- 【 ▼コメントエリア ここから 】 -->
<!--comment_area-->
赤字部分を削除してください
【3】――――
<div class="write-comment">
の直前に、
<!--comment_area-->
を挿入してください。
編集は以上です。
以下、完全に対応することのできなかった部分です。
・コメントを締め切っていて、さらにコメントが0件のときであっても、【コメント】という見出しが残る
(通常はコメントを締め切っていると見出しも表示されない)
・コメントが数件ついている記事でも、コメントを締め切るとコメント表示部へのリンクが「Comments(-)」と表示される。
こんにちは。
改良策を本当にありがとうございました。m(_ _"m)ペコリ
完全に対応しきれないのは重々承知ですので、この改善方法で大満足です。
Comments(-)」を「コメントをする・見る」とすることで十分だと思うのでそうさせていただきました。
ただ、
<!-- 【 ▼コメントエリア ここから 】 -->
<!--comment_area-->
の部分を
<!--comment_area-->
<div class="write-comment">
に移動させてしまうと、カラム落ちが起きてしまいました。><
ですので、当方の方で
</div>
</div></div>
<!--/comment_area-->
<!-- 【 ▲コメントエリア ここまで 】 -->
の部分を
</li><!--/comment--></ol>
</div>
</div></div>
の位置に移動させたところ改善したのですが、表示記事の一番最後にコメント欄が表示されたままになってしまいました。><
あと、どこを直せばよいでしょうか?
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
JUNONさんごめんなさい…。途中まで違う方法を試していたせいで、テストが不十分だったようです。
ちょっと改良しました。以下の方法をお試しください。
【1】――――
--><!--allow_comment--><!--
--><dt class="comment-info">コメントをする・見る</dt><!--
--><dd class="comment-info"><a href="<%topentry_link>#view_comment">Comments<span class="comment_num">(<%topentry_comment_num>)</span></a></dd><!--
--><!--/allow_comment--><!--
--><!--deny_comment--><!--/deny_comment--><!--
赤字部分を削除してください。
※これは先に紹介した方法と同じです。
【2】――――
<!-- 【 ▼コメントエリア ここから 】 -->
<!--comment_area-->
を次のように書き換えてください。
<!-- 【 ▼コメントエリア ここから 】 -->
<!--permanent_area-->
【3】――――
<div class="write-comment">
の直前に、
<!--/permanent_area-->
<!--comment_area-->
を挿入してください。
【4】――――
</div></div>
<!--/comment_area-->
<!-- 【 ▲コメントエリア ここまで 】 -->
を次のように変更してください。
<!--/comment_area-->
</div></div>
<!--/permanent_area-->
<!-- 【 ▲コメントエリア ここまで 】 -->
ついでといってはなんですが、お使いのfioreのバージョンがちょっと古いもののようですので、とりあえずこちらの修正だけでも適用していただければと思います。
http://rimse.blog73.fc2.com/blog-entry-255.html
お手数おかけして申し訳ありません。
JUNON | riYmEOQE
何度もすいません><
早い対応をありがとうございました。m(_ _"m)ペコリ
お陰様で記事下の余分な部分の表示が改善されました。
ですが、【4】の部分の
<!--/permanent_area-->
が【3】とダブっているからか、入れてしまうとかえってブログ自体が表示されなくなってしまったので、【3】には入れずに【4】にだけあえて入れましたが構わないでしょうか?
それから、コメントを書くためにコメント欄を開くと、またもやカラム落ちしてしまいました。><
どこの記述を変更すればよいでしょうか?
それから、確かに使っている物は頂いたのがかなり前なので古いです。^^;
いつか使いたいと思って取っておいたのです。
やっと使えるようになって嬉しいです。(*^^)
ご指摘の部分を削除しておきました。
度重なる質問で申し訳ありません。><
よろしくお願いします。m(_ _"m)ペコリ
Re: 何度もすいません><
こちらこそ何度も済みません。ミスが多すぎですね・・・。
実は私の手元にfiore1.0.0がもう無いため、fiore1.2.0とJUNONさんのブログのソースコードから編集点を類推しているという状況です。
ソースから類推するのも限界がありますので、最新のHTMLに今回のカスタマイズを施したものをアップロードしておきます。
http://blog-imgs-41.fc2.com/r/i/m/rimse/fiore-test.html
JUNONさんが独自にHTMLに施したカスタマイズはもう一度やり直すことになってしまいますが、CSSについては、これまでのものをそのまま使えるはずです。
今日はもう限界っぽいです。すみません。
JUNON | riYmEOQE
こんにちは。
こちらこそ、何度もお手間をかけさせてしまってすいませんでした。m(_ _"m)ペコリ
アップロードしていただいたHTMLをコピペさせていただいたら、問題は一気に解決致しました。^^
ただ、【1】の部分がそのままだったので教えていただいた所を削除させていただきました。
私のカスタマイズなどたいしたものではないのでご心配なく。^^
では、今回はお忙しいところ本当にお世話にまりました。
早い対応に心より感謝致します。m(_ _"m)ペコリ
無理をさせてしまったようで、申し訳ありませんでした。><
睡眠十分にとってくださいませ。
ありがとうございました。
そらまめ | -
Fioreの [ 続きを読む ]開閉について
[ 続きを読む ]の開閉がどうやらIEの人は動作しないようなのです。
修正があったかと思い、5/13の修正を見てみましたが
特に変わりないようです。
なにが原因でしょうか?
7/2分で お友達にテストしてもらっている最中です。
お身体大丈夫ですか?
なんだかお疲れなのではないでしょうか?
そらまめ | -
たびたびすみません
この記事にある
「1.要素の回り込み」ですが
テンプレートのhtml内 ではなく
貼付ける画像のURLの最後に 【width="75" height="75" alt="testimage" class="f-left" /】を付け足してアップする
という意味ですか?
その方法で 私はいつも
アップしたい画像のURLの最後に
<a href=..... align="left" vspace="1" hspace="15"></a>
ここに記事を書く
<br clear="left">
としているのですが、同じような感じでしょうかね。。。
そらまめさんこんにちは。
> Fioreの [ 続きを読む ]開閉について
http://rimse.blog73.fc2.com/blog-entry-273.htmlでちょっと触れたのですが、jQueryの機能で追記部分のHTMLを読み込むと文字化けすることがあるようです。
(Windows2000&IE6の仮想マシン上で問題が確認できました。)
これはFiore1.4で修正してあります。(後で記事を追加予定です)
また、そらまめさんのブログのソースを確認しましたが、追記開閉スクリプト中で、~~after('><div id="entrymore-visib~~と、余計な「>」が入っているみたいです。大きな問題になっているかはわかりませんが、とりあえず。もしや、最初からこの状態でしたか・・・?
>「1.要素の回り込み」について
追加するのは、「class="f-left"」だけでおっけーです(img要素にクラスをつけるための記述です)。
なお、「align="left" vspace="1" hspace="15"」などの属性は、html4以降は非推奨属性となっています。
といっても、HTML-lintなどの点数が気になるのでしたら使わないほうがいいと思いますが、実用上は問題になることはそんなにないと思います。
お世話になります。
お返事ありがとうございます。
>これはFiore1.4で修正してあります。(後で記事を追加予定です)
そうですか、あとでじっくり見てみます
>余計な「>」
これがどうしても見つからないのですが
見ている所が違うのでしょうか??(汗)
>「class="f-left"」
管理画面の「ファイルのアップロード」から、
これからブログにアップする画像を選択して、
記事を書く画面にして、
その画像のソース?url?の最後にclass="f-left"を付け足してみましたが、回り込まなかったです(涙)
追記開閉スクリプトについての記事を追加、というより既存の記事の編集を行いました。
http://rimse.blog73.fc2.com/blog-entry-267.html
余計な「>」について
ブラウザのソースコードエディタでは表示されていたのですが、違う環境でソースをみてみると無くなってました。謎です。ということで大丈夫そうです。
(ソースコードエディタからのコピペでコメントしたので、>が入ってたのは確かなのですが…謎すぎます)
「class="f-left"」
どのように記述を変更したのかわかりませんのでなんともいえないのですが、そらまめさんが「align="left" vspace="1" hspace="15"」を追加しているのと同様に、「class="f-left"」を追加するだけで大丈夫です。
記事投稿ページを開いて
<img src="画像のurl" class="f-left" />
を貼り付け、「画像のurl」のところを書き換え、プレビューしてみてください。
※記事投稿ページの、テキストエリア下にある「簡易プレビュー」の部分では回り込みは反映されません。
[記事を保存] [プレビュー]
というボタンから、プレビューページを開いて確認してみてください。
そらまめ | mQop/nM.
ありがとうございます その2
なんだか謎な事項が多いですよね(笑)
余計な「>」は、その後現れないようなので放置しました。
もしかしたらブラウザによって違うのかも知れません。
それから
追記開閉スクリプト を書き換えましたら、ieで開くようになりました。
ついでに追記の文字化けが直りました(何か因果関係があったのでしょうか?)
ありがとうございました。
ご負担にならないよう、なるべく自力で頑張ってみます。
ちなみに私は
win ie と
Mac safari、FireFox で閲覧確認しています。
Mac safari、FireFoxは調子がいいです。
参考までに。
Re: ありがとうございます その2
> それから
> 追記開閉スクリプト を書き換えましたら、ieで開くようになりました。
> ついでに追記の文字化けが直りました(何か因果関係があったのでしょうか?)
これまではjQueryのAjax機能の一つを使い、個別記事の追記に当たる部分を読み込みこんでいたのですが、この機能は読み込み先の文字コードがUTF-8でなくてはいけなかったらしいのです。
FC2はEUC-JPを使っているので、その文字コードの不一致で文字化けがおこることがあったようです。
今回のアップデートでは、Ajaxでの読み込みをやめて最初から非表示状態で読み込むようにし、[ 続きを読む ] を押すとその非表示を解除するという、一般的な方法に変更しました。
Ajaxを使って読み込んでいたのは、Javascriptを無効にしている場合、追記部分を読み込まないで良いようにしたいという考えだったのですが・・・なかなか上手くは行かないようです
よっしー | .wsvtpsc
初めまして。よっしーといいます。
FC2BLOGでrimseさんのこのテンプレート(fiore)を昨日から使わせていただいており、
カスタマイズをしたいのですが、あまり詳しくないので少し質問させていただきたいのですが…
というのも、このテンプレートには記事上部にHOMEやNEXT(ページによってはPREV)が表示されますよね。
実はそこに表示される項目を変更/追加したいのです。
もし良ければお答えいただけると幸いです。宜しくお願いします。
よっしー | .wsvtpsc
連続投稿すいません。もう一つ質問させていただきたいです。
現在テンプレート下部を確認するとFiore 1.3.0★になっていて最新版じゃないようなのですが、
すでにテンプレート結構いじっていて、更新しにくいのです。
もし差分だけ更新できるのならしたいのですが…
出来ますでしょうか?
よっしーさんはじめまして。コメントありがとうございます。
> というのも、このテンプレートには記事上部にHOMEやNEXT(ページによってはPREV)が表示されますよね。
> 実はそこに表示される項目を変更/追加したいのです。
編集項目が多いので新規記事にて解説しました。
http://rimse.blog73.fc2.com/blog-entry-280.html
上記ページでも書いていますが、このカスタマイズはユーザビリティを著しく低下させる恐れがありますので、私個人としては非推奨です。追加する項目について十分検討してからカスタマイズを行ってください。
> もし差分だけ更新できるのならしたいのですが…
バグの修正などであればできる限り差分の公開などをしていきたいと考えておりますが、正直、過去のバージョンのサポートを続けるのはかなりしんどいので、できれば更新していただきたいと思っています・・・。既存のカスタマイズによっては、差分更新によるバグ修正もできない恐れがありますので。
なお、Fiore1.3.0から1.4へのバージョンアップについては、
http://rimse.blog73.fc2.com/blog-entry-267.html
こちらの記事で扱っている部分を更新していただければ十分かと思います。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
64番のコメントの方へ
コメントありがとうございます。
リンクをツリー型にするには、共有プラグインを使うのが一番簡単です。(というよりも、プラグイン側で何とかしないと実現できません)
共有プラグインで、「プラグイン説明」をツリーなどの単語で検索すれば、いくつか該当するものがみつかるかと思います。
fioreの利用条件はこちらです。
http://creativecommons.org/licenses/by-nc/3.0/deed.ja
こちらの条件に従っていただくかぎり、カスタマイズについては制限はしておりません。
なお、ちょっと面倒ですが、タイトル画像を変更してお使いの場合は、利用条件はこちらになります。
http://creativecommons.org/licenses/by/3.0/deed.ja
少しだけ条件が緩くなります。
とりあえず、基本的にはカスタマイズは自由であると思っていただいて結構ですよ。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
こんにちは!
はじめまして!
fioreを使わせていただいています。
お聞きしたいのですが
黒背景をページ下まで適用させたいのですが可能ですか?
どうぞよろしくお願いします。
Re: こんにちは!
えなさん、初めまして。コメントありがとうございます。
> 黒背景をページ下まで適用させたいのですが可能ですか?
自分も何とかこれをできるようにしたいなーと思っていたので、色々ごにょごにょして実現できないか探ってみました。
かなり怪しげですが、とりあえず以下のカスタマイズを試してみてください。
なお、お使いのfioreのバージョンがわからないのであるかどうかわからないのですが、最近のものですとスタイルシートの最後尾に「/* スタイルを追加する場合は、この上に追加してください */ }」というのがあるはずです。
今回のカスタマイズでは例外的にこの注意を無視し、注意書きのさらに下の部分に追加する必要があります。
ということで、スタイルシートの最後尾に次の記述を追加してください。
@media screen {
#body {
overflow: hidden;
}
#main , #sub {
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#header {
position : absolute;
top : 0;
}
.shift-off #header {
right : 0;
_right : 1px;
}
.shift-on #header {
left : 0;
_left : 1px;
}
#page {
position : relative;
}
/* 以下、編集が必要になることがあります */
#sub {
padding-top : 700px; /* A */
}
#footer {
background-color : #fff; /* B */
}
}
/* A */、および/* B */という部分は、カスタマイズをしている場合編集が必要になることがあります。
/* A */のほうは、簡易カスタマイズ項目→タイトル部分の変更→【画像の縦幅の調整】という部分の、heightと同じ数値をいれてください。
/* B */は、簡易カスタマイズ項目→【背景色の設定】→メインカラムの背景色と同じ値をいれてください。
一応テスト環境ではうまくいっていますが(IE6・7・8、Firefox、Opera、Chromeで確認済み)、ブログの内容によってうまくいかないことがあるかもしれません。
もしうまくいきましたら報告いただけると嬉しいです。というのも、これがうまくいった場合、今後のアップデートで実装したいと思っているからです。
こんにちは!
rimseさん、回答をありがとうございます。
早速、/* スタイルを追加する場合は、この上に追加してください */ } の下
最後尾に追加してみました。
あ・・・バージョンはFiore 1.41です。
黒背景はちゃんと下まで表示されました。成功です。
ですが・・・コメントをしようと
【色】や【絵文字】をクリックしても表示できません。
何度試してもダメなようなので
教えていただいた追加部分を外してみたところ・・・
【色】や【絵文字】は普通に表示できました。
あたしが画像部分の黒い帯を外したり
記事本文やタイトルの文字を大きくしたり
他のカスタマイズをしているから
ちゃんと表示されないのでしょうか。。
解決が難しいようでしたら仕方ありませんので
このまま使わせていただきます。
すごく気に入っていますので^^
お忙しいのにお手間を取らせてしまい
すみませんでしたm(_ _"m)ペコリ
ありがとうございました。
Re: こんにちは!
> ですが・・・コメントをしようと
> 【色】や【絵文字】をクリックしても表示できません。
むーーー。
InternetExplorerだと確かに表示することができませんね…。
それと、もう少し詳細に動作確認をしていたところ、「追記」や「コメント」に移動すると、それより上の部分が表示されないという不具合もみつかりました…。
> 解決が難しいようでしたら仕方ありませんので
> このまま使わせていただきます。
ごめんなさい。やっぱり構造上難しいようです…。
うまくいけば今後の更新で実装を、と思ったのですが…残念です。
このたびは不正確なカスタマイズでご迷惑をお掛けしてしまいました。申し訳ありません。
おはようございます。
また、教えていただきたい事があって参りました。。
記事をUPした時、タイトルの横に「NEW」か「UP」の画像を
表示することはできますか?
お忙しいのにすみませんm(__)m
よろしくお願いします。
Re: おはようございます。
えなさんお久しぶりです。コメントありがとうございます。
> 記事をUPした時、タイトルの横に「NEW」か「UP」の画像を
> 表示することはできますか?
新規記事にて解説を行いました!
http://rimse.blog73.fc2.com/blog-entry-304.html
ここでは「タイトル」=「記事タイトル」と解釈して解説を行っておりますが、大丈夫でしたでしょうか・・・。
澪 | 8aen/w/Y
はじめまして!
はじめまして、澪と申します。
fioreのテンプレートを使わさせて頂いています。
デザインに惹かれました!
それで、画像を入れ替えてみたとき、
画像差し替えの時の注意(http://rimse.blog73.fc2.com/blog-entry-102.html)を見ながら
HTMLのほうの編集をやりました。
ですが、HTMLの編集をしたことがなく、
これでちゃんと出来てるか不安だったので
コメントさせていただきました。
お時間のあるときに確認して頂けますでしょうか?
そして何か間違えてるところがあれば
教えていただけると嬉しいです。
よろしくお願いします。
Re: はじめまして!
澪さん、はじめまして。コメントありがとうございます。
ブログの方を拝見いたしました。HTMLの編集は問題ありませんでしたが、お使いの画像のライセンスがちょっと気になりました。
というのも、お使いの画像のライセンスが、「表示・非営利・改変禁止」なんですね。
http://creativecommons.org/licenses/by-nc-nd/2.0/deed.en
これと、たとえば「表示・非営利」のライセンス、
http://creativecommons.org/licenses/by-nc/2.0/deed.en
とを見比べると、「表示・非営利・改変禁止」の場合は二次著作物を作ることが認められていないのです。
私個人としては、テンプレートへの組み込みは二次著作物にあたる(「写真」に対して改変禁止の属性がついている場合は、完全に「写真」としての形態で利用することを求めていると解釈しているため)と考えているので、このようにテンプレートに組み込んでの利用はできないかもしれません。
ここら辺は解釈問題になってしまっては意味がないのですが・・・もし連絡が取れるようでしたら、原著作者の方に連絡をとってみたほうが良いとおもいます。
(ただ、おそらく海外の方なのでちょっと難しいかもしれません・・・)
澪 | 8aen/w/Y
回答どうもありがとうございます。澪です。
私が使った画像のライセンスに改変禁止があるから、
テンプレートに利用してはいけないかもしれない。
この改変禁止が無かったら、利用しても大丈夫。
という解釈で大丈夫でしょうか?
危険を冒してまで使おうとは思わないので、
今のところは元のテンプレートに戻しておこうと思います。
またいい画像を見つけて変えようと思ったら
画像のライセンスのほうも確認するようにします。
分かりやすい説明ありがとうございました!
また何かあったらコメントさせて頂きますね!
ごめんなさい、お返事遅れてしまいました。
> 私が使った画像のライセンスに改変禁止があるから、
> テンプレートに利用してはいけないかもしれない。
> この改変禁止が無かったら、利用しても大丈夫。
> という解釈で大丈夫でしょうか?
はい、そのような解釈で大丈夫だとおもいます。
Flickrですと、クリエイティブコモンズライセンスの種類ごとで画像検索をすることも可能ですので、そちらの機能を使って画像をお探しになるとライセンスについて悩むこともなくて便利ですよ
報告が遅れてすみません。
rimseさん、おはようございます。
「新規記事の解説」を読ませていただき
無事に記事タイトルに【UP】の画像を表示させることができました!
お忙しいのにお手数をおかけしました。
ありがとうございましたm(_ _"m)
anakin | -
はじめまして
かっこいいテンプレートですね。herba-3cも気に入っておりまして楽しみながらアレンジさせて貰っております。と言っても超初心者ですのでお手柔らかに。。。
質問ですが、カラムの設定で左側にタイトルとプラグイン3と記事、右側にプラグイン1・2を配置したく思っておりますが可能でしょうか?どのようにすれば良いのでしょう?
幅についても左が3~4割、右が6~7割程度。イメージとしては広告バナー貼り付けメインにしたく思っていますので、幅についてはカラムの幅の変更を読みなんとなく理解できました。
配置の件教えてください。よろしくお願いします。
Re: はじめまして
anakinさん、初めまして。コメントありがとうございます。
> 質問ですが、カラムの設定で左側にタイトルとプラグイン3と記事、右側にプラグイン1・2を配置したく思っておりますが可能でしょうか?どのようにすれば良いのでしょう?
えーと、Fioreに対してのカスタマイズでよろしいでしょうか?
スタイルシートの最後に以下の記述を追加してください。
/* A */#main , #header , #footer { width : 34%; } /* 記事側 */
/* B */#sub { width : 66%; } /* サブメニュー側 */
/* ↑合計して100%になるように値を変更 */
#header , #main , #sub { float : none !important; }
#page { position : relative; }
#sub {position : absolute;top : 0; right : 0px !important; right : 1px; }
#footer .ad , #footer p { padding : 0 2em; }
編集が必要な部分は A と B のところです。
適用するとこんな感じになります。
http://rimse.blog73.fc2.com/?template=example01&index
anakin | -
出来ました!!
お~~凄い!!
いとも簡単に出来ました。
ありがとうございます。更にイメージ膨らませて完成させようと思います。
herba-3cのカスタマイズも同時に進めているのですが、そちらのテンプレートに対しての質問も1件お願い致します。厚かましく申し訳ございません。
左端の三日月マークの大きさを小さく調整し、もう少し左側にするにはどのようにすればよいのでしょうか?またその際、縦に走る点線についても左側に寄せたく思っております。
更に三日月マークにカーソルを合わせた時に色が黄緑になりますが、どの部分で変更したら良いのでしょう?自分なりに探しているのですがなかなか見つかりません。
よろしくお願いします。
Re: 出来ました!!
> 左端の三日月マークの大きさを小さく調整し、もう少し左側にするにはどのようにすればよいのでしょうか?
> 更に三日月マークにカーソルを合わせた時に色が黄緑になりますが、どの部分で変更したら良いのでしょう?
この部分は画像を使ってますので、画像を編集するしかないです。
色の変更だけなら簡単だと思いますが、大きさを変更するとなると、ピクセル単位での調整が必要になってきますので、嫌になるほど面倒だと思います。正直解説するのも嫌になるくらい大変な編集になります。なのでおすすめしません。
とりあえず、色を変更するのであれば、
http://blog-imgs-41.fc2.com/r/i/m/rimse/herba_entrytitle_mini.png
こちらの画像をダウンロードして、下側の部分の色を変更、その画像をサーバーへアップロードし、スタイルシート中の画像のurlをアップロードしたファイルのものに置き換えればOKです。
変更するurlは、「http://blog-imgs-41.fc2.com/r/i/m/rimse/herba_entrytitle_mini.png」、もしくは「http://blog-imgs-41-origin.fc2.com/r/i/m/rimse/herba_entrytitle_mini.png」で検索して引っかかったところです。
> 縦に走る点線についても左側に寄せたく思っております。
次に記述をスタイルシートに追加してください。
.slim-on div.entry-body {
left : 10px;
margin-right : 10px;
padding : 1em 0 0 1em;
}
青文字部分が左側の余白になります。二箇所ありますが、同じ値をいれてください。
一応、この記述を追加するだけである程度空間が小さくなるようにしてあります。
anakin | -
いつもお世話になります
毎度ご丁寧に教えて頂きましてありがとうございます。お陰さまでカスタマイズも日々理想に近づき楽しんでおります。
herba-3cの質問ですが、カラムの幅変更をした為、Comments Trackbacks (カテゴリー表記)の横並びが途中で途切れてしまい見た目かっこ悪くなってしまいます。
Comments Trackbacksで改行
下段に(カテゴリー表記)としたいのですが、どのように変更したら良いでしょうか?
また、広告バナーをキレイに配置しようとプレビューで随時確認しながらレイアウトや幅設定をしておりましたが、別のパソコンで見ると努力も水の泡でガタガタに崩れてしまっています。
この修正についてはどう対処すべきでしょうか?
FC2側の問題なんでしょうか?
知識を拝借できればと思います。
よろしくお願い致します。
Re: いつもお世話になります
> Comments Trackbacksで改行
> 下段に(カテゴリー表記)としたいのですが、どのように変更したら良いでしょうか?
スタイルシートに以下の記述を追加してください。
dl.entry-info dd.category-info {
display : block;
}
> また、広告バナーをキレイに配置しようとプレビューで随時確認しながらレイアウトや幅設定をしておりましたが、別のパソコンで見ると努力も水の泡でガタガタに崩れてしまっています。
Nefertのテンプレートはウィンドウの幅に合わせ、表示幅を変化させるリキッドレイアウトになっています。なので、閲覧する環境が変われば表示も変わります。
どんな環境でもある程度同じように表示させたいのであれば、幅を固定するカスタマイズを行ってください。
このやり方はスタイルシート上部に書いてあるはずです。
anakin | -
早速ありがとうございます
早速実行してみます。
ありがとうございます。
NameM | Gq0FXzEQ
前後ページのナビゲーションについて
Fione ver1.41からテンプレートを使わせて貰ってます
Fioneのverが1.5に変わって、前後のページのナビゲーションに
不等号で分かりやすくしてありますよね
その不等号を消したり、付け加えたりする場所はどこでしょうか?
自分はこういうのが苦手でして・・・何度も質問するかもしれませんがよろしくお願いします
NameMさん、はじめまして。コメントありがとうございます。
> Fioneのverが1.5に変わって、前後のページのナビゲーションに
> 不等号で分かりやすくしてありますよね
> その不等号を消したり、付け加えたりする場所はどこでしょうか?
< や > はHTML側に追加したものを、スタイルシートで制御するという方法をとっています。
表示を消すだけなら、スタイルシートで制御可能です。
ページ上部のナビゲーション部分の < > を消す場合は、スタイルシートの最後尾に
dl#pagetop-link a span {
display :none;
}
を、記事下のナビゲーション部分の < > を消す場合は、
dl#pagecenter-link a span ,
dl#pagebottom-link a span {
display :none;
}
をスタイルシートに追加してください。
NameM | Gq0FXzEQ
分かりやすい説明ですんなりと出来ました
これからもFioneを使っていきます
ありがとうございました
emiママ | qj3joNSg
はじめまして!
fiore使わせていただいています。
早速なのですが、昨日から突然表示が崩れてしまって困っています。
私はwin firefoxを使っているのですが、win IEでは問題なく表示されているようです。
また、この記事にコメントされている方々のブログをいくつか拝見させていただいたのですが、同じような表示崩れはなく・・・。
あまり詳しくないのでどうしたらいいのか分からず、コメントさせていただきました。
お忙しいところ本当に申し訳ありませんが、ご回答よろしくお願いします。
emiママさん、コメントありがとうございます。
> 早速なのですが、昨日から突然表示が崩れてしまって困っています。
> 私はwin firefoxを使っているのですが、win IEでは問題なく表示されているようです。
ブログを確認してみましたが、表示の崩れを見つけられませんでした。
「表示の崩れ」というのはどのような症状でしょうか?また、それはすべてのページで起こっていますか?どの部分で発生しているかなど、詳しく教えていただけると幸いです。
emiママ | qj3joNSg
rimseさま、お忙しい中お返事ありがとうございます!
また、あいまいな表現でお手数をかけてすいません・・。
私が見ているfirefoxでは、トップ画像が切れた状態で画面上部にあり、背景は全面白。
右カラムは記事の下にあります。
記事もプラグインも画面いっぱいに広がっている(通常の幅ではない)状態です。
フォントも変わっています。(コメントを記入する時のフォントと同じようです)
すべてのページが同じように表示されます。
こんな説明で分かりますか?
ただ、こちらのブログでもこのテンプレを使っている方々のブログでも同じような表示崩れは見られませんし、崩れる直前はHTMLもCSSもいじっていないので、私個人のPC環境からくるものなのかな・・・と思っています。
rimseさんにお答えいただく範囲ではないとは思うのですが、考えられる原因を教えていただければ嬉しいです。
emiママ | qj3joNSg
たびたびすいません!
rimseさま。
たびたびすいません!
先ほどFirefoxのプラグイン「Adobe Acrobat」の最新版を入れたらあっさり問題解決してしまいました!
いろいろお手数をおかけしてすいませんでした。
今回の表示崩れは、やはり↑の最新版を入れていなかったせいでしょうか・・・。
まだまだ分からないことだらけで・・・。
個人的な環境のことで、rimseさんの時間をとらせてしまってすいませんでした!
これからもこのステキなテンプレを使わせていただきますね。
お騒がせしました!ありがとうございました。
Re: たびたびすいません!
emiママさん
なるほど、解決したみたいで良かったです!
はじめまして
この度ブログを始めようと思いテンプレートを探しておりましたら、rimse様のページを見つけテンプレートの美しさに一目惚れしてしまいました。
現在非公開になっているとのことですが、なんとかfioreのテンプレートをお借りすることはできませんでしょうか。
はじめまして!
こちらのfioreを使用したくて毎日うずうずしております!笑
はやくダウンロードできるといいなぁ(#^.^#)
毎日チェックさせていただきますのでがんばってくださいませ!
度々申し訳ありません><
もしもこちらのfioreを使用する場合、画像サイズ(お花の部分です)はいくつのものを用意しておけばよいでしょうか?
まだダウンロード待ちの状態でこのような質問をさせていただいて大変申し訳ないのですが、
今から画像の方を準備させていただきたいので、宜しければ画像サイズを教えていただければと思います。
ご迷惑でなければ差し替え方法も一緒にお願いできれば嬉しいです!
ダウンロードできるのを楽しみに待ってます!
Re: 度々申し訳ありません><
POPさん、コメントありがとうございます。
> もしもこちらのfioreを使用する場合、画像サイズ(お花の部分です)はいくつのものを用意しておけばよいでしょうか?
> まだダウンロード待ちの状態でこのような質問をさせていただいて大変申し訳ないのですが、
> 今から画像の方を準備させていただきたいので、宜しければ画像サイズを教えていただければと思います。
> ご迷惑でなければ差し替え方法も一緒にお願いできれば嬉しいです!
まだ公開のメドがたっていませんが……(スミマセン)、画像は横500ピクセル、縦700ピクセルのものを使っています。
画像の差し替え・使用する画像のサイズの変更などは簡易カスタマイズとして、あらかじめスタイルシートに変更方法がまとめられています。
お忙しい中、返答ありがとうございました!
了解しました~★
公開されるのを楽しみにしてますのでがんばってください!
応援しています~(●^o^●)
承認待ちコメント
このコメントは管理者の承認待ちです
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
プリア | -
どうも、プリアです
早速なんですが、Fioreにバグが発生したようです。日付がずれてます。
11月がDecになり、12月がundefinedになって、1月はFebで表示してます。
今自分のブログでは新年挨拶をしてましたが、表示してる日付が Feb. 01, 2014になりました。去年の12月のエントリーも unrefined. XX, 2013になってて、どうやっても直せません。
これはfc2の方からバグったか、Fioreのテンプがバグったかはわかりませんが、他のテンプを使ってる知り合いのブログではバグらないし、自分のエントリーの設定にも日付が正しくて、ブログに表示してる日付の方だけがバグってます。
プリアさん、コメントありがとうございます。
確認してみたところ、テンプレート側の記述ミスでした……!一年くらい不具合が残っているまま放っておいてしまったようです。本当に申し訳ありません!!早急にテンプレートを修正して更新しようと思います。
手作業での修正の方法は以下の通りです。お手数おかけします…。
テンプレートの編集ページを開き、HTMLの編集から、
// [ C. Date display ]
function n_days(yy,mm,dd,dw,dwj,pt) {
var out = new Array();
var n_l = "<%template_language>";
var n_m1 = ["Jan.","Feb.","Mar.","Apr.","May","Jun.","Jul.","Aug.","Sep.","Oct.","Nov.","Dec."];
var n_m2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
if(yy != "--") { //exception handling
mms = n_m1[parseInt(mm)];
mml = n_m2[parseInt(mm)];
// [Variable name]
// yy : Year , mm : Month , dd : Day
// dw : Day of the week , dwj : Day of the week(Japanese)
// mms : Abbreviated month(English) , mml : Unabbreviated month(English)
という記述を探してください。
(上のほうにあります)
この部分を次のように修正してください。
// [ C. Date display ]
function n_days(yy,mm,dd,dw,dwj,pt) {
var out = new Array();
var n_l = "<%template_language>";
var n_m1 = ["Jan.","Feb.","Mar.","Apr.","May","Jun.","Jul.","Aug.","Sep.","Oct.","Nov.","Dec."];
var n_m2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
if(yy != "--") { //exception handling
mms = n_m1[parseInt(mm)-1];
mml = n_m2[parseInt(mm)-1];
// [Variable name]
// yy : Year , mm : Month , dd : Day
// dw : Day of the week , dwj : Day of the week(Japanese)
// mms : Abbreviated month(English) , mml : Unabbreviated month(English)
(赤文字部分が変更箇所です)
プリア | -
直りました!ありがとうございます!
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
No.103の方へ
申し訳ありませんが質問の際には、情報の共有のため非公開コメントはご遠慮ください。
非公開コメントの一部を抜き出して返信させていただきます。
> タイトルとその下にある日付の横に|ではなくアイコンのような画像を用いることは可能でしょうか?
可能です。が、画像の位置の調整等については、どのような画像を使うかが分からない点、特に個別的な対応となってしまう点で多分な負担となりますので、ご自身で調整をお願いいたします。
とりあえず、記事タイトル及び日付横の縦線を削除する方法を紹介いたします。
スタイルシートの編集から、
/*[7.2]*/
div.EntryTitle {
border-left: 3px solid #2581F1;
min-height: 2em;
font-size: 120%;
}
と
/*[7.8]*/
div.EntryDate {
font-size: 85%;
line-height: 1.15;
padding-left: 7px;
margin-top: 1px;
border-left: 3px solid #999 ;
}
という部分を探して、赤字部分を削除して下さい。
> タイトルの文字の大きさを最初だけ大きくするのではなくすべて同じ大きさに
こちらも、スタイルシートの編集から、
/*[7.4]*/
h2.EntryTitle:first-letter {
font-size: 185%;
line-height: 1;
margin-right: -0.02em;
}
という部分を削除してください。
マクノスケ | GWMyNl/.
はじめまして。
はじめまして!
fiore使わせていただいています。
とても洗練されたデザインで気に入っております!!
私はプラグインに画像を原寸表示されるため pictlayer というプラグインを使っているのですが原寸表示すると画像がサイドバーの文字や画像の下になってしまいます。
他のテンプレートでは表示されていたので、もしかしたら、fioreは出来ない仕様なのかなと思い諦めかけていたところ同じfioreを使っている方で ちゃんと重ならずに表示されている方がいらっしゃるのをみつけました。この方の バージョンが1.0.0でして、古いバージョンなら表示出来るのかもしれないと思ったのですが、そのバージョンをダウンロードするのは可能でしょうか?
もしくは CSS等で対処出来るのでしたら、是非対策を教えて戴けると助かります。
お忙しいところ申し訳ありませんが宜しくお願いします。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Re: はじめまして。
マクノスケさん、コメントありがとうございます。
> 私はプラグインに画像を原寸表示されるため pictlayer というプラグインを使っているのですが原寸表示すると画像がサイドバーの文字や画像の下になってしまいます。
> ……
> もしくは CSS等で対処出来るのでしたら、是非対策を教えて戴けると助かります。
テンプレートを編集するよりも、プラグイン側を編集するのがお手軽かと思います。
プラグインの設定ページから、お使いのpictlayerというプラグインの[詳細]ページを開き、その中の「プラグインの改造 【HTMLの編集】を行います。(上級者向け)」という部分をクリックして下さい。プラグインを編集することが出来るようになります。
その中の、
DivElement.style.position = 'absolute';
という記述の下に
DivElement.style.zIndex = 10;
を追加して下さい。
同様に、
Imgcontainer.style.position = 'absolute';
という記述の下に、
Imgcontainer.style.zIndex = 11;
を追加して下さい。編集は以上です。
マクノスケ | GWMyNl/.
ありがとうございました!!
素晴らしいですー!!
追加したらちゃんと表示出来るようになりました!!
もう嬉しくて。嬉しくて!!
思い切ってご相談してよかったです。
お忙しいところお手数お掛けしてすみませんでした。
ありがとうございました。本当に助かりました。
これからも頑張って下さいね。応援しています。
はこ | 4sJMsgyo
はじめまして。
お忙しいところすみません。
質問させてください。
こちらのテンプレートをDLさせていただき、頑張ってカスタマイズしている最中なのですが
ブログタイトル表示部の黒い帯?のところを変えようとして、行き詰っています・・・
こちらの過去の質問をひととおり拝見したところ、同じ質問が(非表示で?)あったようで
その方へのご回答にあった方法で試したのですが、
うまくいきません;;
ブログタイトルの下に黒い太線が表示される状態になっています。
どのようにすればよいでしょうか?
/*[3.3.2] background */
#Title h1 ,
#Intro {
background-image: url("http://以下略");
background-repeat: repeat;
background-position: 0 0;
}
.ltIE7 #Title h1 ,
.ltIE7 #Intro {
filter: Alpha(opacity=75);
background-color: #000;
background-image: none;
height: 1%;
}
の部分をごそっと抜いてみたらパッと見大丈夫そうな感じに見えたんですが、
それだと不具合とかありますか?
どうぞよろしくお願いいたします。
Re:
はこさん、はじめまして。コメントありがとうございます。返信が遅くなってしまってすみません。
> ブログタイトル表示部の黒い帯?のところを変えようとして、行き詰っています・・・
黒い帯背景を非表示にするということでしたら、はこさんがお考えの通り、その部分を削除するという編集で問題ありません。
rimseさま
お忙しい中お返事くださり、ありがとうございました!
とても見やすく使いやすいテンプレートで、また、好みにカスタマイズもでき
本当にうれしいです。
おかげさまで疑問も解決しました。ありがとうございました。
お知恵を拝借お願いします。
このテンプレート、非常に気に入り使用させていただいております。
何点か改善方法を教えてていただきたいのですが
1.ブラグインの題名部分の文字色の変更方法
2.上部のFC2の文字と検索窓が中心に来てしまいました。
3.枠外の右側に余計な広告が出てしまいます。(あらゆるジャンルのブログでもこれは見た事がありません)
HTMLを変更した際の不具合かと思いますが私ではどうにもなりません。
どうかお助けお願いできますでしょうか。
誠に失礼ですが、ブログURAはこの後に非公開コメにて記載させていただきます。
お手数お掛けしますがよろしくお願いいたします。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
Re: お知恵を拝借お願いします。
キラキラ星さん、コメントありがとうございます。
> 1.ブラグインの題名部分の文字色の変更方法
/*[18.1]*/
#Sub h2 {
(略)
}
にcolorプロパティを追加するか、スタイルシート最後尾の「スタイルシート追加用エリア」に
#Sub h2 { color : ●●●; }
を追加して下さい(●●●の部分は変更が必要です)
> 2.上部のFC2の文字と検索窓が中心に来てしまいました。
> 3.枠外の右側に余計な広告が出てしまいます。(あらゆるジャンルのブログでもこれは見た事がありません)
> HTMLを変更した際の不具合かと思いますが私ではどうにもなりません。
> どうかお助けお願いできますでしょうか。
ソースを見た感じでは、タイトル画像をランダムにするスクリプトの挿入に失敗しているようです。
<script type="text/javascript">
var imglist = new Array(
"http://略" );
var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
var output = '<style>#HeaderInner { background-image : url("' + imglist[selectnum] + '"); }<\/style>';
document.write(output);
</script
↑ここの>が抜けているので、それを追加してみて下さい。
Re:114
ご丁寧にありがとうございました。
感謝いたします。
Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。
ただいまお仕事でえらいこっちゃしてます。
ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。
Recent Comments