f-blog

FC2ブログ用共有テンプレート制作ブログ。

TOPIC


※当ブログからの素材の持ち帰りはご遠慮願います。


 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
edit |  tb: -- | cm: --
 
fnote02_2c
flaw_fnote02_2c.jpg
---確認環境---
WindowsVista
IE7.0・Firefox3.0

ノートに付箋と写真。

付箋は全5色。サイズが一緒なので入れ替えても統一してもok。
画像はスタイルシートの/* 画像url */にあるurlを変更すればポラ風素材を残したまま入れ替え可能。
ただしサイズは480×290以下に限ります。

始めて質問するときは最初にこちらを読んで下さい。
利用規約はこちらです。
------------------------------
10/03/24
html及びCSSの見直しと修正に伴い一部仕様を変更しました。
03/24以前のコメント欄にあるクラス名が一部変わってますのでカスタマイズの際はご注意下さい。
スポンサーサイト
パソコン用テンプレートの関連記事
edit |  tb: 0 | cm: 33

コメント

画像の変え方がよく分からないのですが・・
やってみたもののちゃんとできなくて・・・
どうやるんですか?

あつき #zIoJtqMA | URL | 2009/05/01 20:53 * edit *

あつきさんへ

こんばんは。

画像の変更はスタイルシートの編集から下記部分を探し、画像のurlを変更します。
------------------------------
/* 画像URL */
.title {
width: 480px;
height: 290px;
margin: 0 auto;
position: relative;
bottom: -25px;
background: url(http://blog-imgs-26.fc2.com/f/l/a/flaw/fnote02-title.jpg);
}
------------------------------
サイズが横480px縦290pxならurl以外の変更は必要ありません。
サイズの変更は480×290を上限に横widthと縦heightを変更して下さい。

れん #X.Av9vec | URL | 2009/05/01 22:52 * edit *

わかりました
やってみます。
有難うございました^^

あつき #- | URL | 2009/05/03 15:46 * edit *

はじめまして。
スッキリしたスタイルがとても素敵で、一目ぼれして使わせていただいています。

タイトルの画像を複数用意してランダム表示させたいのですが、

/* 画像URL */
.title {
width: 480px;
height: 290px;
margin: 0 auto;
position: right top;
repeat :no-repeat;
bottom: -25px;
background: url(http://blog-imgs-18.fc2.com/c/h/u/chukenpole/09vertitle3.jpg);
}

この部分にJAVAスクリプトを入れれば良いのでしょうか?
そこの部分をそのまま

<SCRIPT language="JavaScript">
jmp = new Array();
img = new Array();
img[0] = "http://blog-imgs-18.fc2.com/c/h/u/chukenpole/toptitle1.jpg";
img[1] = "http://blog-imgs-18.fc2.com/c/h/u/chukenpole/toptitle2.jpg";
img[2] = "http://blog-imgs-18.fc2.com/c/h/u/chukenpole/toptitle3.jpg";

var add ="http://";
l = Math.floor(Math.random()*img.length);
document.write("<a href='"+add+"'>");
document.write("<img src='"+img[l]+"' border='0'>");
document.write("</a>");
</SCRIPT>
としましたが、これでは表示できないようです。

また、こういった改造は大丈夫でしょうか?
よろしくお願いします。

相原やよい #- | URL | 2009/05/04 00:13 * edit *

相原やよいさんへ

テンプレートをお使い頂きありがとうございます。

正直スクリプトは詳しくないのでお答えしづらいのですがfirefox3で試した限りでは動作しましたのでその方法をご説明します。

まずスクリプトはhtml上でしか動作しませんのでhtmlの編集と必要に応じてスタイルシートの編集が必要になります。
スクリプトで表示される画像の上にはクラス等(該当テンプレでは<h1><h2>)は置けなかったと記憶してますが、ブログを拝見すると既に移動してるみたいですのでその説明は省きますね。

スクリプトはhtmlの下記部分に置きます。
------------------------------
<div class="header">
<div class="title">
ここにスクリプトを置く
</div>
</div>
------------------------------

スタイルシートの.titleにある画像は削除した方が良いでしょう。
(赤字部分を削除)
------------------------------

/* 画像URL */
.title {
width: 480px;
height: 290px;
margin: 0 auto;
position: relative;
bottom: -25px;
background: url(http://blog-imgs-26.fc2.com/f/l/a/flaw/fnote02-title.jpg);
}
------------------------------
これでポラ風素材を残したままスクリプトが動くはずです。

しかし相原さんのブログと変更された.titleを見る限りではポラ風素材はあまり意味がないように思えますのでもし外すのであればhtmlは以下のように
(赤字部分を削除)
------------------------------
<div class="header">
<div class="title">
ここにスクリプトを置く
</div>
</div>
------------------------------

スタイルシートは以下のようにしても良いと思います。
(赤字部分を削除)
------------------------------
/* 画像URL */
.title {
width: 480px;
height: 290px;
margin: 0 auto;
position: relative;
bottom: -25px;
background: url(http://blog-imgs-26.fc2.com/f/l/a/flaw/fnote02-title.jpg);

}
------------------------------

以上になりますが、本来スクリプトに関してはサポート出来ない部分ですので動作については保証出来ませんがご理解下さい。

れん #X.Av9vec | URL | 2009/05/04 01:15 * edit *

お忙しいところ、すぐにご回答いただきましてありがとうございます。
FireFoxとIEで問題なく動きました。
本来サポート外・・・ですよね、申し訳ありません。お手数おかけいたしました。
どうしてもノート罫線の壁紙と、このスタイルが使いたかったので、他のテンプレートで代用する気になれませんでした。
本当にありがとうございました。

相原やよい #- | URL | 2009/05/04 17:22 * edit *

はじめましてこんにちわ★
fnoteのテンプレートを愛用させていただいております♪

もしかしたら、「デザインの大幅変更」に当たるかもしれないとは思いつつ、お気に入りのテンプレートなので厚かましく質問させていただきます。
現在、このテンプレートは左カラムですが、これを右カラムに変更する事はできますでしょうか?floatのrightとleftを入れ替える試みはしたのですが、これをするとIE以外のブラウザでポラ風の画像が消えてしまうようなのです・・・。

何か解決方法はありますでしょうか?もしあれば教えてください。
また、もしこれがよくないデザイン変更にあたるのであれば、その旨お知らせください。

お忙しいところ申し訳ございませんが、よろしくお願いいたします。

kinsuke #9enIUaYc | URL | 2009/05/13 14:01 * edit *

kinsukeさんへ

こんばんは。
テンプレートをお使い頂きありがとうございます。

ご質問のカラムの入れ替えは下記のようにして下さい。
------------------------------
#right {
float: left;
width: 510px;
margin-left: 20px;
}

#left {
float: right;
width: 220px;
margin-right: 10px;
}
------------------------------
IE以外だとポラ風素材が消えるとの事ですが、firefox3では問題なく表示されました。
表示されないというそのブラウザが何なのか教えて頂ければ改めて確認したいと思います。

れん #X.Av9vec | URL | 2009/05/13 20:32 * edit *

お忙しいところ素早い対応ありがとうございました!

うまくいかなかったブラウザはSafariやFirefoxだったのですが、教えていただいた通りに試してみたところ、うまくいきました!おそらくmarginのleftとrightを変えていなかったことが原因かと思います・・・もしくは他の部分で何か問題があったのかもしれません。

どうもありがとうございました!これからも愛用させていただきます♪

kinsuke #9enIUaYc | URL | 2009/05/14 00:18 * edit *

はじめまして。
れんさんのテンプレートを見つけて、あまりにも気に入ってしまったので、ブログを始めてみました。

タイトルの説明文を、タイトルから離して枠の下にもっていきたいのですが、
どのようにしたらよいでしょうか。

他にも同様の質問があったかもしれませんが、どうしても見つけられませんで、お問い合わせさせていただきました。
お忙しいとは思いますが、よろしくお願い致します。

まろ #- | URL | 2009/05/25 23:06 * edit *

まろさんへ

こんばんは。
テンプレートをお使い頂きありがとうございます。

まずhtmlの67行目付近にある<h2>~</h2>青字部分へ移動(カット&ペースト)させます。
(htmlはちょっと細かいですが上から探せば程なく見つかるはずです)
------------------------------
<div id="right">
<div class="header">
<div class="title">
<h1><a href="<%url>"><%blog_name></a></h1>
<h2><%introduction></h2>
</div>
</div>
ここへ移動
<div class="admenu">
------------------------------

次に文字色が白のままでは背景と同系色で見えませんのでスタイルシートで変更します。
(72行目付近)
------------------------------
h2 {
margin: 0;
padding: 10px 10px 0;
font-size: 120%;
font-weight: bold;
color: #fff;
}
------------------------------
とりあえず灰色#666を指定しておき、下記サイトなどを参考に好きな文字色を探されると良いと思います。
http://www.tagindex.com/color/
他にも「html 文字色」などで検索するといいかもしれませんね。

れん #X.Av9vec | URL | 2009/05/26 00:11 * edit *

ありがとうございます!
思うようにできました。
丁寧な説明に感謝です。
これからも作品を楽しみにしてます。

まろ #- | URL | 2009/05/26 00:43 * edit *

はじめまして。テンプレート利用させてもらっています。
なにげなく過去記事を見ていたのですが、IEで見ているときのみ(FireFoxでは問題なし)
記事内で引用(<blockquote>)をしたあとの文章の左端がすべて欠けていることに気づきました。
読みにくくなってしまうので直したいのですが方法がわかりません・・・。

お忙しいとは思いますがよろしくお願いします。

めり #JalddpaA | URL | 2009/05/29 04:16 * edit *

めりさんへ

こんにちは。
テンプレートをお使い頂きありがとうございます。

IEというのはIE6の事でしょうか?
こちらでは確認出来きないので分からないのですが、スタイルシートの編集で赤字部分のように変更するとどうでしょうか?
------------------------------
.entry_text {
font-size: 100%;
color: #666;
margin: 0 auto;
padding: 5px;
width: 96%;
overflow: hidden;
}
------------------------------

れん #X.Av9vec | URL | 2009/05/29 17:15 * edit *

こんばんは。
>IEというのはIE6の事でしょうか?
書き忘れててすみません。IE6です。

スタイルシートの記述を教えて頂いた通りに変更したところ、文字が欠けることなくきちんと表示されるようになりました。
念のためFireFoxのほうでも確認しましたが、何も問題なく表示されています。

お忙しい中、本当にありがとうございました。
これからの作品も楽しみにしています。

めり #JalddpaA | URL | 2009/05/30 00:03 * edit *

こんばんは
サイズ350・290の画像に変えてみたのですが、
変えると細かくなってしまって、
一枚の大きな画像にはどうやったらいいでしょうか?

FlatArt #LOmmu2Rk | URL | 2009/08/23 04:19 * edit *

FlatArtさんへ

使用されてる画像のアドレスがサムネイルではありませんか?
urlをご確認下さい。

れん #X.Av9vec | URL | 2009/08/23 15:30 * edit *

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

FlatArt #- | URL | 2009/08/24 04:26 * edit *

付箋の色変更について教えてください。

はじめまして。
付箋の色を統一したいのですが、
どこをいじればよいのでしょうか?
インデックスのグリーンやパープルの部分も全て日付と同色の水色に合わせたいのですが、やり方がわかりませんでした。
付箋の色変更について教えてください。
よろしくお願いします。

あみ #- | URL | 2009/12/15 10:25 * edit *

あみさんへ

こんにちは。
テンプレートをお使い頂きありがとうございます。

付箋の入れ替えはスタイルシートの編集から行います。
下記のクラスで指定してますので各クラスのbackground: url(画像url);の画像urlを入れ替えます。
------------------------------
p.date = 青色付箋

h4.first = 緑色付箋

h4.second = 紫色付箋

h4.third = オレンジ色付箋

h5 = 黄色付箋
------------------------------
水色(青)だとp.date以外の各クラスurlが **/fnote02-03.gif となります。

れん #X.Av9vec | URL | 2009/12/15 16:24 * edit *

できました。

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

あみ #- | URL | 2009/12/15 18:32 * edit *

付箋の色について

こんばんは。
FC2のブログを始めたばかりです。
こちらのテンプレートを使用させていただきたいと思っていますが、
付箋の色は5色意外に変更はできませんか?
自分で作った色を使いたくて、画像をアップしてURLを
書き変えましたが、うまくいきませんでした。
この質問、失礼にあたるのでしたら、申し訳ありません。

ゆうたろう #- | URL | 2010/03/11 00:49 * edit *

ゆうたろうさんへ

テンプレートをお使い頂きありがとうございます。

元素材のサイズを参考に付箋を作ったのであれば(他の方に対してですが)一つの回答の通りurlの変更だけです。
詳細が分からないので現状では変更箇所にミスがないか確認して下さいとしか言えません。

それと質問に際してはブログurlの記載をお願いしてますのでご注意下さい。

れん #X.Av9vec | URL | 2010/03/11 12:06 * edit *

お返事ありがとうございます。
URLの記載漏れ、すみませんでした。
画像のサイズが合わないから反映されないのか思いましたが、
関係ないようですね。
またやり直してみます。
ありがとうございました。

ゆうたろう #- | URL | 2010/03/11 15:23 * edit *

こんばんは。
昨日、質問させていただきましたゆうたろうです。
別の件でお尋ねします。
記事を更新したとき、写真を載せると周りに四角の囲みができますが、
それを消す方法を教えてください。
よろしくお願いします。

ゆうたろう #- | URL | 2010/03/11 23:56 * edit *

ゆうたろうさんへ

スタイルシートの編集から該当ラスの内容を下記の様に書き換えて下さい。
------------------------------
.entry_text img {
background: none;
border: none;
margin: 5px;
padding: 0;
}
------------------------------

れん #X.Av9vec | URL | 2010/03/12 20:05 * edit *

すみません、お返事が遅くなりました。
回答ありがとうございます。
消すことができました。

ゆうたろう #- | URL | 2010/03/16 14:31 * edit *

デザインに一目ぼれしました!
是非3カラムバージョンも作って欲しいです!
ご検討よろしくお願いします○┓ペコ

アールグレイ #- | URL | 2010/03/21 02:13 * edit *

アールグレイさんへ

現状のサイズまま3カラムというのは非常に難しいですが検討はさせて頂きます。

れん #X.Av9vec | URL | 2010/03/22 01:09 * edit *

はじめまして。
一目でとても気に入ったので使わせて頂きたいのですが・・・
写真をメインで載せるブログのため、
記事の幅変更を大きくしたいのですが・・・
これは、「大幅な変更」にあたり、「良くない行為」にあたりますでしょうか?
許可を頂いてからダウンロードさせていただきたいと思い質問させて
いただきました。 よろしくお願いいたします。

マダム鈴木 #- | URL | 2010/04/23 18:35 * edit *

マダム鈴木さんへ

大きな変更というのは原型(デザイン)を大きくカスタマイズする事で、記事幅の変更なら問題ありません。

スタイルシートの編集で、#containerと#content(及び* html body #content)のwidthを変更します。
#contentのwidthが記事幅なので、その増えた分を#containerのwidthに足せば広がります。
(ただし#containerは1000px以内となります)

それとタイトル画像はサイズ変更が出来ないのでそのままか、あるいはポラ風素材を削除すれば変更出来ます。
必要であれば改めてご質問下さい。

れん #X.Av9vec | URL | 2010/04/24 00:34 * edit *

記事幅変更の丁寧な回答ありがとうございました。
初心者の私にでも出来るなんて・・感動です ! 嬉しいです !
ありがとうございます !!
タイトル画像は、ポラ風がとても気に入ってるので
このまま使わせて頂きます。

新たに質問なんですが・・

過去の質問を見て、右カラムに変更したんですが
記事幅を拡大したら、サイドバーが落ちてしまいました。
これは、改善できるのでしょうか?
記事幅が大きくてダメなのでしょうか?
お忙しいところすみませんが、よろしくお願いいたします。

マダム鈴木 #- | URL | 2010/04/24 20:09 * edit *

マダム鈴木さんへ

最新のテンプレートの場合、カラムの入れ替えは以下の様になります。
------------------------------
#content {
float: left;
width: 510px;
margin-left: 20px;
}

* html body #content {
float: left;
width: 510px;
margin-right: 10px;
}

#left {
float: right;
width: 220px;
margin-left: 10px;
}

* html body #left {
float: right;
width: 220px;
margin-left: 5px;
}
------------------------------
#contentと#leftそれぞれのwidthとmarginの合計が#containerより大きくなければ崩れる事はありません。
その辺を注意しながらカスタマイズして下さい。

れん #X.Av9vec | URL | 2010/04/25 00:40 * edit *

▲Page top

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