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

★ 基本情報

テンプレート名 : Nude(登録名:nude)
最新バージョン : 1.61

更新履歴 - Update history

2014/1/3 : 1.6→1.61
[Modify] 「カテゴリ」と「タグ」のアイコンを変更
[Bug Fix]ブログの言語設定が英語等の場合に正しく日付が表示されない不具合を修正
2012/8/15 : 1.5→1.6
[Modify] 各所にアイコンを追加
[Bug Fix] Chrome・Safariにて追記開閉スクリプトが正常に動作しなかった件を修正
[Bug Fix] 追記開閉スクリプト不使用時の挙動を修正
[Bug Fix] 「Comments(x)」のリンクをクリックした歳の移動先を修正
[Modify] その他一部スタイル調整
2012/2/23 : 1.2→1.5
[Modify] 新仕様サーバーに対応
[Modify] 他言語環境への最適化
[Modify] スクリプトの整理
そのほかの変更点については、Nude ver.1.3βのリリース情報、及びver.1.3β2のリリース情報を参照してください。
2009/10/08 : 1.1→1.2
[Modify] 「前後の記事へのリンク部分」のスタイル変更
[Modify] 左右カラムの入れかえ実装
[Modify] 非常に長い記事の場合に生じるFirefoxのバグに対応
[Modify] 簡易カスタマイズ一部改良
[Modify] pre、hrなどのデフォルトスタイル変更
2009/08/08 : 1.0→1.1
詳細、及び手作業での更新については別記事にて。
[Modify] 全記事一覧表示に対応
[Modify] 記事がない場合の表示改善
[Modify] プラグイン3の出力方法を変更
[Modify] フッタ部の表示方法変更
[Modify] 簡易カスタマイズ一部改良
2009/07/15 : 1.0
共有テンプレート登録

空間を意識した、記事の映えるシンプルテンプレート。
幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。

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

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

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

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

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

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

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. |

    管理人のみ閲覧できます

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

    ( 22:20 )

  2. ちぃ | qoYXFitc

    枠の中に画像貼るには

    はじめまして、こちらのテンプレートを使わせていただいております。
    ありがとうございます!

    すごく初心者な質問で申し訳ないのですが、自分ではやり方が分からずなので思い切って質問させていただきました。

    ブログタイトルがある左上の枠の中に、好きな画像を入れたいのですが、どうすれば良いでしょうか?

    ものすごく初心者なので詳しく教えてくださるととても助かります!
    すみません。。。

    ( 11:45 [Edit] )

  3. aki | n08XGfOg

    初めまして

    初めまして、コメント失礼します。
    ver1.5で左上の四角に画像を挿入したいのですが
    ver1.2以下と同様に
    .header-container {
    background-image : url("画像のアドレス");
    background-repeat : no-repeat;
    background-position : 0 0;
    }
    こちらで変更できるのでしょうか?
    それとも1.5以上は画像挿入できない仕様なのでしょうか?よろしくお願いします。

    ( 18:27 [Edit] )

  4. rimse | 4HNZ8mMg

    Re:

    ちぃさん、akiさん、コメントありがとうございます。返信が遅くなってしまってすみません。

    タイトル部分に背景画像を設定したい場合は、

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

    background-repeatは画像の繰り返し、background-positionは画像を表示させる位置に関する設定になります。
    使いたい画像に合わせて調整してください。

    背景色について変更する場合は、スタイルシート上部の簡易カスタマイズ内に【背景の設定】という箇所がありますので、そちらを参照してください。

    ( 23:36 [Edit] )

  5. ケンタ | TY.N/4k.

    メニューの順番変えたいのですが

    初めまして
    ExciteブログからFC2へ引っ越しましてテンプレート色々試しましたがレイアウトが崩れて困ってましたがrimse様のテンプレートが綺麗に表示されシンプルで大変気に入りました。
    申し訳ありませんが、1つ教えて戴けると助かります。

    メニューの表示される順番を変更したいのですがやりかたが解りません。
    具体的にはカテゴリの項目をプロフィールのすぐ下で最新記事の上に配置したいのです。
    HTML編集、スタイルシート編集を眺めてみても解らなくて済みません
    よろしくお願いします。

    ( 08:39 [Edit] )

  6. rimse | 4HNZ8mMg

    Re: メニューの順番変えたいのですが

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

    > メニューの表示される順番を変更したいのですがやりかたが解りません。
    > 具体的にはカテゴリの項目をプロフィールのすぐ下で最新記事の上に配置したいのです。
    > HTML編集、スタイルシート編集を眺めてみても解らなくて済みません

    メニュー部分はプラグインの設定が反映されるようにしているので、テンプレートではなく、プラグイン側の設定を変える必要があります。
    ブログの管理画面に「プラグインの設定」というページがありますので、そこを開いて下さい。
    すると、「位置」という項目があるので、↓↑を使って順番を調整してください。(「移動」の番号で設定するのも○です)

    ( 20:51 [Edit] )

  7. ケンタ | TY.N/4k.

    「プラグインの設定」で変更出来るんですね
    よく調べもせずお手数掛けてしまい申し訳ありませんでした。
    こちらのテンプレートを使わせて戴きます
    ありがとうございます。

    ( 05:06 [Edit] )

  8. ひじり | -

    初めまして!

    とてもシンプルで素敵なテンプレートなので、使わせていただいています

    質問なのですが、記事側とプラグイン側を分ける縦のドットラインの
    色の変更は可能でしょうか?
    初心者でして、このような質問をしてしまって申し訳ないのですが
    教えて頂けるととても助かります!
    お忙しい所申し訳ありませんがどうぞよろしくお願いいたします

    ( 00:51 )

  9. rimse | 4HNZ8mMg

    Re: 初めまして!

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

    > 質問なのですが、記事側とプラグイン側を分ける縦のドットラインの
    > 色の変更は可能でしょうか?


    縦のドットラインは画像を使用していますので、その画像を編集する必要があります。
    まずは該当の画像をダウンロードし、画像編集ソフトを使って色を変更して下さい。
    http://blog-imgs-41.fc2.com/r/i/m/rimse/border-y-444.gif 

    その画像をファイルアップロードでアップロードし、URLをコピーして下さい。
    そして、テンプレートの編集画面を開き、スタイルシートの編集から、以下の部分を探して下さい。

    /*[2.2]*/
    #Wrap {
    font-size: 75%;
    margin: 0 auto;
    /* for IE5 */ text-align: left;
    }

    #WrapInner {
    background-image: url("http://blog-imgs-41.fc2.com/r/i/m/rimse/border-y-444.gif");
    background-repeat: repeat-y;
    }

    この太字部分を、コピーした画像のURLと置き換えて下さい。これで編集は完了です。

    ( 11:24 [Edit] )

  10. ひじり | -

    rimseさん
    無事に編集できました。とても嬉しいです♪
    詳しく教えてくださり、とても助かりました
    お忙しい所ありがとうございました!!

    ( 19:16 )

  11. そお | 4UJQhaRY

    google+ボタン

    初めまして、大変気に入り使わせていただいております。
    google+ボタン または 忍者おまとめボタンを入れたいのですが、上手くいきません。
    教えていただけますか?

    ( 15:05 [Edit] )

  12. rimse | 4HNZ8mMg

    Re: google+ボタン

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

    申し訳ありませんが、ブログのどの部分に追加したいのか教えていただけませんと、なんともいえません。


    ですので、google+ボタンをFC2ブログに追加する一般的な方法について、ご説明いたします。
    まずこちら https://developers.google.com/+/web/+1button/ のページでコードを生成して下さい。その際、+1ボタンの対象とするurlのところにそおさんのブログのurlを入れておいて下さい。


    次にテンプレートの編集ページを開き、生成したコードをHTMLに追加していきます。


    「head 内か、body 終了タグの直前に次のタグを貼り付けてください。」とされているコードは</head>の直前に追加すると良いでしょう。

    「+1 ボタン を表示したい位置に次のタグを貼り付けてください。」とされているコードは、+1ボタンを表示したい部分に記述して下さい。記事ごとに+1ボタンを設置するのであれば、<!--topentry-->と<!--/topentry-->の間に追加する必要があります。例えば記事の最後に追加する場合ですと、
    <!--more-->
    <a name="more" id="more"></a>
    <div class="EntryMoreBody"><%topentry_more></div>
    <!--/more-->
    の直後あたりが良いと思います。


    その際、追加するコードに
    data-href="http://(ブログのurl)"
    という部分があるかと思いますので、それを
    data-href="<%topentry_link>"
    に書き換えて下さい。

    ( 05:35 [Edit] )

  13. そお | 4UJQhaRY

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

    ( 12:00 [Edit] )

  14. クミ | do9yduEs

    初めまして

    初めまして、rimseさま
    テンプレート、とても素敵で使わせて頂いています。
    シンプルで見やすく、本当にお気に入りです。
    ご質問させて頂きたいのですが、現在「Nude」使用中です。

    上部のHOME、PREV、NEXTは削除する事は可能でしょうか。

    一部のリンク部分のカラーを変更する事は可能でしょうか。

    お忙しいとは存じますので、お気づきの、お時間おありのときに
    教えて頂けると幸いです。どうぞ宜しくお願い致します。

    ( 11:33 [Edit] )

  15. クミ | do9yduEs

    度々申し訳有りません。
    リンクカラーについては解決致しました!

    ( 12:48 [Edit] )

  16. rimse | 4HNZ8mMg

    Re: 初めまして

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

    > 上部のHOME、PREV、NEXTは削除する事は可能でしょうか。

    スタイルシートに

    #TopNav {visibility: hidden;}

    を追加するというのが一番手っ取り早い方法かと思います。
    この場合、レイアウトは変化せずリンク部分のみ非表示になります。
    もし、非表示後の余白が気になるようでしたら、

    #TopNav {display: none;}

    をお試し下さい。

    ( 11:29 [Edit] )

  17. クミ | do9yduEs

    有難うございました!

    rimse様
    ご回答有難うございました。教えて頂いた通り、出来ました。
    とても嬉しいです。お忙しい中、有難うございました!

    ( 04:04 [Edit] )

  18. yoyo | jVTXMqLU

    一部のリンク色のみ変更

    初めまして。シンプルなのにデザイン性の高さに一目ぼれしてお借りしました!今色々とカスタマイズしている最中なのですが、分からない部分の質問をさせて頂けますでしょうか。 お借りしているテンプレートは「Nude ver.1.61」です。

    「続きを読む」「追記を閉じる」の文字色だけを変更したく色々試行錯誤したのですが、cssでは上手くいかず、htmlのmore_link部分で指定してみたら色が変更できたかわりにextendword/closewordで指定した日本語が適用されなくなったり、どうしても上手くいきません。

    できるだけrimse様のお手を煩わせたくはなかったのですが、自分の未熟な知識では分かりませんでした。大変申し訳ないのですが、この部分のみ文字色を変更する方法がもしありましたらご教授頂けませんでしょうか? よろしくお願いいたします。

    ( 14:45 [Edit] )

  19. rimse | 4HNZ8mMg

    Re: 一部のリンク色のみ変更

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

    > 「続きを読む」「追記を閉じる」の文字色だけを変更したく色々試行錯誤したのですが、cssでは上手くいかず、htmlのmore_link部分で指定してみたら色が変更できたかわりにextendword/closewordで指定した日本語が適用されなくなったり、どうしても上手くいきません。

    スタイルシートの編集を行います。
    スタイルシートの最後尾、「スタイルシート追加用エリア」に次の記述を追加してください。


    /* 通常の状態 */
    a.EntryExtend:link {
    color: #444;
    text-decoration: underline;
    }
    /* 訪問済みの状態 */
    a.EntryExtend:visited {
    color: #444;
    text-decoration: underline;
    }
    /* カーソルをのせた状態 */
    a.EntryExtend:hover {
    color: #c33;
    text-decoration: underline;
    }



    あとはカラーコードなどを編集すればOKのハズです。
    (「訪問済みの状態」については追記開閉スクリプトが有効の時には適用されませんが、javascriptを無効に設定しているユーザーには適用されるため、設定しておくことをオススメします)

    ( 16:46 [Edit] )

  20. yoyo | jVTXMqLU

    ありがとうございます!

    ご回答ありがとうございます。
    more_linkしか見つけられませんでしたが、EntryExtendですか!
    大変勉強になりました。
    訪問済みの状態についても教えて頂けて助かりました。
    本当にありがとうございました!

    ( 10:54 [Edit] )

  21. クミ | do9yduEs

    rimseさま、こんにちは。以前ご質問させて頂いた者です。
    もう一点教えて頂きたいのですが…(Nude使用中です)
    投稿日時の文字カラーの変更の方法を教えて頂ければと思います。
    (色々調べたのですが自力では解決出来ませんでした…)
    お時間のおありのときに、宜しくお願い致します。

    ( 01:04 [Edit] )

  22. クミ | do9yduEs

    解決しました!

    前投稿のクミです。
    何とか自己解決しました!申し訳ございません!

    ( 14:55 [Edit] )

コメントの投稿

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

質問の際のお願い

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

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

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


トラックバック

Trackback URL
Trackbacks


Recent Entries