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

★ 基本情報

テンプレート名 : day-out
最新バージョン : 2.2

更新履歴 - Update history

2014/8/31 : 2.11→2.2
[Modify] 新仕様サーバーに対応
[Modify] アイコン追加
[Modify] 一部スタイル修正
2009/10/12 : 2.1→2.11
[Bug Fix] IE6で閲覧時、アカマイ広告にカーソルをあわせると一部要素の高さが変化する(IE6の)バグに対応
2009/10/08 : 2.01→2.1
[Modify] 全記事一覧表示に対応
[Modify] 「前後の記事へのリンク部分」のスタイル変更
[Modify] プラグイン3の出力方法を変更
[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応
[Modify] 簡易カスタマイズ一部改良
[Modify] pre、hrなどのデフォルトスタイル変更
[Modify] その他スタイル微調整
2009/07/04 : 2.0→2.01
[Bug Fix] 独自クラスのスタイル指定を修正
(軽微な更新のため、更新通知はしておりません)
2009/07/02 : バージョン表記無し→2.0
[Modify] 追記開閉スクリプト実装
[Modify] その他色々大幅更新

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

Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています(day-out 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
このテンプレートは、 クリエイティブ・コモンズ・ライセンス の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。

タイトル画像
"Antarctica: Penguin Hunting" / elisfanclub (Flickr)
Creative Commons License
HTML・CSS・ICON
"day-out" / rimse
Creative Commons License


コメント

  1. |

    管理人のみ閲覧できます

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

    ( 05:23 )

  2. rimse | 4HNZ8mMg

    コメント:1番の方へ

    ブログを拝見させていただきました。
    ソースを見たところ、記事ごとに<font size="2">~</font>とフォントサイズが指定されていて、そちらのスタイルが優先されるためにスタイルシート側でフォントサイズを変更しても変化がないようです。

    テンプレート側ではそういったフォントサイズの指定をしていませんので、おそらくは記事側の指定によるものだと思います。一度、記事側を編集していただきまして、フォントサイズが正常に変化するかお試しください。

    ( 20:54 [Edit] )

  3. コメント1番 | 4SZw2tfw

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

    お手数をおかけして申し訳ありませんでした。
    理由が判ってすっきりしました。
    今は、お借りしたままの状態で使わせていただいております。
    これを踏まえて勉強させていただきます。

    こちらのテンプレートは本当にステキですね。
    これからもますますのご活躍を期待しております。
    どうもありがとうございました。

    ( 15:03 [Edit] )

  4. komekome | -

    こんにちは。
    day-outを使用させてもらっています。
    ブログ紹介分の右上にあるアップ時の時計表示をタイトルの下に変更したいのですが可能でしょうか?
    よろしくお願いします。

    ( 21:37 )

  5. rimse | 4HNZ8mMg

    komekomeさん、コメントありがとうございます。

    > ブログ紹介分の右上にあるアップ時の時計表示をタイトルの下に変更したいのですが可能でしょうか?
    http://blog-imgs-41.fc2.com/r/i/m/rimse/dayout_loading.gif
    こちらの画像の位置を変更したい、ということでよろしいでしょうか?
    ただ、「タイトルの下」というのがどういう場所になるのか、分かりかねますので、試行錯誤が必要になってしまうかと思います。
    (なお、このカスタマイズで動かせる範囲は、タイトル画像が表示されるエリア内のみとなっております。違う意味合いでしたらごめんなさい。)

    スタイルシートの編集を行います。編集箇所はナンバリングを参考にどうぞ。
    /*[3.1]*/
    #header {
    border : 1px solid #333;
    border-top : none;
    background-color : #333;
    background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/dayout_loading.gif");
    background-repeat : no-repeat;
    background-position : 50% 50%;
    }

    この、太字部分で画像を表示する位置が決められています。
    標準状態ですと、左から50%、上から50%の位置に表示するように設定されています。
    ここの数値を変更することで、位置をかえることができます。
    この記述についての詳細は、
    http://www.htmq.com/style/background-position.shtml
    こちらなどを参考にどうぞ。

    ( 15:54 [Edit] )

  6. |

    管理人のみ閲覧できます

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

    ( 12:02 )

  7. rimse | 4HNZ8mMg

    コメント6番さんへ

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

    管理・保全の面から、一つのテンプレートに対して同じ内容のCSSをいくつも作ることは考えておりません。
    もしコメントがないCSSが必要でしたら、CSSを圧縮するサービスがいくつかありますので、そちらをお使いになると便利かと思います。
    参考におひとつ。
    http://www.codebeautifier.com/

    まさかコメントがあることでわかりにくくなっているとは思ってもいませんでした。
    お時間ありましたらどこがわかりにくかったのか教えていただけませんか。

    ( 20:29 [Edit] )

  8. |

    管理人のみ閲覧できます

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

    ( 11:46 )

  9. rimse | 4HNZ8mMg

    コメント8番さんへ

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


    > 全体幅は今のまま、カラム部を縮め本文部を広げたい
    スタイルシートを編集します。編集箇所は以下の通りです。ナンバリングを参考にお探しくださいませ。

    /*[5.1]*/
    #main {
    float : left;
    width : 64%;
    overflow : hidden;
    }

    および

    /*[16.1]*/
    div#sub{
    width : 35%;
    float : right;
    padding-top : 1.5em;
    /* for IE5 */text-align : center;
    }

    これらの太字部分により、カラムの割合が指定されています。#mainが本文側、#subがプラグイン側です。それぞれの割合が足して99%になるよう、値を調整してください。


    これらの設定に関しては、今後のアップデートにて簡単に変更できるよう調整していきたいと思いますe-68

    ( 23:46 [Edit] )

  10. コメント8番 | yWLg4BnU

    rimseさん
    素早い回答、ありがとうございました!
    rimseさんのテンプレートは素敵でカスタマイズもしやすく凄く使いやすいです!
    これからも頑張ってください!
    本当にありがとうございました!
    今後ともよろしくお願いいたします。

    ( 09:13 [Edit] )

  11. gaien | -

    おはようございます。

    day-outを使用させてもらっているのですが、

    時計表示の右横と、アクセスカウンンタの横いスクロールバーが表示されるようになってました。昨日はなかったのですが…
    何か不具合なのでしょうか?

    もしもこのテンプレートの問題でなければもうしわけありません。

    ( 10:45 )

  12. rimse | 4HNZ8mMg

    gaienさんはじめまして。コメントありがとうございます。

    今ある情報だけでは原因はわかりかねます。
    非公開コメント、もしくはメールフォームからでもかまいませんので、gaienさんのブログのアドレスを教えていただけませんか。
    実際の表示やソースコード等を見なければ、原因を特定するのは難しいです。

    ( 14:57 [Edit] )

  13. |

    管理人のみ閲覧できます

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

    ( 20:09 )

  14. |

    管理人のみ閲覧できます

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

    ( 22:37 )

  15. rimse | 4HNZ8mMg

    IE5.5/6/7/8、Firefox3、Opera9.6、GoogleChromeで表示を確認しましたが、スクロールバーは表示されていませんでした。
    OS・ブラウザ等によっては多少差異があるかもしれませんが、gaienさんの環境(OS・ブラウザ等)はなんでしょうか?

    ( 23:14 [Edit] )

  16. |

    管理人のみ閲覧できます

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

    ( 23:57 )

  17. rimse | 4HNZ8mMg

    表示に不具合が生じるのは、すこし古いブラウザ(InternetExplorer5.xやMac版InternetExplorerなど)をお使いの場合が多いため、Windows Vistaをお使いでしたらブラウザのバージョン等が問題になることはあまりなさそうですね。
    (私自身Windows Vista上でテンプレートの作成・表示の確認を行っております)
    今回の事例に関しましては、再現ができない以上、原因の特定が難しく、こちらとしてもかなり困惑しております。
    記事やプラグインの追加・編集を行っていない状態で表示が変わったとなりますと、こちらで対処できる問題かどうかも見当がつきません・・・。


    ただ、実質的には、先ほど述べたブラウザでは表示に問題は見あたらなかったため、ブログを閲覧される殆どの方は問題無く表示できていると思われます。

    ( 01:50 [Edit] )

  18. |

    管理人のみ閲覧できます

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

    ( 02:25 )

  19. |

    管理人のみ閲覧できます

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

    ( 00:12 )

  20. rimse | 4HNZ8mMg

    コメント19番さんへ

    バージョン2.0では各部分の文字色の変更に関して、簡易カスタマイズ内にまとめてあります。
    もしカスタマイズしている部分がすくなければ、バージョンアップしていただいた方が機能がいくつか機能が追加されておりますので便利かと思います。

    もし更新が面倒でしたら、次の記述をスタイルシート最後尾に追加し、お好みにあわせて色を変更してください。

    #sub { color : #555; }

    ( 19:55 [Edit] )

  21. リコ | -

    day outを使用させてもらっています。
    カスタマイズをいろいろしているのですが、
    リンク先のコメント投稿欄のbackground-colorの変更の仕方がわかりません。
    既存のカラーは白ですが黒のしたいと思ってます。
    どの部分を変更すればいいのでしょうか?
    お手数ですが教えてください。

    ( 19:27 )

  22. rimse | 4HNZ8mMg

    リコさん、初めまして。コメントありがとうございます。

    > リンク先のコメント投稿欄のbackground-colorの変更の仕方がわかりません。
    「コメント投稿欄」というと、フォーム部品のことでしょうか?

    スタイルシートの最後に次の記述を追加してください。
    .write-comment input ,
    .write-comment textarea ,
    .edit-comment input ,
    .edit-comment textarea {
    background-color : #000;
    }

    これだけだと見た目が多少悪くなってしまうので、borderプロパティなども変更した方が良いかもしれません。

    ( 21:02 [Edit] )

  23. リコ | -

    早速ありがとうございます。

    すみません、説明不足でした。

    「コメント投稿欄」のフォーム部品ではなく、その外の四角の枠の中の色です。

    コメント投稿のバックの色です。

    よろしくお願いします。

    ( 21:18 )

  24. rimse | 4HNZ8mMg

    すみません、そちらでしたか。

    リコさんがどのバージョンをどのようにカスタマイズしているのかわかりませんので、ナンバリングなどがちょっと違うかもしれませんが、スタイルシート中の

    /*[10.1]*/
    div.comment ,
    div.trackback {

    }

    という部分が、コメント及びトラックバックのボックスに関する設定になってます。
    ここに背景色の設定をしてください。

    ( 22:13 [Edit] )

  25. ティティ | uETSVAf.

    はじめまして。
    day-outテンプレートを使わせてもらっています。

    右側のサイドメニューなのですが、パソコンの種類によって
    下の方にずれて表示されるみたいなのです。
    なんとか このキレイな状態で表示する方法はありますでしょうか?
    教えて頂けると助かります。
    どうぞ よろしくお願いいたします。

    ( 23:21 [Edit] )

  26. rimse | 4HNZ8mMg

    ティティさん、初めまして。コメントありがとうございます。

    > 右側のサイドメニューなのですが、パソコンの種類によって
    > 下の方にずれて表示されるみたいなのです。

    9月17日の記事中で、divの閉じタグ(</div>)を一つ余計に記述しているため、テンプレートの構造が崩されているようです。

    9月17日の記事中の、

    ▲▲いつも ありがとうございます▲▲</strong></Div>

    赤字部分を削除してください。

    また、同じく9月17日の記事中で「</right>」という不明なタグが使用されています。これも削除してください。

    ( 01:27 [Edit] )

  27. |

    管理人のみ閲覧できます

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

    ( 07:01 )

  28. ティティ | uETSVAf.

    rimseさん こんばんは!
    連絡が遅くなり 申し訳ありません。
    ようやく もうひとつのパソコンでの表示も確認できました。
    サイドメニュー。しっかり表示されてます。
    アタシのタグ打ちが失敗して おかしな事になっていたのに
    丁寧に教えてくださり 助かりました。
    & ありがとうございます。
    テンプレート。大事に使わせて頂きます。^^

    ( 00:28 [Edit] )

  29. 2yan | a/V0Tsuk

    はじめまして。

    スタイリッシュでシンプルなテンプレートをありがたく使わせて頂いております。

    質問なんですが、最近Google chromeを使い出したところ、ブログのFC2カウンターにテキストのリンクと同じようにアンダーバーが付いているのです。
    他のFC2ブログのカウンターを見てみると、同じようにアンダーバーが出ているところもあれば、Firefoxなどで見たときのように何もないところもあるのですが、これはテンプレートの違いからなんでしょうか?
    別に大した問題でもないのですが、もしCSS等でchromeから見たとに出るアンダーバーを簡単に消せるのならば教えて頂きたいと思いまして伺いました。

    よろしくお願いします。

    ( 10:15 [Edit] )

  30. rimse | 4HNZ8mMg

    2yanさんはじめまして(Twitterではフォローありがとうございます)

    > 別に大した問題でもないのですが、もしCSS等でchromeから見たとに出るアンダーバーを簡単に消せるのならば教えて頂きたいと思いまして伺いました。

    ものすごーく付け焼き刃的なやり方ですが、以下の記述をスタイルシートに追加してみてください。
    このやり方は、公式プラグインでFC2カウンターを表示させている場合に有効です。

    .plugin-fc2counter a {
    text-decoration : none;
    }

    ( 00:02 [Edit] )

  31. 2yan | a/V0Tsuk

    おお!直りました!

    何やら妙に気になってたのがこれでスッキリしましたw
    ありがとうございました!

    ( 02:52 [Edit] )

  32. 2yan | a/V0Tsuk

    こんばんはー

    前回の質問のときに教えて頂いた、
    chromeから見たFC2カウンターのアンダーバーを消す

    .plugin-fc2counter a {
    text-decoration : none;
    }


    を同じようにday-out2.11とnude1.2のCSSに追加してもカウンターのアンダーバーが消えませんでした。自分が何かを間違えているのでなければ、他の方法を教えて頂けないでしょうか。

    ( 19:56 [Edit] )

  33. rimse | -

    2yanさん、お久しぶりです。コメントありがとうございます。

    > 前回の質問のときに教えて頂いた、
    > chromeから見たFC2カウンターのアンダーバーを消す
    > (略)
    > を同じようにday-out2.11とnude1.2のCSSに追加してもカウンターのアンダーバーが消えませんでした。


    Nude1.2やday-out2.11ではリンク部分の記述を詳しくさせたので、その影響で以前のカスタマイズがきかなくなってしまったんだと思います。

    #sub .plugin-fc2counter a {
    text-decoration : none;
    }
    という感じだとどうでしょうか?

    もしコレでだめでしたら、
    .plugin-fc2counter a {
    text-decoration : none !important;
    }
    というのも試してみてくださいませ。

    ( 00:05 )

  34. 2yan | a/V0Tsuk

    #sub .plugin-fc2counter a {
    text-decoration : none;
    }

    で出来ました!

    自分はCSSとかサッパリなもので・・・スミマセンw
    いつも迅速で親切な対応ありがとうございます。

    ( 03:49 [Edit] )

  35. Qeen | -

    はじめまして。
    これからブログを始めるところなのですが、day-outのことで質問させてください。
    タイトル部分の透かし帯の透明度は変えられますでしょうか?
    もう少し下の写真が見えるようにしたいのです。
    「filter : Alpha(opacity=75);」辺りかと思って、いじりましたが変わりません。
    可能であればお教え願いますか。よろしくお願いします。

    ( 16:33 )

  36. rimse | 4HNZ8mMg

    Qeenさん、初めまして。コメントありがとうございます。

    > タイトル部分の透かし帯の透明度は変えられますでしょうか?
    > もう少し下の写真が見えるようにしたいのです。
    > 「filter : Alpha(opacity=75);」辺りかと思って、いじりましたが変わりません。

    「filter : Alpha(opacity=75);」の部分はInternetExplorer6以下用の設定になっていまして、それ以外のブラウザに対しては透過PNGを使うという方法をとっています。というのも、文字の色をはっきりさせたまま、背景を透過させるにはこのような方法しかないからなのですが、変更しようと思うと少し面倒になってしまっています。

    ちょっと長くなってしまいそうなので、新規記事にて透過率の変更方法をまとめてみました。
    http://rimse.blog73.fc2.com/blog-entry-334.html
    どうぞお試しくださいませ。

    ( 02:21 [Edit] )

  37. Qeen | -

    細かい設定まで可能にしていただき、どうもありがとうございました。
    工夫の幅が広がり、また更に没頭しそうです。
    お忙しい中、貴重な時間を割いていただきまして感謝しています。

    ( 11:44 )

  38. Qeen | -

    昨日はありがとうございました。
    あの後いろいろとやっていて、また困ったことが出てきました。
    ただ、これは質問するところが違うかもしれませんが、
    一応ご相談させてください。

    写真枠を付けた際、
    FC2のブログで「アカマイの設定」で広告を表示すると、
    その広告の左下に非常に小さい枠が表示されてしまいます。
    写真があるわけでもないのに、何故枠ができてしまうのでしょうか?
    些細なことですみませんが、よろしくお願いします。

    ( 15:15 )

  39. rimse | 4HNZ8mMg

    Qeenさん、コメントありがとうございます。

    > 写真枠を付けた際、
    > FC2のブログで「アカマイの設定」で広告を表示すると、
    > その広告の左下に非常に小さい枠が表示されてしまいます。
    > 写真があるわけでもないのに、何故枠ができてしまうのでしょうか?

    アカマイ側の設定で、何故かはよく分からないのですが1px*1pxの画像を表示するようにされているのが原因です。
    コレに関してはアカマイ側の設定のため、ユーザー側で変更することができません。
    一応、スタイルシートの設定で修正することは可能なのですが、共有テンプレートの規約としてアカマイ部分の改変が認められていないため、現段階では仕様ということでご理解いただければと思っております。

    なお、アカマイ広告は設定で非表示にすることもできますので、気になるようでしたらアカマイ広告ごと消してしまうことをオススメします。

    ( 01:40 [Edit] )

  40. Qeen | -

    やはりそうですか。
    先にFC2の方へ問い合わせるべきでした。
    非表示のこともお気遣いありがとうございます。
    基本的に広告は非表示にしたいのですが、
    写真が多くなりそうなので我慢しようかと考えています。
    何度もご親切かつご丁寧にお答えいただき、
    本当にありがとうございました。

    ( 09:30 )

  41. ma-rin | -

    はじめまして^^

    day-outをお借りしたいのですが、ひとつ質問させてください。
    トップ画像の下に、こちらのブログにあるようなインフォメーションのスペースを作りたいと思っています。
    そのためのタグ(?)を教えていただけないのでしょうか?

    調べてみたのですがわからず…
    お手数ですが宜しくお願い致します。

    ( 22:39 )

  42. rimse | 4HNZ8mMg

    Re: はじめまして^^

    ma-rinさん、初めまして。コメントありがとうございます。

    > トップ画像の下に、こちらのブログにあるようなインフォメーションのスペースを作りたいと思っています。
    > そのためのタグ(?)を教えていただけないのでしょうか?

    Day-outはプラグイン3の部分がタイトル下・記事上部に表示されるようになっています。
    ですので、テンプレートの編集は特に必要がありません。
    ブログ管理画面から、「プラグインの設定」のページでプラグインを編集していただければ結構です。
    このブログでは「最新の記事」のプラグインや、「フリーエリア」のプラグインなどをプラグイン3に入れて利用しています。


    そのほかの方法としては、記事を未来の日付に設定して投稿することで常に一番上にその記事が表示されるようになるので、簡易の「お知らせ」として利用することができます。

    ( 02:56 [Edit] )

  43. ma-rin | -

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

    編集は必要ないんですね!
    プラグインの編集というのは見落としていました。
    ありがとうございました!

    ( 01:00 )

  44. イブ | FvLIUmYM

    初めまして!
    こちらのテンプレートでお世話になっております。

    現在カスタマイズを行っているのですが、
    行き詰ってしまったためアドバイスを頂けたらと思います。

    サイドバーのタイトル部分にある、


    #sub h2 span{
    /* ■ プラグインタイトルの色設定 */
    background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/stereotype_sub_title_gray.gif");


    のURL部分を別のアイコン画像に変ようとしたのですが、
    アイコンは変わりますが背景が黒くなったままになってしまいます。
    また縦幅が狭く画像の上下が消えてしまいます。
    ここを調節する部分を教えていただけたらと思います。

    また記事やサイドバーを囲んでいる枠線の角を、
    丸い角する方法はありますでしょうか?
    調べると枠線を画像に変えることはできないようなので、
    せめて丸くしたいなと思っています。

    よろしくお願いします。

    ( 11:04 [Edit] )

  45. rimse | 4HNZ8mMg

    イブさん初めまして。コメントありがとうございます。


    > サイドバーのタイトル部分にある、
    >
    >
    > #sub h2 span{
    > /* ■ プラグインタイトルの色設定 */
    > background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/stereotype_sub_title_gray.gif");
    >
    >
    > のURL部分を別のアイコン画像に変ようとしたのですが、
    > アイコンは変わりますが背景が黒くなったままになってしまいます。
    > また縦幅が狭く画像の上下が消えてしまいます。
    > ここを調節する部分を教えていただけたらと思います。

    プラグインタイトルの背景色は、スタイルシート簡易カスタマイズ項目内の、

    /* 【背景色の設定】*/
    /* 全体の背景色 */

    で設定された色が適用されるようになっています。

    また、「/* ■ プラグインタイトルの色設定 */」は、あくまで簡易のカスタマイズとして用意してある部分ですので、ご自身で用意された画像を使う場合にはあまり適していません。
    プラグインタイトル部分の点線を削除してよければ、次のような方法で画像を表示させることが可能になります。

    スタイルシート最後尾の、スタイルシート追加用エリアに、次の記述を追加してください。
    #sub h2 , #sub h2 span {
    background: none;
    padding:0;
    }
    #sub h2 {
    background-image: url("使いたい画像のurl");
    background-repeat: no-repeat; /* 背景画像を繰り返すか */
    background-position: left center; /* 背景画像の位置 */
    padding-top : 10px; /* 上部分の余白 */
    padding-bottom : 10px; /* 下部分の余白 */
    padding-left : 10px; /* 左部分の余白 */
    }

    赤色部分は変更が必要な箇所です。使用する画像に合わせて、適宜設定してください。
    青色部分は変更しなくても何とかなりそうなところです。(変更するかは使う画像次第になります)


    > また記事やサイドバーを囲んでいる枠線の角を、
    > 丸い角する方法はありますでしょうか?
    > 調べると枠線を画像に変えることはできないようなので、
    > せめて丸くしたいなと思っています。

    これには、角丸を表現するjQueryプラグインを使用するのが無難です。
    http://www.curvycorners.net/
    なお、このjQueryプラグインは私が作ったものではありません。ご了承ください。

    HTMLを編集します。
    まず、

    <script type="text/javascript" src="http://blog-imgs-41-origin.fc2.com/r/i/m/rimse/jquery.js"></script>

    という部分を、次のように変更してください。

    <script type="text/javascript" src="http://blog-imgs-31.fc2.com/r/i/m/rimse/jquery-142.js"></script>
    <script type="text/javascript" src="http://blog-imgs-31.fc2.com/r/i/m/rimse/curvycorners.js"></script>


    次に、

    </head>

    の直前に

    <script>
    jQuery(function($){
    settings = {
    tl: { radius: 10 },
    tr: { radius: 10 },
    bl: { radius: 10 },
    br: { radius: 10 },
    autoPad: true,
    validTags: ["div"]
    }
    $('.entry , .comment , .trackback , .plugin3').corner(settings);
    });
    </script>


    を追加してください。

    「radius:10」というところで角丸の大きさを設定しています。適宜変更してください。

    ( 00:01 [Edit] )

  46. イブ | FvLIUmYM

    こんにちは。
    早速ありがとうございます。

    こちらを参考に無事にプラグインの背景を変更することができました。
    角丸も一度やってみましたが少し表示が遅くなるのですね。
    あとサイドバーには反映されなかったのですが、
    何かタグが必要なのでしょうか?

    カスタマイズが落ち着いたら角丸の調整もしてみますっ。
    ありがとうございます。

    ( 12:42 [Edit] )

  47. rimse | 4HNZ8mMg

    イブさん
    > 角丸も一度やってみましたが少し表示が遅くなるのですね。
    > あとサイドバーには反映されなかったのですが、
    > 何かタグが必要なのでしょうか?

    Day-outはサイドバーには「角」がないので省略しておいたのですが、必要だったのですね。
    先のカスタマイズの、

    $('.entry , .comment , .trackback , .plugin3').corner(settings);

    という部分を

    $('.entry , .comment , .trackback , .plugin3 , .menuitem').corner(settings);

    としたら多分大丈夫です(テストはしてないです)
    また、お気づきの通り、角丸の適用箇所が多くなると処理が重くなります。適度にお使いください。

    ( 19:32 [Edit] )

  48. emiママ | qj3joNSg

    こんにちは!
    今現在day-outを使用させていただいてます。
    質問なのですが、コメント欄のメールアドレス欄を消すことは可能でしょうか?

    可能な場合、他のrimseさんのテンプレでも同じように消すことができますか?
    (以前にrimseさんのいくつかのテンプレをダウンロードしています)

    お忙しいところ申し訳ありません。
    急ぎではありませんので、お手すきの時にお返事いただけたらと思います。

    ( 14:56 [Edit] )

  49. rimse | 4HNZ8mMg

    Re: タイトルなし

    emiママさん

    > こんにちは!
    > 今現在day-outを使用させていただいてます。
    > 質問なのですが、コメント欄のメールアドレス欄を消すことは可能でしょうか?
    Day-outのver2.11だと、テンプレート中の

    <dt><label for="mail"><%template_address> : </label></dt>
    <dd><input id="mail" type="text" name="comment[mail]" class="form-mail" value="<%cookie_mail>" /></dd>

    という部分を削除することでメールアドレス欄を消すことができます。
    ただし、その後の投稿確認画面ではメールアドレス欄が表示されてしまいます(FC2ブログ側のシステムのため)。

    > 可能な場合、他のrimseさんのテンプレでも同じように消すことができますか?
    > (以前にrimseさんのいくつかのテンプレをダウンロードしています)

    テンプレートの種類・バージョンによってHTMLに多少の違いがありますので、全てのテンプレートに適用できるとは限りません。

    ( 13:00 [Edit] )

  50. emiママ | qj3joNSg

    こんばんは。
    お返事いただいていたのに、お礼が遅くなり申し訳ありません。

    >>ただし、その後の投稿確認画面ではメールアドレス欄が表示されてしまいます(FC2ブログ側のシステムのため)。

    なるほどFC2側のシステムですか・・・。
    とりあえず、ブログ上のメルアド欄を消してみます。

    お忙しいところありがとうございました。
    別テンプレについてもお返事いただきありがとうございます。
    了解しました。

    これからも使わせていただきますね。

    ( 00:29 [Edit] )

  51. Mina | vK9fbjOE

    文字の大きさと記事展開について

    はじめまして、rimseさまのシンプルでスタイリッシュなデザインが好きで
    使わせて頂いております。
    カスタマイズを見てますがどうしても次の方法が見つけられないので教えて下さい。

    (1)右コラムの文字を左記事本文よりも小さくするには、どこを変えればいいのでしょうか。スタイルシート内の番号で教えていただけると助かります。

    (2)「続きを読む」を折り込み式ではなく、そのまま下に展開するように変更できるでしょうか。

    初歩的な質問で申し訳ありません。
    あまりPCに強くないので宜しくお願い致します。

    ( 23:38 [Edit] )

  52. rimse | 4HNZ8mMg

    Re: 文字の大きさと記事展開について

    Minaさん、コメントありがとうございます。

    > カスタマイズを見てますがどうしても次の方法が見つけられないので教えて下さい。
    >
    > (1)右コラムの文字を左記事本文よりも小さくするには、どこを変えればいいのでしょうか。スタイルシート内の番号で教えていただけると助かります。
    >
    > (2)「続きを読む」を折り込み式ではなく、そのまま下に展開するように変更できるでしょうか。

    これらは、http://rimse.blog73.fc2.com/blog-entry-390.html ←で公開しているDay-Out ver.2.2βで簡単にできるようになっています。
    まず(1)については、スタイルシート上部の簡易カスタマイズ内で変更可能です。
    (2)はver.2.2βでは標準設定です。お試し下さい。

    ( 21:16 [Edit] )

  53. 記事中の文字とコメント欄の番号について

    お忙しいところ恐縮ですが、day-outのテンプレート、とっても気に入って
    使用させて頂いております。

    質問なのですが、サイドバーでプラングインを追加した所・・・

    今まで記事中の文字太文字
    (FC2内の確認画面ではちゃんと太文字で反映されているのに)
    サイトから観ると反映されなくなってしまいました。
    文字の大きさはちゃんと反映されています。
    (コメント欄ではちゃんと反映されているのですが・・・)

    コメントを頂いた時の左側に表示されていた番号も表示されなくなってしまいました。
    プラングインでブログパーツを追加した時に何か弄ってしまったのか?
    原因が判らないのです(^_^;)

    お時間のある時に何が原因か教えて頂けると有難いのですが・・・。
    どうぞよろしくお願いいたします。

    ( 14:01 [Edit] )

  54. rimse | 4HNZ8mMg

    Re: 記事中の文字とコメント欄の番号について

    ☆とまみさ★さん、コメントありがとうございます。

    > 質問なのですが、サイドバーでプラングインを追加した所・・・
    > 今まで記事中の文字太文字
    > (FC2内の確認画面ではちゃんと太文字で反映されているのに)
    > サイトから観ると反映されなくなってしまいました。
    > 文字の大きさはちゃんと反映されています。
    > (コメント欄ではちゃんと反映されているのですが・・・)
    >
    > コメントを頂いた時の左側に表示されていた番号も表示されなくなってしまいました。
    > プラングインでブログパーツを追加した時に何か弄ってしまったのか?
    > 原因が判らないのです(^_^;)


    それまで表示に問題が無くプラグイン導入後に問題が生じたと言うことは、その追加したプラグインが原因の可能性が高いです。
    どのプラグインを導入したのか教えていただけますか?

    ( 20:50 [Edit] )

  55. |

    承認待ちコメント

    このコメントは管理者の承認待ちです

    ( 14:17 )

  56. rimse | 4HNZ8mMg

    Re: Re: 記事中の文字とコメント欄の番号について

    調べてみましたが、「過去記事の写真(*^ω^*)ノ彡」が原因のようですね。このプラグインのせいで、テンプレートのHTMLやCSSの設定を上書きされてしまっています。
    このプラグインですが、複眼RSSというサービスの貼り付けコードをそのまま貼り付けたものでしょうか?
    もしそうでしたら、もう一度貼り付けコードを作り直した方が良いです(このままだと修正箇所が多すぎて面倒です)。
    作り直す際、リンク先へのアクセスという設定のところを「アクセスを送らない(iframe版)」にしてください。

    ( 22:06 [Edit] )

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

    やはり、プラングインを追加追加した事が原因だったようです。
    昨晩、仰る通りに「アクセスを送らない(iframe版)」で貼り付けコードを
    貼り直したら・・・
    太字もコメント欄の番号もちゃんと反映されるようになりました♪

    お返事早く頂けて、とても助かりました。
    これからもテンプレート、大事に使わせて頂きます(^-^)
    お忙しいところ、本当にありがとうございました~!!

    ( 19:42 [Edit] )

  58. |

    管理人のみ閲覧できます

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

    ( 18:00 )

  59. rimse | 4HNZ8mMg

    コメントNo.58の方へ

    コメントありがとうございます。返信が遅れてしまって申し訳ありません。
    (質問コメントは非公開ではなく公開コメントで書いていただけると助かります)

    画像の右側に文章が表示されてしまうとのことですが、訪問者リストにブログのURLが載っていたので確認したところ、ご自身で回り込み設定をしているようですよ?
    「class="f-left photo"」という記述を画像に追加しているかと思いますが、「f-left」という部分は回り込み用のクラスです。写真風の枠を付けるだけなら追加するのは「class="photo"」だけです。
    (このページの「★ テンプレート独自クラスについて」の「2.写真風の枠」の部分をご参照下さい)

    ( 20:44 [Edit] )

  60. cuna | -

    ありがとうございます。

    無事に直せました^^

    きちんと読んだつもりでいたのに見落としていて、単純な間違いで
    お手間をかけてしまい誠に申し訳ありません。

    以前は一枚一枚フォトショップで写真風に仕上げていたので面倒でしたが
    ただの写真がタグで枠をつけるだけで写真風になるのが嬉しいです♪
    本当にありがとうございました!

    ( 11:07 )

  61. sayaka | -

    記事内の写真枠について

    記事内の写真に枠を付ける場合
    スタイルシート編集の方では2行消すように指示があり
    その通りにしたのですが、枠がうまく付けられません。
    四方のうち右だけが付かなかったり、右と上が付かなかったり。。。

    HTML編集の方で、どうしたらいいのか記載がありましたが
    こういうものに疎いもので、よくわかりません(>_<)

    簡単な解決方法があれば教えてください。

    ( 21:40 )

  62. rimse | NDu29Gck

    Re: 記事内の写真枠について

    sayaka様、コメントありがとうございます。返信が遅れてしまって申し訳ありません。

    > 記事内の写真に枠を付ける場合
    > スタイルシート編集の方では2行消すように指示があり
    > その通りにしたのですが、枠がうまく付けられません。
    > 四方のうち右だけが付かなかったり、右と上が付かなかったり。。。


    sayakaさんのブログをWindows/macの両環境、および各種ブラウザ(Internet Explorer/Firefox/Google Chrome)で確認しましたが、正常に枠がついているようでした。
    スタイルシートの記述内容も確認しましたが、そちらも問題無いようです。

    そこで、原因を考えてみたのですが・・・一つ、試していただきたいことがあります。

    現在お使いのブラウザは「Internet Explorer」でしょうか?
    Internet Explorerの機能の一つで「表示を拡大/縮小する」というものがあるのですが、この機能により拡大率が100%より小さくなっている場合、枠が消えてしまうことがあります。
    (Ctrlを押しながらホイールをスクロールすると表示の拡大率が変更されてしまうので、意図せず拡大率が変わっている場合があります)
    もしInternet Explorerをお使いでしたら、sayakaさんのブログを表示した状態で、Ctrlを押したまま0を押してみてください。拡大率が100%に設定されます。一度、お試し下さい。

    ( 13:08 [Edit] )

  63. sayaka | 3PAp.FeI

    ありがとうございます!

    こちらこそ返信が遅くなってごめんなさい。

    ご丁寧にブログの確認までして頂いてありがとうございました。
    枠がきちんと表示される時とされない時があるので不思議だなと思っていたら。。。
    そういうことだったのですね。

    PCやネットに詳しくないうえに
    ブログも見よう見まねと言いますか、試行錯誤で
    まったくのド素人がテンプレートをカスタマイズなんて無謀だとは思いつつ・・・
    やはりまったくわかっていませんでした。

    Internet Explorerを使っています。
    わりとよく表示を拡大・縮小したりしているのでそれが原因のようです。

    Ctrl+0で100%になることも初めて知りました。。。

    少しの間お休みしますとありましたが
    早々にお返事いただきありがとうございました。
    これからも使わせて頂きます!

    ( 21:41 [Edit] )

  64. |

    管理人のみ閲覧できます

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

    ( 10:33 )

  65. erika | mipqCpA2

    タイトル画像をランダムで変更させる(ver.2.11以下)

    はじめまして。テンプレートをお借りしてます。

    タイトルの画像をランダムにしたく、詳しく説明して頂いてある記事の方を見てやってみたのですがランダムになりませんでした。

    原因がわからなくコメントさせて頂きました。
    宜しくお願い致します。

    ここにいれましたが合っていますでしょうか?

    </script>

     <script type="text/javascript">
    var imglist = new Array(
    "http://blog-imgs-85.fc2.com/m/i/s/mistresserika/erikablogh113.jpg",
    "http://blog-imgs-85.fc2.com/m/i/s/mistresserika/erikablogh14.jpg" );
    var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
    var output = '<style>.header-container { background-image : url("' + imglist[selectnum] + '"); }<\/style>';
    document.write(output);
    </script></head>

    <body class="fixed-off shift-off">
    <!-- FC2のアクセス解析はこの下に追加してください -->

    ( 07:54 [Edit] )

  66. |

    管理人のみ閲覧できます

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

    ( 07:59 )

  67. rimse | 4HNZ8mMg

    Re: タイトル画像をランダムで変更させる(ver.2.11以下)

    erikaさん、はじめまして。コメントありがとうございます。

    > タイトルの画像をランダムにしたく、詳しく説明して頂いてある記事の方を見てやってみたのですがランダムになりませんでした。

    ごめんなさい、記事の方にあるやり方は少し昔のもの(ver.2.11より前のもの)で、erikaさんが今お使いのテンプレート(ver.2.2)に対しては少し編集を加えないと使えない状態になっています。


    </script>

     <script type="text/javascript">
    var imglist = new Array(
    "http://blog-imgs-85.fc2.com/m/i/s/mistresserika/erikablogh113.jpg",
    "http://blog-imgs-85.fc2.com/m/i/s/mistresserika/erikablogh14.jpg" );
    var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
    var output = '<style>.header-container { background-image : url("' + imglist[selectnum] + '"); }</style>';
    document.write(output);
    </script></head>

    <body class="fixed-off shift-off">
    <!-- FC2のアクセス解析はこの下に追加してください -->


    大体はこのままでいいのですが、赤文字部分を「.header-container」から「#HeaderInner」と変えてください。
    ということで、↓のようにしていただければOKのはずです。お試しください。


    </script>

     <script type="text/javascript">
    var imglist = new Array(
    "http://blog-imgs-85.fc2.com/m/i/s/mistresserika/erikablogh113.jpg",
    "http://blog-imgs-85.fc2.com/m/i/s/mistresserika/erikablogh14.jpg" );
    var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
    var output = '<style>#HeaderInner { background-image : url("' + imglist[selectnum] + '"); }</style>';
    document.write(output);
    </script></head>

    <body class="fixed-off shift-off">
    <!-- FC2のアクセス解析はこの下に追加してください -->

    ( 13:13 [Edit] )

  68. erika | mipqCpA2

    すぐにご返答頂いていたのにお返事が遅くなってしまい申し訳ありません。

    先ほど、教えて頂いたようにやってみたところ
    うまくランダムになりました!!

    本当にありがとうございます。

    ご丁寧な対応に感謝いたします。
    これからもテンプレートお借りさせて頂きます。

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

    ( 08:14 [Edit] )

  69. まちこ | -

    はじめまして

    day-outを利用させていただいております。
    ペンギンの画像の差し替えをしたく奮闘しているのですがなかなかできません。
    最新のバージョンに設定しましたが部分がわからず・・・
    初心者で申し訳ありませんが詳しくお伝えいただけると幸いです

    ( 21:30 )

  70. rimse | 4HNZ8mMg

    Re: はじめまして

    まちこさん、コメントありがとうございます。

    > ペンギンの画像の差し替えをしたく奮闘しているのですがなかなかできません。
    > 最新のバージョンに設定しましたが部分がわからず・・・
    > 初心者で申し訳ありませんが詳しくお伝えいただけると幸いです


    スタイルシート上部の「簡易カスタマイズ」内に「タイトル部分の変更」という部分がありますが、そこはご確認されましたでしょうか。

    必要な編集部分等のガイダンスは行っているつもりですので、それ以上の解説につきましては「どのように編集したのか」を教えていただけないと出来かねます。詳細な状況報告をお願い致します。

    ( 22:44 [Edit] )

  71. puru | -

    はじめまして。

    day-outのテンプレートを愛用させて頂いています。
    素敵なテンプレートをありがとうございます

    記事数が多くなってきて過去記事が読みにくくなってきたため
    こちらのブログテンプレートのように各記事を『続きを読む』で
    開けるようにしたいと思っているのですがday-outで行なうことは可能でしょうか?
    もし出来るようならやり方を教えて頂けませんでしょうか?

    あと、エキサイトブログなどでよくあるように
    カテゴリー別などで記事を遡る時にタイトル一覧で見れるようにはできますか?

    よろしくお願い致します。

    ( 16:44 )

  72. rimse | 4HNZ8mMg

    puruさん、初めまして。コメントありがとうございます。

    > 記事数が多くなってきて過去記事が読みにくくなってきたため
    > こちらのブログテンプレートのように各記事を『続きを読む』で
    > 開けるようにしたいと思っているのですがday-outで行なうことは可能でしょうか?

    追記の開閉については、day-outのバージョン2.0以降で使用可能です。
    「続きを読む」で開く部分は、「追記」として書かれた部分になります。
    新投稿画面ですと、「追記を書く」というボタンがありますので、それを使って記事を再編集してください。
    旧投稿画面ですと、「追記の編集」というテキストエリアが追記として扱われます。



    > あと、エキサイトブログなどでよくあるように
    > カテゴリー別などで記事を遡る時にタイトル一覧で見れるようにはできますか?
    できません。

    ※カテゴリー別ではありませんが、全ての記事のタイトル一覧であれば可能です。
    ブログのアドレスに?allを付ければ一覧ページが表示されます。
    例→http://rimse.blog73.fc2.com/?all

    ( 11:33 [Edit] )

  73. puru | -

    rimse様

    丁寧にお答え頂きありがとうございます。

    続きを読むは追記で再編集するのですね。
    記事が多くなりすぎてしまったのですぐには出来ませんが
    少しずつ編集をしていこうと思います。
    本当にありがとうございました

    rimseさんのテンプレートはシンプルで見やすくてお気に入りです。
    これからも愛用させて頂きます

    ( 23:59 )

コメントの投稿

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

質問の際のお願い

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

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

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


トラックバック

Trackback URL
Trackbacks


Recent Entries