FC2ブログ用テンプレートの制作・配布。シンプルなデザインが多めです。
22:55
テンプレート名 : Nude(登録名:nude)
最新バージョン : 1.61
空間を意識した、記事の映えるシンプルテンプレート。
幅可変/固定の切り替えのほか、様々なカスタマイズ項目を用意。
プラグイン3はトップページの記事上部に表示。
バトン用専用スタイルあり。プラグインON/OFF対応。XHTML 1.0 Transitional。jQueryをテンプレート内で使用しています。
Mac版InternetExplorerで閲覧する際には、スタイルを適用しないよう設定されています。ご了承ください。
更新があると、ブログのフッタ部分に★マークがつきます。たまに確認していただけるとありがたいです。
記事中での使用を想定したいくつかのクラスが用意してあります。
これまでは回り込みなどを実現するにはいちいちスタイルを直接書き込まなければなりませんでした。しかも、たとえば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です。
このテンプレートは、
クリエイティブ・コモンズ・ライセンス
の下でライセンスされています。
テンプレート各部分の原著作者・ライセンスは以下の通りです。
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
ちぃ | qoYXFitc
枠の中に画像貼るには
はじめまして、こちらのテンプレートを使わせていただいております。
ありがとうございます!
すごく初心者な質問で申し訳ないのですが、自分ではやり方が分からずなので思い切って質問させていただきました。
ブログタイトルがある左上の枠の中に、好きな画像を入れたいのですが、どうすれば良いでしょうか?
ものすごく初心者なので詳しく教えてくださるととても助かります!
すみません。。。
初めまして
初めまして、コメント失礼します。
ver1.5で左上の四角に画像を挿入したいのですが
ver1.2以下と同様に
.header-container {
background-image : url("画像のアドレス");
background-repeat : no-repeat;
background-position : 0 0;
}
こちらで変更できるのでしょうか?
それとも1.5以上は画像挿入できない仕様なのでしょうか?よろしくお願いします。
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は画像を表示させる位置に関する設定になります。
使いたい画像に合わせて調整してください。
背景色について変更する場合は、スタイルシート上部の簡易カスタマイズ内に【背景の設定】という箇所がありますので、そちらを参照してください。
ケンタ | TY.N/4k.
メニューの順番変えたいのですが
初めまして
ExciteブログからFC2へ引っ越しましてテンプレート色々試しましたがレイアウトが崩れて困ってましたがrimse様のテンプレートが綺麗に表示されシンプルで大変気に入りました。
申し訳ありませんが、1つ教えて戴けると助かります。
メニューの表示される順番を変更したいのですがやりかたが解りません。
具体的にはカテゴリの項目をプロフィールのすぐ下で最新記事の上に配置したいのです。
HTML編集、スタイルシート編集を眺めてみても解らなくて済みません
よろしくお願いします。
Re: メニューの順番変えたいのですが
ケンタさん初めまして。コメントありがとうございます。
> メニューの表示される順番を変更したいのですがやりかたが解りません。
> 具体的にはカテゴリの項目をプロフィールのすぐ下で最新記事の上に配置したいのです。
> HTML編集、スタイルシート編集を眺めてみても解らなくて済みません
メニュー部分はプラグインの設定が反映されるようにしているので、テンプレートではなく、プラグイン側の設定を変える必要があります。
ブログの管理画面に「プラグインの設定」というページがありますので、そこを開いて下さい。
すると、「位置」という項目があるので、↓↑を使って順番を調整してください。(「移動」の番号で設定するのも○です)
「プラグインの設定」で変更出来るんですね
よく調べもせずお手数掛けてしまい申し訳ありませんでした。
こちらのテンプレートを使わせて戴きます
ありがとうございます。
初めまして!
とてもシンプルで素敵なテンプレートなので、使わせていただいています
質問なのですが、記事側とプラグイン側を分ける縦のドットラインの
色の変更は可能でしょうか?
初心者でして、このような質問をしてしまって申し訳ないのですが
教えて頂けるととても助かります!
お忙しい所申し訳ありませんがどうぞよろしくお願いいたします
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と置き換えて下さい。これで編集は完了です。
rimseさん
無事に編集できました。とても嬉しいです♪
詳しく教えてくださり、とても助かりました
お忙しい所ありがとうございました!!
google+ボタン
初めまして、大変気に入り使わせていただいております。
google+ボタン または 忍者おまとめボタンを入れたいのですが、上手くいきません。
教えていただけますか?
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>"
に書き換えて下さい。
ありがとうございました。
初めまして
初めまして、rimseさま
テンプレート、とても素敵で使わせて頂いています。
シンプルで見やすく、本当にお気に入りです。
ご質問させて頂きたいのですが、現在「Nude」使用中です。
上部のHOME、PREV、NEXTは削除する事は可能でしょうか。
一部のリンク部分のカラーを変更する事は可能でしょうか。
お忙しいとは存じますので、お気づきの、お時間おありのときに
教えて頂けると幸いです。どうぞ宜しくお願い致します。
度々申し訳有りません。
リンクカラーについては解決致しました!
Re: 初めまして
クミさん、初めまして。コメントありがとうございます。
> 上部のHOME、PREV、NEXTは削除する事は可能でしょうか。
スタイルシートに
#TopNav {visibility: hidden;}
を追加するというのが一番手っ取り早い方法かと思います。
この場合、レイアウトは変化せずリンク部分のみ非表示になります。
もし、非表示後の余白が気になるようでしたら、
#TopNav {display: none;}
をお試し下さい。
有難うございました!
rimse様
ご回答有難うございました。教えて頂いた通り、出来ました。
とても嬉しいです。お忙しい中、有難うございました!
一部のリンク色のみ変更
初めまして。シンプルなのにデザイン性の高さに一目ぼれしてお借りしました!今色々とカスタマイズしている最中なのですが、分からない部分の質問をさせて頂けますでしょうか。 お借りしているテンプレートは「Nude ver.1.61」です。
「続きを読む」「追記を閉じる」の文字色だけを変更したく色々試行錯誤したのですが、cssでは上手くいかず、htmlのmore_link部分で指定してみたら色が変更できたかわりにextendword/closewordで指定した日本語が適用されなくなったり、どうしても上手くいきません。
できるだけrimse様のお手を煩わせたくはなかったのですが、自分の未熟な知識では分かりませんでした。大変申し訳ないのですが、この部分のみ文字色を変更する方法がもしありましたらご教授頂けませんでしょうか? よろしくお願いいたします。
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を無効に設定しているユーザーには適用されるため、設定しておくことをオススメします)
ありがとうございます!
ご回答ありがとうございます。
more_linkしか見つけられませんでしたが、EntryExtendですか!
大変勉強になりました。
訪問済みの状態についても教えて頂けて助かりました。
本当にありがとうございました!
rimseさま、こんにちは。以前ご質問させて頂いた者です。
もう一点教えて頂きたいのですが…(Nude使用中です)
投稿日時の文字カラーの変更の方法を教えて頂ければと思います。
(色々調べたのですが自力では解決出来ませんでした…)
お時間のおありのときに、宜しくお願い致します。
解決しました!
前投稿のクミです。
何とか自己解決しました!申し訳ございません!
Author:rimse
ペンギンを愛してやまないペンギン病患者。
LOVEペンギン。
ただいまお仕事でえらいこっちゃしてます。
ブログのテンプレ作ってました。
共有テンプレートのページで、作者「rimse」と検索すると出てきます。
シンプルめのテンプレが多いかも。
Recent Comments