上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページには、Nude ver.1.2以下にのみ適用できる情報が載っています。
新しいNudeについては、こちらの記事を参照してください。



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

★ 基本情報

テンプレート名 : nude
最新バージョン : 1.2

更新履歴 - Update history

09/10/08 : 1.1→1.2
[Modify] 「前後の記事へのリンク部分」のスタイル変更
[Modify] 左右カラムの入れかえ実装
[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応
[Modify] 簡易カスタマイズ一部改良
[Modify] pre、hrなどのデフォルトスタイル変更
09/08/08 : 1.0→1.1
詳細、及び手作業での更新については別記事にて。
[Modify] 全記事一覧表示に対応
[Modify] 記事がない場合の表示改善
[Modify] プラグイン3の出力方法を変更
[Modify] フッタ部の表示方法変更
[Modify] 簡易カスタマイズ一部改良
09/07/15 : 1.0
共有テンプレート登録

空間を意識した、記事の映えるシンプルテンプレート。
幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
左右カラム位置変更はver.1.2から使用可能になりました。

プラグイン3はトップページの記事上部に表示。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQuery1.3.2をテンプレート内で使用しています。

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

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

更新機能・見本 更新があると、ブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。

★ カスタマイズ情報

★ 簡易カスタマイズ項目

以下の項目は簡易カスタマイズとしてまとめられています。 詳しくはスタイルシート上部を参照してください。

  • フォントの設定(ver.1.2以上)
    • 基本となるフォント
    • ブログタイトルのフォント
  • フォントサイズの変更
    • 全体の文字サイズ(ver.1.2以上)
    • タイトルエリアの文字サイズ(ver.1.2で廃止)
    • タイトルの文字サイズ(ver.1.2以上)
    • ブログ紹介文の文字サイズ(ver.1.2以上)
    • メインカラムの文字サイズ
    • 記事の本文の文字サイズ
    • サブカラムの文字サイズ
  • カラム幅の変更
  • 文字色の変更
    • 基本となる文字色(ver.1.2で廃止)
    • タイトル部分の文字色(ver.1.2で廃止)
    • ブログタイトルの文字色(ver.1.2以上)
    • ブログ紹介文の文字色(ver.1.2以上)
    • サブカラムの文字色
    • プラグインタイトルの文字色(ver.1.2以上)
  • 背景色の変更
    • 全体の変更
    • タイトル部
  • 記事中の画像に枠をつける
  • 幅可変/固定の切り替え
  • カラム配置設定

★ テンプレート独自クラスについて

記事中での使用を想定したいくつかのクラスが用意してあります。

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
"nude" / rimse
Creative Commons License
関連記事


コメント

  1. Rei | -

    左上の四角形

    始めまして、お世話になっております。
    左上の四角形、題名の入ってる
    あそこに画像を埋め込むみたいな事はできないのでしょうか?
    無知なのですが、思った事をパッと書いてみたんですけど
    どうなのでしょうかね・・・?

    ( 23:15 )

  2. rimse | -

    Re: 左上の四角形

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

    > 左上の四角形、題名の入ってる
    > あそこに画像を埋め込むみたいな事はできないのでしょうか?
    背景に画像を設定したり、直接画像をHTMLに追加するなどのほうほうがあります。

    設定する方法を紹介します。
    スタイルシートに以下の記述を追加してください。
    .header-container {
    background-image : url("画像のアドレス");
    background-repeat : no-repeat;
    background-position : 0 0;
    }
    この中の「画像のアドレス」の部分を使いたい画像のアドレスに置き換えてください。
    なお、画像はファイルアップロードを使ってアップロードする必要があります。
    また、こちらの注意点もご覧ください。
    http://rimse.blog73.fc2.com/blog-entry-102.html

    background-repeatは画像の繰り返し、background-positionは画像を表示させる位置に関する設定になります。ここら辺はスタイルシートについて検索して調べてみてください。

    ( 21:05 )

  3. 実里 | /y0BsgpA

    スクロールバー

    はじめまして、こちらのブログテンプレート「nude」を使わせて頂いている者です。

    不勉強でお恥ずかしいのですが、スクロールバーを変更する際には、どこにどのようにタグを挿入すればいいのかわからないので質問させてください。
    お忙しいところとは存じますが、よろしくお願いします。

    ( 12:41 [Edit] )

  4. Rei | -

    返信ありがとうございます

    詳しい説明ありがとうございます^^
    頑張って調べてやってみます。

    ( 22:21 )

  5. rimse | -

    Re: スクロールバー

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

    > スクロールバーを変更する際には、どこにどのようにタグを挿入すればいいのかわからないので質問させてください。

    簡単なジェネレーターを探してみました。
    http://www.css-toollabo.com/scrollbar.html
    こちらで生成したCSSを、スタイルシートの最後に追加してください。

    次に、追加した部分の一行目、
    「 body{ 」という部分を、次のように書き換えてください。

    html , body ,
    div.entry-body-container ,
    div.plugin3-body-container ,
    div.comment-body p ,
    .menuitem {

    多分これで大丈夫なはずです。(テストはしてません)
    なお、この記述はInternetExplorerにのみ適用されます。FirefoxやOperaなどのブラウザでは変化はありません。ご了承ください。

    ( 23:50 )

  6. sujiebi | Mc.KE39I

    はじめましてrimse さま
    NUDEにブログのテンプレを使わせてもらってます。シンプルビューティで素敵です。
    質問なんですが「続きを読む」を「more??」等に文を変えたいのですがどこを変えたらいいですか??

    ( 12:54 [Edit] )

  7. sujiebi | Mc.KE39I

    またまたスイマセン。
    写真に枠をつけたいのですがHTMLのimgタグはどの辺にあるのでしょうか??
    見つけられなくて・・・よろしくお願いします。

    ( 15:01 [Edit] )

  8. rimse | 4HNZ8mMg

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

    > 「続きを読む」を「more??」等に文を変えたいのですがどこを変えたらいいですか??
    この部分は多言語用変数を使っています。
    テンプレートのHTML中にある「<%template_extend>」を変更してくださいませ。


    > 写真に枠をつけたいのですがHTMLのimgタグはどの辺にあるのでしょうか??
    この記事中にあるような「写真風の枠」をつけるのでしたら、テンプレート側ではなく、記事を書く際に挿入されるimgタグを編集してください。
    また、記事中の画像すべてに枠をつける場合は、スタイルシート上部にある簡易カスタマイズ内に【記事中の画像の枠】という項目がありますので、そちらをご覧くださいませ。

    ( 15:26 [Edit] )

  9. rimse | 4HNZ8mMg

    コメント9番の方へ

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

    どういった環境で比較しているのかわからないため正確なことはわかりませんが、見る環境によって文字サイズに差が出るか、といわれれば答えはYESです。
    たとえば、ブラウザの種類によってフォントサイズの変化する境界が違っているので、指定したパーセンテージによっては表示される大きさに差が生じます。
    どの環境でも同じ大きさでなければいけないのであれば、ピクセル単位でフォントサイズを指定するという方法もありますが、アクセシビリティの観点からあまり推奨いたしません。

    ( 10:42 [Edit] )

  10. |

    管理人のみ閲覧できます

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

    ( 20:34 )

  11. rimse | 4HNZ8mMg

    コメント11番の方へ

    コメントありがとうございます。
    そしてお久しぶりですe-68

    > 画像差し替えとしてライセンスを消してしまってよいのでしょうか。
    そうですね。画像を使うとなるとその画像のライセンスが関係してきますので、CCライセンスの表示は削除された方がよいかと思います。また逆に、使用した画像のライセンスに関する表示を追加する必要があります。


    「カスタマイズしやすいテンプレート」を目指していますので、カスタマイズして自分仕様にしていただくのは私としては喜ばしいことだと思っています。
    自分のセンスを押し付けるつもりもございませんので、どうぞ自由にお使いくださいませe-68

    ( 22:54 [Edit] )

  12. |

    管理人のみ閲覧できます

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

    ( 23:02 )

  13. 実里 | /y0BsgpA

    解決しました

    3番目にコメントさせて頂きました、実里です。

    お忙しいところ、詳細なご説明をありがとうございました。
    おかげさまでスクロールバーを変更することができました!
    本当にありがとうございました。

    ( 18:51 [Edit] )

  14. kng | NRIGiuvw

    タイトル文字の位置移動

    始めまして。
    シンプルさに惚れてこちらのテンプレートを使わせていただいています。

    左上の四角形に入ってるタイトルと説明文を四角形の下部分ではなくて中央もしくは上の方へ移動させるにはどうすれば良いでしょうか?

    ( 16:12 [Edit] )

  15. rimse | 4HNZ8mMg

    Re: タイトル文字の位置移動

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

    > 左上の四角形に入ってるタイトルと説明文を四角形の下部分ではなくて中央もしくは上の方へ移動させるにはどうすれば良いでしょうか?
    スタイルシートの編集を行います。
    まず、以下の部分を探してください(ナンバリングを参考にどうぞ)

    /*[3.2]*/
    .header-container {
    border : 1px solid #333;
    padding : 9em 0.5em 0.5em;
    }

    編集するのは、赤字の部分です。
    タイトル・紹介文を上にするには赤字部分を「0.5em 0.5em 9em」、真ん中にするには「4.7em 0.5em」としてください。

    ※もうちょっと詳しく
    この部分は、タイトル部分の「余白」についての設定にあたります。
    初期状態では、上部分に9em(9行分)のスペースを設けるように設定されています。
    タイトル・紹介文を移動させるには余白の位置を変えればよいので、タイトルを上にする場合には下側に余白を、真ん中にするには上下に余白をいれるように編集しています。

    ( 20:32 [Edit] )

  16. kng | NRIGiuvw

    Re: タイトル文字の位置移動

    rimseさん

    ご指導ありがとうございます。
    早速編集してみたいと思います。

    ( 21:08 [Edit] )

  17. さな | mQop/nM.

    最新記事のタイトルの表示

    はじめまして、スタイリッシュな印象が気に入って
    こちらのテンプレート使わせていただいております*

    こちらのエントリータイトルの表示でわからないところがあります。。最新記事でのみ一文字目が大きく表示されないのですが、これはブラウザなどの環境によるものでしょうか?
    当方はMacOSX+Firefox2.0を使用しております。
    (OSが古いのでFirefox3を利用できず、そちらではどうなるのかわからずすみません!Safari1.0などではプラグイン非対応だったので…)
    もし何かお分かりでしたらご回答頂ければ幸いです。

    ( 17:29 [Edit] )

  18. rimse | 4HNZ8mMg

    Re: 最新記事のタイトルの表示

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

    > 最新記事でのみ一文字目が大きく表示されないのですが、これはブラウザなどの環境によるものでしょうか?
    > 当方はMacOSX+Firefox2.0を使用しております。

    そういった報告をされたことはまだ無かったですね。Firefox2.0であれば、問題無く表示できるはずですし、不具合が生じるのが最新記事のみ、となりますとHTML側の問題のような気がします。
    実際にソースコードを確認しないと判断ができませんので、さなさんのブログのアドレスを教えてくださいませ。
    非公開コメントなどでも結構です。よろしくお願いします。

    ( 20:57 [Edit] )

  19. さな | mQop/nM.

    Re: 最新記事のタイトルの表示

    お帰りになってすぐのお返事ありがとうございます*

    それが、ソースは全体的にまだ全然触っていないのです。
    問題の箇所もDLした時のままで↓

    h2.entry-title:first-letter {
    font-size : 2em;
    line-height : 1;
    }

    FC2のテンプレート検索画面でプレビューを押した時や、こちらのブログを拝見した時も、同じように最新の記事のみ二文字目以降と同じサイズで表示されるのです。
    このページでしたら本来「nude」の「n」が大きく表示されるのですよね…?一応スクリーンショットを撮ってみましたが、他の環境で確認できないので、これでいいものでしたらすみません!(ただ、自分のブログでも記事が最新でなくなると一文字目が大きくなります)
    http://y.upup.be/?7D7JqRY9Iq
    Firefox2.0で普通に表示できるのでしたら、OSの方に問題があるのでしょうか。Mac OS10.2で結構古いOSですので…i-229参考になりましたら…

    ( 02:39 [Edit] )

  20. さな | mQop/nM.

    Re: 最新記事のタイトルの表示

    何度も失礼いたします;

    先ほど、二個目以降記事のタイトルにマウスが触れると、その部分も一文字目が小さくなってしまうことに気が付きました。なのでソースをあれこれ触ってみていたところ、

    h2.entry-title a:first-letter {
    font-size : 2em;
    line-height : 1;
    }

    と入れてみたら、全ての問題が解消いたしました!
    ただ、私はCSSに詳しくなく、上記もソースの記述から当たりを付けて書いてみただけなので、この書き方で正しいのか、最新記事のみ最初から文字が小さかった原因もわかりません…素人の発見で申し訳ないですが、何かの参考になればと、ご連絡させていただきました。

    もし正しい書き方がお分かりでしたら、お教えいただけましたら嬉しいです*

    ( 04:54 [Edit] )

  21. rimse | 4HNZ8mMg

    Re: Re: 最新記事のタイトルの表示

    > h2.entry-title a:first-letter {
    > font-size : 2em;
    > line-height : 1;
    > }
    >
    > と入れてみたら、全ての問題が解消いたしました!

    たしかfirst-letter擬似要素を適用できたのはブロックレベル要素なので、aに対して指定しても無効になるような気がしたのですが・・・うまくいったとなるとちょっとよくわからないですねe-330
    可能であればほかのブラウザ環境での表示も確認したほうがよいかと思います。

    なお、マウスオーバーしたさいに文字が小さくなるという現象も、最新記事のみ文字が大きくないという現象も、もしかするとfirefoxのバグ(擬似要素・擬似クラスのマッチングの衝突)かもしれません。
    http://pentan.info/stylesheet/bug/mozilla045.html
    このバグがいつごろまで残っていたか、ちょっとわからないのですが、参考まで。

    ( 14:27 [Edit] )

  22. rimse | 4HNZ8mMg

    Re: Re: 最新記事のタイトルの表示

    追加です。

    WindowsXP、Firefox3.5において上記の変更を行っても、一文字目は大きくなりませんでした。

    ( 14:35 [Edit] )

  23. さな | mQop/nM.

    Re: Re: 最新記事のタイトルの表示

    aでは無効のはずなのですね…どういう現象なのでしょうね、不思議ですね…!
    マウスオーバーの件は、ご提示頂いたリンク先の現象がまさにそれだと思います。ではきっとFirefoxのバグなのですね(リンク先のサンプルでもやっぱり最初から一文字目も小さく表示されてしまいますが…)お調べ下さってありがとうございます。
    この微妙に古いOSとFirefoxのバージョンの組み合わせが穴にはまった、とかそういうのでしょうか。とりあえず気にせず使わせていただこうかと思います*

    ちなみに他ブラウザでのチェックなのですが、当方ではSafari1.0、iCab3.0、IE5.2のプラグインが非対応?で簡単な表示になってしまうものしか持っておらず、確認できませんでした…(Operaなど他のブラウザもあったのですが消してしまっていて、最新のバージョンはOSが古くてインストールができませんでした)お役に立てず申し訳ありません。。

    ( 03:10 [Edit] )

  24. タツキ | eqP7eH0Y

    記事の回りこみについてご質問

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

    今までの記事で、画像に記事が回りこむようstyle指定し、
    普通に表示されていたのですが
    Nudeに替えましたところ何箇所か崩れてしまいました。(8/22,8/24のあたり)
    他のテンプレートではきちんと表示されるので
    (こちらのDay-out Blancでは崩れませんでした)
    独自の回り込み指定のせいかなと思い、
    CSSの■■ etc. ■■部分の中身をすべて削除してみましたが
    変化ないようです。

    (style指定は同じものをコピペで使用しており
    大丈夫なのもあるのが不思議です…)

    他になにか対応方法はありますでしょうか。
    お手数ですがよろしくお願いいたします。

    ( 12:44 [Edit] )

  25. rimse | 4HNZ8mMg

    Re: 記事の回りこみについてご質問

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

    > 今までの記事で、画像に記事が回りこむようstyle指定し、
    > 普通に表示されていたのですが
    > Nudeに替えましたところ何箇所か崩れてしまいました。(8/22,8/24のあたり)

    8/22と8/24日の記事に関しては、HTMLの記述ミス(というよりも、正しくない書き方)が原因です。
    ソースコードを見る限り、アマゾンの商品に関する記述:<iframe (属性略) >という部分に「style="margin-left : 6px;margin-right : 6px;float : left;"」を追加し、回り込みさせようという意図が感じ取れました。
    通常の画像などはこれで問題ありませんが、このiframeの属性をよく見ると「style="width:120px;height:240px;"」というようにstyle属性がすでに指定されています。同じ属性を繰り返し設定することはHTMLとして正しくないため、HTMLを厳格に処理するブラウザでは回り込みさせるための記述が無視されます。

    ということで、このiframeに関しては、元からある「style="width:120px;height:240px;"」という部分に、「margin-left : 6px;margin-right : 6px;float : left;」を追加させる(style="width:120px;height:240px;margin-left : 6px;margin-right : 6px;float : left;"という形にする)必要があります。
    または、Nudeに関してはテンプレート独自クラスとして回り込みに関するものを用意していますので、それを使うのが簡単だと思います。が、タツキさんの場合、独自クラスに関しての記述を削除してしまっている(etcの部分に独自クラスを記述していたため)ので、該当部分を復元させる必要があります。

    ※ただ、これだと他のテンプレートでうまくいったことが説明つかないので、もしかしたら他に要因があるかもしれません。とりあえず、この修正を施してしばらく様子を見てみてください。



    それともう一つ問題が見つかりました。こっちはかなり重大な問題です。
    スタイルシートの/*[15.2.1]*/の部分で、
    「font-family: "Helvetica",suns-serif","Trebuchet MS","Tahoma","Verdana";」
    となっているのですが、この部分で記述ミスがあるためIE6やIE7ではこの記述以降のスタイルが無視されてしまっており、デザインが崩れています。
    このfont-familyについての記述を、
    「font-family: "Helvetica","Trebuchet MS","Tahoma","Verdana",suns-serif;」
    と修正してください。

    ( 14:20 [Edit] )

  26. タツキ | eqP7eH0Y

    ありがとうございます

    お忙しいところお早いお返事ありがとうございます。

    ご指摘のとおり、
    styleの指定をしなおしたところ正しく表示されるようになりました
    崩れなかったところは正しくスタイル指定できていたようで、
    きちんと確認できずお手数をおかけしてしまって申し訳ないです;;


    また、font指定のところご指摘ありがとうございます。
    自分のIE(8でした…)では確認したのですが不十分でした。

    ちょっとしたミスでいろいろ問題が発生してしまいますね。
    今後はもっと細かく気をつけたいと思います。
    ありがとうございました。

    ( 19:01 [Edit] )

  27. みつき | qx6UTKxA

    はじめまして。早速ですが質問です。
    写真(画像)にfc2ブログでは「ファイル名」をつけていると思うのですが、
    このファイル名、ブログ上の画像にカーソルを合わせると表示させるようにするには
    どうしたらいいのでしょうか?
    以前まで使っていたテンプレートではファイル名が表示されていて
    これを隠れメッセージのように使っていたので
    nudeでもファイル名が表示されたらいいのにな・・・。と思っています。
    教えてください。よろしくお願いします。

    ( 13:11 [Edit] )

  28. rimse | 4HNZ8mMg

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

    > 写真(画像)にfc2ブログでは「ファイル名」をつけていると思うのですが、
    > このファイル名、ブログ上の画像にカーソルを合わせると表示させるようにするには
    > どうしたらいいのでしょうか?

    ファイル名=urlなので、もしかすると「ファイル名」ではなく画像に設定されている「タイトル」のことかなと思ったのですが、いかがでしょうか?

    以前使っていたテンプレートがどういった形で表示していたのかわからないため、表示のされ方は違うかもしれませんが、一つやり方を考えてみました。
    このやり方では、ツールチップにて「画像のタイトル」を表示させます。

    HTMLの編集を行います。

    </head>

    という部分の直前に、以下の記述を挿入してください。

    <script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict();
    jQuery(document).ready(function($){
    $("img").attr("title", function(){
    return $(this).attr("alt");
    });
    });
    //]]>
    </script>

    ( 00:18 [Edit] )

  29. みつき | qx6UTKxA

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

    できました♪画像のタイトルが表示されました♪
    (そうなんです、画像の「タイトル」です。変な書き方してスイマセン!)
    どうもありがとうございました♪
    とっても素敵なテンプレート、画像のタイトルも表示できたし♪
    ずっと使っていきたいと思います♪

    ( 07:05 [Edit] )

  30. マリー | 1JkepbtE

    画像の枠についてです

    はじめまして。素敵なテンプレートをどうもありがとうございます。
    早速ですが、質問です。
    nudeを使用しているのですが、こちらのブログの画像に枠をつけるという記事のCSSのタグを挿入しても何故か枠がつきません。簡易カスタマイズの枠の部分もやってみたのですが、やはりつきません。
    ブログ全体の画像に、この記事にあるシンプルな枠をつけたいのですが、どうすればよろしいのでしょうか?
    お手数おかけしますが、宜しくお願いします。

    ( 10:57 [Edit] )

  31. rimse | 4HNZ8mMg

    Re: 画像の枠についてです

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

    > nudeを使用しているのですが、こちらのブログの画像に枠をつけるという記事のCSSのタグを挿入しても何故か枠がつきません。簡易カスタマイズの枠の部分もやってみたのですが、やはりつきません。
    ブログ全体の画像に、この記事にあるシンプルな枠をつけたいのですが、どうすればよろしいのでしょうか?

    マリーさんのブログのソースを確認しましたところ、imgboxというクラス名を見つけることが出来なかったのですが・・・現在はクラスに関する記述を削除されていらっしゃいますか?

    また、簡易カスタマイズの枠の部分では、

    /* 【記事中の画像の枠】
    記事中の画像に対し枠をつける場合は、
    ↓の※B1と※B2の行を削除してください(絵文字には枠はつきません)
    枠の色、太さなどについては、borderプロパティを編集してください。*/
    /*
    .entry img{
    border : 1px solid #000;
    margin : 1px;
    }
    img.emoji {
    border : none;
    margin : 0;
    }
    */

    赤字の部分が残ってしまっているため、枠を表示させる記述がコメントとして除外されたままのようです。赤字部分を削除していただければ、記事中の画像に枠がつけられるはずです。

    なお、こちらで用意しているカスタマイズ、及び独自クラスでは、枠をつける画像は記事中に限定しております。というのも、枠をつける対象をページ全体に拡張すると、余計な画像に枠がついてしまう必要があるためです。
    もしページ全体に拡張したいという場合は、また別の編集(主にプラグインのHTML側)が必要になります。
    とりあえず、今回は記事中の画像についての編集をおこなっていただき、もしページ全体の画像に枠をつける必要がございましたらまたコメントいただけませんでしょうか

    ( 13:29 [Edit] )

  32. マリー | 1JkepbtE

    ありがとうございます

    回答で全て解決致しました!
    赤字部分まで消すのだったのですね…!必要なタグかと思い、残してしまいました。もっと勉強致します。
    お忙しい中、素早い対応非常に感謝しております。
    とても素敵なテンプレなので、末永くお付き合いしていきたいと思います。
    この度は本当にありがとうございました。

    ( 18:34 [Edit] )

  33. 岡野 | zKJFyX4g

    はじめまして。素敵なテンプレートなのでお借りしました。

    早速質問なのですが、
    左上のタイトル部分に画像をはめ込むことはできたのですが、画像の下にブログ名が出てしまいます。
    ブログ名を消したいのですが、どうしたらいいですか?


    ( 16:36 [Edit] )

  34. rimse | 4HNZ8mMg

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

    > 左上のタイトル部分に画像をはめ込むことはできたのですが、画像の下にブログ名が出てしまいます。
    > ブログ名を消したいのですが、どうしたらいいですか?

    ブログ名を消すだけであれば、スタイルシートの最後に以下の記述を追加するだけで大丈夫です。
    #title h1 a , #introduction p { display : none; }

    途中でコメントを編集されたようですが、もしコメント編集前のように、ブログ名を消してブログタイトル部分全体にトップページへのリンクを張りたいのでしたら、上の編集ではなく次の編集を行ってください。

    まず、HTMLの編集をします。
    <a href="<%url>" title="「<%blog_name>」のトップページへ"><%blog_name></a>
    この部分を次のように変更してください。
    <a href="<%url>" title="「<%blog_name>」のトップページへ"><span><%blog_name></span></a>
    赤字部分が追加されています。

    次にスタイルシートの編集をします。
    /*[3.2]*/
    .header-container {
    border : 1px solid #333;
    padding : 9em 0.5em 0.5em;
    }
    青字部分を削除します。

    /*[3.5]*/
    #title h1 a {
    text-decoration : none !important;
    }
    を、次のように変更してください。
    /*[3.5]*/
    #title h1 a {
    display : block;
    height : 1%;
    padding : 8.3em 0.4em 0.4em;

    text-decoration : none !important;
    }
    #title h1 a span ,
    #introduction p {
    display : none;
    }

    赤字部分が追加されています。

    ( 19:44 [Edit] )

  35. 岡野 | zKJFyX4g

    返信ありがとうございます!
    さっそくやってみたところ上手くいきました。
    編集前の質問にも答えていただき助かりました。
    ありがとうございました。

    ( 20:35 [Edit] )

  36. アラタ | MF8IyTP2

    追記の開閉について

    はじめまして。こちらのデザインが可愛くて使用させていただこうと思っています。
    小説ブログにしようと思っているので、追記の開閉ボタンがとても使いやすいです。
    そこで一つ、提案なのですが…。
    追記にて長い文章を張った場合、閉じる時に本記事まで戻らなくてはいけません。
    追記を開いた時、追記文章の一番下に「追記を閉じる」ような指示を出すボタンか何か設置することは可能でしょうか?

    もしすでにそのようなカスタマイズ方法があるのであれば、こちらの見落としです…すいません。

    お忙しい中、大変申し訳ありませんがご返答よろしくお願いします。

    ( 16:11 [Edit] )

  37. rimse | -

    Re: 追記の開閉について

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

    > 追記にて長い文章を張った場合、閉じる時に本記事まで戻らなくてはいけません。
    > 追記を開いた時、追記文章の一番下に「追記を閉じる」ような指示を出すボタンか何か設置することは可能でしょうか?


    実は、追記開閉を導入する際に、追記を開いた後の「閉じる」をどこに配置するかでものすごく悩んだのです。ちょっとそのときの考えを書かせてください。

    ---ここから自己満足---

    私としては「追記を読み終わったあと、追記を閉じる」という必要性がそれほどないように考えています。
    というのも、追記を読み終わった後にユーザーがどういうアクションをするかを考えると、
    1.次の記事を続けて読む
    2.コメントやトラックバックなどのフィードバックを行う
    3.別のページへ移動する
    というのが主なものだと思うんです。追記を開くのは、追記を読みたいという欲求、追記を読むためという必要性があるからですが、ではその追記を読み終わった後に追記を閉じる必要はあるのか?という疑問がそのとき少しありました。
    またブラウザの動作の観点でいくと、他の追記開閉を導入しているページでも経験があるかもしれませんが、追記を閉じると勝手にページが上へ動いていき、結局は全然関係ないところが表示されてしまう、という問題があります。このことに関しては、「追記を閉じる」ことと同時にブラウザの表示領域を移動させるという処理をすれば良いのですが、ではどの程度移動させるのがユーザーの感覚と一致するか?というのもとても難しい問題でした。
    そんなこんなで、今のような形での実装に(私の中で)落ち着いたわけです。

    ---ここまで自己満足---

    ということで本題です。
    「追記を閉じる」を追記の最後につけること自体は簡単なのですが、先に書いたようなブラウザの動作の問題があるので、その点を解決できるような方法をちょっと考えてみたいと思います。一応何となくはイメージできているのですが、ちょっとだけ時間をいただきたく思います。

    ( 00:29 )

  38. rimse | -

    Re: 追記の開閉について・その2

    意外とあっさりできちゃいました。
    新規記事にてカスタマイズ方法を解説しております。
    http://rimse.blog73.fc2.com/blog-entry-326.html

    トップページから見た場合は、実際に[追記を閉じる]が表示されるようになっています。どうぞお試しくださいませー

    ( 02:15 )

  39. アラタ | MF8IyTP2

    追記の開閉について(お礼)

    早い対応、有り難うございます。
    日記等のスタイルですと追記を開いた場合、閉じる必要はなく次の記事へいくのですが、小説の場合、1記事が縦に長くなるため、追記を使用することが多いです。
    記事の並びが投稿順にしてあるため、(新)03・02・01(古)となり01を読んだ後、02を読もうとすると上へスクロールしなくてはいけません。
    記事の並びを逆にすればいいのですが、そうすると更新した分が一番後ろにいってしまう…と色々と考えた末、追記に「閉じる」があれば便利かと思いご提案させて頂きました。
    簡単に出来て使いやすく、とても感激しています。本当に有り難うございました!!!

    ( 21:56 [Edit] )

  40. ケン | -

    シンプルで素敵なテンプレをご提供下さりありがとうございます。

    現在左上のタイトル枠に画像を挿入して使用させて頂いております。

    そこで質問なのですが、ここに更新毎に違った画像をランダム表示させたいのですが、そういったことは可能でしょうか。

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

    ちなみにサポート外の質問とあれば無視して頂いて構いません。

    ( 14:31 )

  41. rimse | -

    ケンさん、初めまして。コメントありがとうございます。
    > 現在左上のタイトル枠に画像を挿入して使用させて頂いております。
    >
    > そこで質問なのですが、ここに更新毎に違った画像をランダム表示させたいのですが、そういったことは可能でしょうか。

    どういった方法で画像を設定しているのか分からないので何ともいえません。

    http://rimse.blog73.fc2.com/blog-entry-282.html#comment485
    もし↑こちらの方法で設定しているのであれば、
    http://rimse.blog73.fc2.com/blog-entry-208.html
    このページの方法を適用することができるはずです。
    お試しくださいませ。

    ( 00:12 )

  42. ケン | -

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

    説明不足で申し訳ありませんでした。

    画像の設定はこちらのブログで説明されていた方法でやっておりましたので、教えて頂いたランダム表示設定方法で問題なくできるようになりました。

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

    ( 09:29 )

  43. |

    管理人のみ閲覧できます

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

    ( 02:21 )

  44. rimse | 4HNZ8mMg

    質問の際に以下のことをお願いしております。

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


    提示された情報だけではテンプレート側の問題なのかFC2側の問題なのかもわかりません。
    よろしくお願いします。

    ( 02:31 [Edit] )

  45. 六月 | -

    スクロールバー

    はじめまして、テンプレートお借りしております。
    3番の実里さんと同じ質問です。5番の説明どうりに書き換わりましたが、変化はありませんでした。
    なにか対処法はございますでしょうか?
    宜しくお願い致します

    ( 06:55 )

  46. rimse | 4HNZ8mMg

    Re: スクロールバー

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

    > 3番の実里さんと同じ質問です。5番の説明どうりに書き換わりましたが、変化はありませんでした。
    > なにか対処法はございますでしょうか?

    このカスタマイズはInternetExplorerでのみ変化するものです。それ以外のブラウザでは表示に変化はありません。
    もしInternetExplorerをお使いで、表示に変化がない場合は編集にミスがあったはずです。
    コレに関してはソースコードを見ないと分かりません。

    ( 14:11 [Edit] )

  47. hina | pQfpZpjU

    コメント・トラバ

    はじめまして、テンプレートを利用させていただいております。
    私のブログはドちらかといえばサイト運営なようなものなので、記事にコメントやトラバが必要ないためリンクからエディットも含めて全て取り除いたデザインにしたいのですが、どうしたらなくせますか?
    いろいろいじってみたのですが真っ白になったり、消したはずのエディット部分が出てきたりして困ってます。
    対処法は無いのでしょうか;
    ご回答宜しくお願いします。

    ( 15:12 [Edit] )

  48. rimse | 4HNZ8mMg

    Re: コメント・トラバ

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

    > 私のブログはドちらかといえばサイト運営なようなものなので、記事にコメントやトラバが必要ないためリンクからエディットも含めて全て取り除いたデザインにしたいのですが、どうしたらなくせますか?

    これはテンプレートを編集しなくても、ブログの設定を変更することで可能です。
    こちらのページを参考にどうぞ。(元URLが長いので,短縮URLを使っています)
    http://bit.ly/6pmrzn
    「コメントやトラックバックを受け付けないようにしたい」という内容のQ&Aになっていますが、コメントやトラックバックを受け付けないようにすると、リンク、および個別ページ内の各エリアが表示されないようにテンプレート側で設定されています。
    (もしうまくいかない場合は、これまでに行ったカスタマイズが原因であることが考えられます。その時は一度テンプレートをダウンロードしなおしてくださいませ。)

    ( 15:54 [Edit] )

  49. hina | nEx7PFYA

    素早いお返事ありがとうございました。
    よく見たら設定がおかしくなっていて直したら無事に消せました。
    本当に失礼な質問にまで丁寧な回答ありがとうございました!!

    ( 16:30 [Edit] )

  50. ohana | dmIwQkNM

    左カラムが落ちる原因について

    はじめまして、Nude1.2を利用させていただいております。
    全く知識がない私でも、丁寧な説明のおかげで、少しずつ
    自分が好きなデザインにカスタマイズできつつあります。

    タイトルの件なのですが、記事によって、左カラムが落ちてしまいます。
    いま、確認できているのは、12月5日、7日、13日、などです。
    特に、画像が大きいわけではないとおもうのですが、
    直し方を教えていただけませんか?

    急ぎませんので、お時間があるときで結構です。
    よろしくお願いいたします。

    ( 02:49 [Edit] )

  51. rimse | -

    Re: 左カラムが落ちる原因について

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

    > タイトルの件なのですが、記事によって、左カラムが落ちてしまいます。
    > いま、確認できているのは、12月5日、7日、13日、などです。
    > 特に、画像が大きいわけではないとおもうのですが、
    > 直し方を教えていただけませんか?

    Nudeに限らず、Nefertで作っているテンプレートは画像の大きさでカラム落ちが発生することはありません。
    ソースを確認しましたところ、問題があるのは12月7日(「ラメラメキラキラの~」)、12月5日(「気づいて。」)の記事のようです(13日は問題なく表示されました)。
    どちらも、記事中で使われている<div align="center">に対応する</div>が無いため、テンプレートの構造が崩れているのが原因です。
    該当する記事の最後に、「</div>」を追加してください。

    ( 00:07 )

  52. ohana | dmIwQkNM

    お礼。

    rimse様

    お疲れのところ、お返事ありがとうございました!
    早速訂正しました。
    本当にありがとうございました!!

    ( 00:16 [Edit] )

  53. ケン | -

    タグリスト・スレッド欄の非表示

    素敵なテンプレのご提供ありがとうございます。

    コメントやトラックバックの上のジャンルやテーマが表示される欄を非表示にしたいのですが、可能でしょうか。また、任意で表示・非表示を切り替えることも可能でしょうか、よろしくお願い致します。

    ( 12:55 )

  54. かず | -

    はじめまして
    いきなりですが<a href="http://tokuna.blog40.fc2.com/blog-entry-1960.html" target="_blank" title="ここ">これ</a>を使いたいんですがどこに入れたらいいのかイマイチ分かりません。
    ご回答よろしくお願いします

    ( 19:01 )

  55. rimse | -

    Re: タグリスト・スレッド欄の非表示

    ケンさん、初めまして。コメントありがとうございます。
    > コメントやトラックバックの上のジャンルやテーマが表示される欄を非表示にしたいのですが、可能でしょうか。
    スタイルシートに最後に以下の記述を追加してください。
    ・タグリストを非表示にする場合
    dl.entry-tag { display:none; }

    ・ジャンル、スレッドを非表示にする場合
    dl.entry-thread {display:none;}


    > また、任意で表示・非表示を切り替えることも可能でしょうか、
    これに関しては難しいです。ごめんなさい。

    ( 02:47 )

  56. rimse | 4HNZ8mMg

    かずさん、初めまして。コメントありがとうございます。
    > いきなりですがhttp://tokuna.blog40.fc2.com/blog-entry-1960.htmlを使いたいんですがどこに入れたらいいのかイマイチ分かりません。
    参照されている記事中で追加部分が示されています。
    テンプレートのHTMLの最後に、
    </body>
    </html>
    という部分があるので、まずは記事の通りその上に記述を追加してみてください。

    ただし、記事中でも言及されておりますが、文字コードがUTF-8でない場合文字化けが生じるようです。FC2ブログでは文字コードはEUC- JPとなっているので、文字化けが生じることが予想されます。これに関してはテンプレート側では対策できませんので、ご了承ください。

    ( 02:54 [Edit] )

  57. ケン | -

    Re.Re: タグリスト・スレッド欄の非表示

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

    ( 05:33 )

  58. かず | -

    rimseさん回答ありがとうございました。
    しかし記事中に載ってるとおり
    </body>
    </html>
    の上にスクリプトのコードを貼り付けましたが表示されませんでした。

    ( 14:00 )

  59. rimse | 4HNZ8mMg

    > しかし記事中に載ってるとおり
    > </body>
    > </html>
    > の上にスクリプトのコードを貼り付けましたが表示されませんでした。

    このスクリプトは私の関知するところではないことをご理解下さい。
    私に問い合わせいただいてもこのスクリプトについて一切知りませんので、一から調べているという状況です。

    今のところ,FirefoxやGoogle Chromeでは正常に表示されているようです。
    そのため、InternetExplorerがらみの問題なのではないかなーと思います。
    とりあえず、スクリプト開発元のフォーラムでInternetExplorer関係の記事を検索してみました。
    http://www.getsatisfaction.com/wibiya/searches?query=InternetExplorer&x=0&y=0&style=topics
    この中に似たような事例があると思いますので、一度目を通してみてください(申し訳ないのですが,ちょっと時間がなくてあまり見ることができていません)

    なお,このスクリプトはInternetExplorerの6以下はサポート外となっていて、動作しないようです。ですので、InternetExplorer6以下ではどう頑張っても表示されません。

    それと、こちらの内容を試してみてください。
    http://www.getsatisfaction.com/wibiya/topics/the_bar_is_misaligned_in_the_explorer_8

    HTMLの編集から、最上部にある、
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    と言う部分を、
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    と変更するというものです。


    ***
    先に述べたとおり、このスクリプトについては私の関知するところではありません。
    うまく動作しない場合は、スクリプトの開発元に問い合わせた方がよろしいかと思います。

    ( 15:10 [Edit] )

  60. かず | -

    回答ありがとうございます。
    やってみます!

    ( 16:53 )

  61. Mina | vK9fbjOE

    縦線の削除について

    お忙しい所に初歩的な質問で申し訳ありません。
    コメント50番目のOhanaさんのブログのように、左右の
    コラムの間にある、縦の点線を消したいのですが、
    どこを削除すればよいのか分りません。
    HTML編集の方とスタイルシート編集の方を良く見て
    あれこれ試してみたのですが、探せませんでした。
    どうぞ宜しくお願いします。

    ( 00:12 [Edit] )

  62. rimse | 4HNZ8mMg

    Re: 縦線の削除について

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

    > コメント50番目のOhanaさんのブログのように、左右の
    > コラムの間にある、縦の点線を消したいのですが、
    > どこを削除すればよいのか分りません。


    一番簡単かつ安全な方法をご紹介します。
    スタイルシートの一番最後に次の記述を追加して下さい。

    #wrapper { background-image: none; }

    ( 11:23 [Edit] )

  63. yuki | oJWgTdHc

    素人ですみません

    nudeの
    左上の四角い枠に画像を入れるための
    .header-container {
    background-image : url("画像のアドレス");
    background-repeat : no-repeat;
    background-position : 0 0;
    }
    ってスタイルシートの何処に付け加えるのでしょうか?
    教えて下さい。

    ( 15:46 [Edit] )

  64. rimse | 4HNZ8mMg

    Re: 素人ですみません

    yukiさん

    スタイルシートの最後あたりに「スタイルシート追加用エリア」といった記述があるはずですので、そこに追加して下さい。

    ( 22:29 [Edit] )

コメントの投稿

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

質問の際のお願い

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

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

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


トラックバック

Trackback URL
Trackbacks


Recent Entries

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。