はじめに // 配布テンプレ&利用規約

<< 配布テンプレのサポート + main + しょっちゅうデザイン変えてます。 >>

よくある質問集

えーコメントをつける方は最低でもよくある質問集はチェックしてください。この記事にコメントつけてるのに、ここに書いてある項目を見ていないとか???ってなってしまいます。 今後はここに書いてあるのに、っていうコメントを頂いた時はコメント数の氾濫を防ぐためにも解答後そのコメントを削除させて頂きます。


ユーザー助け合い掲示板にもあるんですが
目次の意味も兼ねて。随時追加予定。
自分のスキルを上げたい、1から身につけたいって人は
まずcss講座xhtml講座を見てください。


■基本的なことである色換えや背景、文字装飾などは下のcss。
アイコン追加、不要項目削除などはhtmlと独自タグを見てください。


■具体的カスタマイズ

スポンサーサイト

一定期間更新がないため広告を表示しています

| | Comment 0 | - |

cssの書き方。

初心者さんはまずこちらのエントリから読んでください。


JUGEMはhtmlにcssを書く必要がありません。
cssはcss専用編集画面があるからです。


cssはhtml側で
<h1 class="site_title"></h1>

<div id="layout"></div>
<img src="" class="pict" />
のようにidやclassの名前を指定し、
それをcss側で装飾します。
idやclass名がつけられてるエリア内は
対応するcssの記述が反映されるわけです。


よくタグ配布サイトや講座サイトで


<STYLE type="text/css"><!--
色々かいてある
--></STYLE>

をhtmlファイル内に書いてくださいってところもありますが
これはJUGEMでは必要アリマセン。
色々かいてあるの部分だけcss編集画面につけたせばいいわけです。
逆にcss編集画面に


<STYLE type="text/css"><!--
--></STYLE>

とか書き込むとちゃんと動かなくなるので注意です。


またhtmlのタグの中にstyle="width:500px;"
のように書くよう勧めてるところもありますが、
これも整理のしやすさからcssファイルに収納すると楽です。
style=""指定を消して、代わりにclass="tekitou"でも指定して
cssファイルにstyle="と"の中身を


.tekitou {
ここに移す
}

という感じですね。


では具体的にcssの書き方ですが、
cssは以下のような記述でワンセットです。


#layout {
width:500px;
margin:1em;
padding:1em;
border:1px solid #000;
}

中身は例です。では説明してきますね。


#layout {

}

これが外側です。これでhtmlからidで呼び出されているlayout
の指定部分という意味になります。
html側ではここで指定したい部分を


<div id="layout">中略</div>

など囲んで呼び出してます。
これが


<div class="layout">中略</div>

のようにclassで呼び出す場合は、cssの方は


.layout {

}

と#から.になります。
idとclassの違いは
idは全体で1個しかないもの。classは何度も使うもの
の違いです


ここまでいいでしょうか。では中身を見ていきますね。
中は


width:500px;

のように ▲▲:●●;
という行が並んでます。
これは▲▲は●●でお願いしますよ、おしまい。
と言う意味です。:がbe動詞のようなもので、;が区切りですね。


どんな▲▲があるか、▲▲にはどんな指定ができるかは
リファレンスサイトなどをみればのってます。
では続きにて代表的なものを紹介しますね。

width:●●;
 これは横幅を指定します。pxや%単位などがよく使われます。


height:●●;
 縦の高さです。pxや%で指定します。


margin:●●;
 このエリアの外側にどれくらいの余白を取るかを指定します。
 pxやemで指定します。1emは大体1文字分ってことです。


padding:●●;
 このエリアの内側にどれくらい余白を取るかを指定します。


color:●●;
 文字色です。カラーコードで指定します。


font-size:●●;
 文字の大きさです。pxや%などで指定します。


font-family:"フォント名";
 フォントを指定します。


background-image:url(背景画像のURL);
 背景画像を指定します。1エリア1個です。
 背景色との共存は可能です


background-color:●●;
 背景色を指定します。カラーコードで指定です。


background-attachment:fixed;
 背景固定を指定します。IEではbody以外は無理です。


background-position:●px ●px;
 背景画像の位置を指定します。
 左からと上からの距離をpxや%で指定したりright bottomなど
 もつかえます。


background-repeat:no-repeat;
 背景を繰り返しません。縦にのみ繰り返す時はrepeat-y
 横のみはrepeat-xです。


border:1px solid #000;
 枠線です。1pxの太さで実線を、黒で引くという意味です。
 上だけの場合はborder-topと指定します。
 同様にright left bottomで1辺ずつ指定できます。
 solidをdottedにすると点線になります。


text-align:center;
 指定エリア内の文字を中央に寄せます。
 left rightも使えます。


overflot:auto;
 width指定やheight指定と共に使い、この範囲をこえたら
 スクロールバーがでるようにします。
 擬似iframeはこれを使ってます。


float:left;
 エリア自体を左に浮かせます。rightもあり。
 2カラムのテンプレなどに使いますが
 初心者の方には扱いが難しいです。


これらを踏まえて私の配布テンプレを見ると
cssについて分かってくるんじゃないでしょうか。

| 16:00 | Comment 55 | - |

スポンサーサイト

| 16:00 | Comment 0 | - |

Comment

お久しぶりです。
名前ちょっと変えました。

えっと...背景のことなんですけど
うちのブログって上(ブロ画があるところ)だけの背景を
指定できるみたいなんですが
逆に下(記事のところ)だけに背景をつけることってできるんでしょうか?

| れん | 2008/03/26 5:16 PM |

cssの#boxか#mainに背景指定すればそうなるんじゃないですかね。

| tk | 2008/03/26 5:57 PM |

♯mainにしてみたんですけど
記事の部分だけ色がついてしまいました;
両端も全部に色をつけたいんですけど...

| れん | 2008/03/27 4:39 PM |

#boxはどうでした?

>逆に下(記事のところ)だけ

>両端も全部に
だけでは
ちょっと希望完成図が想像つかないので
具体的なアドバイスができません。
こうしたいという図でも作ってみせてください。

| tk | 2008/03/27 4:57 PM |

すいません。
boxが見当たりません;;

えっと
      ブロ画       
---------------------------------- ←ここから上は白背景(今のまま)
                       下は色(画像)背景
      記事      サイド  


...にしたいんですがmainにさっきやってみると

      ブロ画         ←白
----------------------------------
   |////////////|
   |////記事////|   サイド 
   |////////////|
   |////////////|

↑白    ↑ここだけ色   ↑白


こんな感じになってしまうんです。
分かりづらくてごめんなさい。
1回一部分だけ色がついてしまうのをやってみて、
それをみる方がいいですか?

| れん | 2008/03/27 5:36 PM |

boxはhtmlの方にはあるので
cssにないようでしたら
#boxって自分で作ってください。
ただ下の部分横幅全部、は無理だと思います。
横幅指定がされているので。
左右に余白があきますね。

| tk | 2008/03/27 5:40 PM |

こんにちは(^ω^)

ちょっと質問なんですけど...

私のブログにいろんな人がコメしてくれてるんですが
コメしてくれた人の名前が表示されないんです。
どうしたらいいですか?

| 真亜 | 2008/03/27 5:52 PM |

htmlのコメントちかくの
labelとかinputとかの部分がおかしくなってるんじゃないでしょうか。
何か間違った書き換えをしてしまったと思うので
元テンプレと見比べて直してください。

たとえば
<input type="text" tabindex="1" name="neme" id="name" value="" /><br />

ってなってますけど
nemeじゃないですよね。name

| tk | 2008/03/27 6:29 PM |

<label for="name">ねーむ:</label><br/>
<input type="text" tabindex="1" name="neme" id="name" value="" /><br />

私の場合,こう表示されてるんですけど
あってますか...?

| 真亜 | 2008/03/27 7:13 PM |

いやー
nemeってnameの間違いですよね。
ネームですから。
元テンプレはそうなってなかったと思います。

| tk | 2008/03/27 7:23 PM |

あと、マルチポストはお断りです。
ふみの方でも相談しているなら、そちらで聞いてください。

| tk | 2008/03/27 7:24 PM |

あ、すみません

気をつけます!

| 真亜 | 2008/03/28 6:58 PM |

つくるっていうのは...

#main {
float: left;
width: 500px;
background-color: #色;
}


のmainをboxに変えるだけでいいんですか?

| れん | 2008/03/28 8:34 PM |

いや
新しくかきこんでください。
#mainも#boxもどちらもないと困るので。
#box {
}
って作ればいいだけです。

| tk | 2008/03/28 8:35 PM |

#box{
float: left;
width: 500px;
background-color: #色;
}

って書けばいいんですか??

それとも

#box {
background-color: #色;
}

だけですか?

| れん | 2008/03/29 9:24 PM |

下です。
#boxってどうやら記事部分とサイドバー両方をくくってるみたいなので。

| tk | 2008/03/29 9:35 PM |

黄色にしたんですけど
なんか黄色の長方形が出てきただけです;

| れん | 2008/03/29 9:51 PM |

あー多分これ、メインとサイドのcssに
backgroundで#ffffffが指定してあるみたいですね。
まずそれを見つけて削除したほうがいいです。
ただIE6で見え方が違うところをみると
ちゃんとclearされていないのかな。。。
だとするとhtmlに大幅改造が必要かもしれないので
ちょっと面倒ですね。

| tk | 2008/03/29 10:06 PM |

削除しました。
今度は細長い長方形に...
上手くいきません;;

| れん | 2008/03/30 5:15 PM |

うん、元テンプレに問題があるみたいですね。
これ直すのhtmlを大幅になおさないといけないので
かなり面倒です。
できれば元テンプレを私が配布しているカスタマイズ用plainに変えてもらいたいんですが。

試しに#boxに
float:left;と
width:750px;
を追加すればなおるかもしれません。
これでなおらなかったら面倒。

| tk | 2008/03/30 5:25 PM |

それっぽくなりました!
750っていうのは幅ですか?

| れん | 2008/03/30 5:35 PM |

幅です。
外側の#layoutが750px;だったのでそれにあわせてみました。

| tk | 2008/03/30 6:17 PM |

なるほど!
じゃあ記事の幅は変えずに
黄色の部分だけを広げたりできるってことですか?

| れん | 2008/03/31 3:01 PM |

うーん、実際やってみたらどうですか?
boxだけかえてもlayoutがそのままなら広がりませんし
数字ふやすと記事は左にサイドバーは右にずれちゃいますよ。

| tk | 2008/03/31 5:13 PM |

記事やサイドバーをずらさずに背景だけのばす、
っていうのは無理ってことですね?

| れん | 2008/03/31 9:21 PM |

このテンプレでは無理です。
1から書き換えレベルなので。
どうしてもやりたいなら元々そういう構造になってるテンプレ探してきたほうがいいですよ。

| tk | 2008/03/31 9:26 PM |

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

| れん | 2008/04/02 10:57 AM |

質問しますっ!!
サイドバーにタイトル画を設置しているんですけど、
そのタイトル画のある一部(例えばお花)を押すとメニューがでるふうに
したいんですけどできますか??

| 瑠衣 | 2009/07/25 11:19 AM |

これは2点。
・どこにメニューを出すか
・またクリッカブルマップでやるかスライスでやるか
によって方法が異なります。

メニューをページ自体を変えて子ユーザーのプロフィールページなどに飛ばすなら単純にリンクを張るだけですが、折りたたみにするならjavascriptの導入が必要です。
折り畳みについては
http://nous.jugem.jp/?eid=85


また画像の一部にリンクを張る、という方法は
・クリッカブルマップ
・スライスした画像を重ねる
の二つの方法がありますが、

クリッカブルマップについては
http://www008.upp.so-net.ne.jp/netbegin/tetori/html/c030/p030.htm
参照。
C-MAPを使うとちょっと楽かもしれません。
解説ページは
http://sds.chu.jp/lecture/00/02hp/html/cmap1.html

スライスでやる場合には下になる画像とは別に、花の部分だけの画像を用意します。

<div style="position:relative;">
<img src="下になる画像" />
<img src="花の画像" style="position:absolute;top:上からの距離px;left:左からの距離px;" />
</div>

という風に、下になる画像の左上の角からどれくらいずらして花の画像をおくか、というのをhtmlに書き込みます。

えー、この後寝ちゃうんでちょっとレスが遅れます。
とりあえず健闘をお祈りします。

| tk | 2009/07/25 11:41 AM |

自分がやりたいのはクリッカブルのほうなので
そっちをやりたいとおもいます♪

寝るんですか!おやすみなさい∩^ω^∩
できてもできなくてもまた書きます;

| 瑠衣 | 2009/07/26 1:07 PM |

こんにちわ!この前は
おしえていただきありがとうございました!

クリッカブルやってみたところできませんでした;;
なんか画像が表示されず、×になってしまいました・・・

C-MAPをやってソースをやったところ↓になりました

<IMG src="6.png" usemap="#6" border="0">
<MAP name="6">
<AREA shape="rect" coords="87,133,121,151" href="http://pinky-rui.jugem.jp/?eid=19" alt="Info"><!-- Info -->
<AREA shape="rect" coords="124,133,150,150" href="http://pinky-rui.jugem.jp/?eid=23" alt="Mix"><!-- Mix -->
<AREA shape="rect" coords="156,133,186,150" href="http://pinky-rui.jugem.jp/?eid=20" alt="Link"><!-- Link -->
<AREA shape="rect" coords="274,64,274,64" nohref>
<AREA shape="rect" coords="192,133,228,150" href="http://www5.rocketbbs.com/653/pinky312.html" alt="Auto"><!-- Auto -->
<AREA shape="rect" coords="392,198,392,198" nohref>
<AREA shape="rect" coords="476,363,476,363" nohref>
<AREA shape="rect" coords="446,340,446,340" nohref>
<AREA shape="rect" coords="446,340,446,340" nohref>
<AREA shape="rect" coords="446,340,446,340" nohref>
<AREA shape="rect" coords="446,340,446,340" nohref>
<AREA shape="rect" coords="209,142,209,142" nohref>
<AREA shape="default" nohref><!-- デフォルトエリア -->
</MAP>

これをコピーしてHTMLのフリースペースのところに
貼り付けたんですけどできませんでした;
よければおしえてください(∩ω`)

| 瑠衣 | 2009/07/31 1:46 PM |

<IMG src="6.png" usemap="#6" border="0">

が違います。
ここには画像アドレスをいれないとだめなんですよ。
元になる画像をjUGEMにupして、そのアドレスを
6.pngと差し替えてください。

| tk | 2009/07/31 1:54 PM |

できました!ありがとうございまそた(∩ω`)

| 瑠衣 | 2009/07/31 3:12 PM |

質問します(´;ω;`) なんでもすみません;
初めての窓画なのでてこづってしまってっ;

tkさんのテンプレ8をお借りしてます!
それで、C−MAPを使って文字をクリックすると
飛ぶふうにしたんです
<IMG src="http://pinky-rui.img.jugem.jp/20090803_808696.png" usemap="#nyallot" border="0">
<MAP name="nyallot">
<AREA shape="rect" coords="237,198,295,225" href="http://pinky-rui.jugem.jp/?eid=19" alt="Info"><!-- Info -->
<AREA shape="rect" coords="300,174,351,201" href="http://pinky-rui.jugem.jp/?eid=23" alt="Mix"><!-- Mix -->
<AREA shape="rect" coords="363,198,422,225" href="http://pinky-rui.jugem.jp/?eid=20" alt="Link">
<AREA shape="rect" coords="433,175,500,206" href="http://www5.rocketbbs.com/653/pinky312.html" alt="Auto">
<AREA shape="rect" coords="24,203,215,241" href="http://pinky-rui.jugem.jp/" alt="Top"><!-- Top -->
<AREA shape="rect" coords="461,427,461,426" nohref>
<AREA shape="default" nohref><!-- デフォルトエリア -->
</MAP>

これをどこにはれば、窓画として表示されますか?

| 瑠衣 | 2009/08/03 11:41 PM |

カスタマイズ用8はデフォルトではC-MAPを使えるテンプレではありません。

カスタマイズ用2の例ですが
http://nous.jugem.jp/?eid=34
にヒントがあるのでこれを参考にしてください。
floatレイアウトを解除してposition:absoluteで全体を配置する、という流れです。

ただ知識がない人が8をこういう風にするのは非常に難しいと思います。
が、私は今現在風邪真っ最中で、瑠衣さん専用に変更箇所を考えられるほど元気ではないので、不親切ですいませんが勘弁してください。

| tk | 2009/08/03 11:51 PM |

お風邪中なんですか!?
それはすみません(´;ω;`)っ
ゆっくりなおしてください!!

| 瑠衣 | 2009/08/04 12:17 PM |

風邪の具合は大丈夫ですか?
直っていてもしよかったらおしえてください!

記事内のスクロールバーを、
なくしたいんです(pε;)

私のタイトル画のところに
ロゴでNYALLOTって書いてある、その下に
MENUと書いてあるんですけど、それを
同窓にしたいんですけどできますか??

忙しい仲すみません(´;ω;`)

| 瑠衣 | 2009/08/10 9:43 PM |

まだ咳がとまらないんですが大分よくなりました。
ありがとうございます!

スクロールバーは横のことですか?
多分中のロゴが大きいんだと思うんですよ。
窓の大きさを広げるかロゴをちっちゃくすれば横スクロールは消えます。

リンクの同窓はhtmlのリンクタグの
target="_blank"
を削除すると同窓になりますよー。

| tk | 2009/08/10 11:28 PM |

わざわざお返事ありがとうございます;
ゆっくりお休みになってくださいね;;

えっと説明不足ですみません;
縦のことです。!

リンクのほうできました(*´ω`*)
ありがとうございます!

| 瑠衣 | 2009/08/11 6:10 PM |

え、縦消すとホイールがないマウスだと記事見れなくなっちゃいますよ。

http://nous.jugem.jp/?eid=38
を参考に他でまったく使わない色を透過させれば
スクロールバーの透過はできますが、
IE以外のブラウザで見ると目も当てられないくらい無残になるので、あんまりオススメしません。

| tk | 2009/08/11 6:44 PM |

お早い返事ありがとうございます(*>ω<*)
記事みれなくなっちゃうんですか!
それはいやですね(´;ω;`)

記事みたら思ったようなのができました!
ほんといつもお世話になってます;
ありがとうございました(^ω^)

| 瑠衣 | 2009/08/11 7:48 PM |

またまたすいません;
私のブログでMENUをおしてLINKを押すと
記事が上にいってしまい、みれなくなってしまったんです;
よければ直し方をおしえてください;;

| 瑠衣 | 2009/08/12 5:08 PM |

告知まできえてしまいましたー

| 瑠衣 | 2009/08/12 5:10 PM |

解決しました;すいません;
多分重かったんだと思います;

| 瑠衣 | 2009/08/12 5:12 PM |

こんにちわ(^ω^)
質問させていただきます;


左側にタイトル画→に記事みたいに
したいんですけど、使うテンプレートは
flatですか??
↑わかりにくいとおもうんで、ここみてみてください!;
http://pinky-rui.img.jugem.jp/20090918_958332.png

よろしくおねがいします。

| 瑠衣 | 2009/09/18 8:10 PM |

うーん、これ、記事部分は窓状態ですか?
だったらカスタマイズ用6が近いかもしれません。

| tk | 2009/09/18 10:18 PM |

返答ありがとうございます(^ω^)
できるかぎりがんばってみます!
窓にもどすかもしれませんが><

あと窓にMENUをつけてクリックできると
そのページに飛ぶというのは
カスタマイズ8ではできないんですよね?
他のテンプレートでできるのとかはありますか?

質問ばかりですいません;

| 瑠衣 | 2009/09/18 11:36 PM |

6と8がそうですね。あれ元々同じテンプレなので。
html見れば書き方書いてあると思います。

| tk | 2009/09/18 11:40 PM |

そうですか・・ありがとうございます(^ω^)

| 瑠衣 | 2009/09/20 9:36 AM |

いつもいつもすいません;;
質問します!
サイドバーにMENUをおいています。
例えばLINKをおすと記事部分だけがLINKページに
移動するみたいなことをしたいんです

よくいみがわからなかったらすいません;

ページ全体がかわってしまうと、重いしめんどくさいんです;
どうかおしえてください(*・ω・*)

| 瑠衣 | 2009/09/27 2:03 PM |

うーん、フリースペースにLink内容書いて、サイドバーからjavascript表示、とかですね。
カスタマイズ用6にはそういうのが入ってるんですが、flatでやるのは書き換え箇所多数かもしれない。


まずhtml
</head>の上に

<script type="text/javascript" language="JavaScript"><!--
function GetMenu(tName) {
var i;
var TagName = document.getElementsByTagName("div");
var GetMenu = document.getElementById(tName).style;
if (document.getElementById(tName) == ''){ return; }
if (TagName == ''){ return; }
for(i=0; i<TagName.length; i++){
if (TagName[i].className == 'getlist' || TagName[i].className == 'getlist_view') { TagName[i].style.display = "none"; }
}
if (GetMenu.display == 'none') GetMenu.display = "block"; else GetMenu.display = "none";
}
// --></script>

を書く。

で、サイドバーのメニューリンクを

<a href="javascript:GetMenu('free1');">
Link</a>
のようにします。



<!-- BEGIN sequel -->
の上に

<!-- BEGIN freespace1 -->
<div class="getlist" id='free1'>
<div class="entry_title">{freespace_title1}</div>
<div class="entry_body">{freespace_contents1}</div>
</div>
<!-- END freespace1 -->

<div class="getlist_view" id='entry_area'>
と書き込む。


{trackback_auto_discovery}
の上に
</div>

と書き込む。

最後にcssに

.getlist {
dipslay:none;
}

と加える。
でいけないかなー、という感じです。試してみてないので細部が間違ってるかもしれませんが。
もっともトップに戻るのはページ全体変えないといけないんですよ。

ちなみに重く感じるのはテーブルレイアウトだからですよ。
flat以外ならもっと軽いです。

| tk | 2009/09/27 2:21 PM |

あ、フリースペース1にLinkの内容書いて下さいね。
フリースペース増やすのは独自タグの数字を変えたものを同じものの下に並べていけばいいです。

| tk | 2009/09/27 2:26 PM |

で、できましたー\(^0^)/感謝です!!
変えてみたらタイトル画のすぐしたに
余計な☆のアイコンがでてきちゃったんですけど
どうすればいいですか・・・?

| 瑠衣 | 2009/09/27 8:55 PM |

<!-- BEGIN freespace1 -->

これって本来見えないはずのものなので、
何か独自タグのミスしちゃってるんだと思います。
私が指示して書き込んだところ以外に

<!-- BEGIN freespace1 -->
色々かいてある。
<!-- END freespace1 -->
がありませんか? それを削除してください。

メニューにタイトルいらないなら、上でいれた
<div class="entry_title">{freespace_title1}</div>
を削除しちゃえばいいですよ。

| tk | 2009/09/27 9:03 PM |

わわわわ
ありましたーっ(゚Д゚;)

tkさんってほんとすごいですね(*・ω・*)
私はこういうの不得意なのでぜんぜんできないんですよ;Д;

| 瑠衣 | 2009/09/28 12:16 AM |

Submit Comment