カスタマイズ用　flat

<< iframe 擬似フレーム内でホイールスクロールが効かない + main + これだけは知っとけhtmlタグ >>

よくある質問集

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

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

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

■具体的カスタマイズ

スポンサーサイト

Category:-

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

| | Comment 0 | - |

Category:template

を公式のflatを元に作りました。
タイトル画の変更はhtml
左右枠の変更はcssで可能です。
あとはコメントアウトをいつもほどではないですが
カスタマイズに困らないくらいはつけてあります。

よく出がちな質問から
フリースペースを最初から搭載
ページ送りも搭載
続きを読むのタグを入れ替え済み
コメント何通の部分も入れ替え済み
って感じです。

DLはこちら。

にしても今まで二つのブログ合わせて
何十個もテンプレ出したけど
テーブルレイアウトは初めてですね。
多分、最初で最後です。
あとはplainぽい2カラムか3カラムを出せば
一通りって感じかな・・・

| 15:16 | Comment 143 | - |

スポンサーサイト

Category:-

| 15:16 | Comment 0 | - |

Comment

はじめまして。
JUGEMで使わせて頂いていますが、サイト名とサイトの説明を表示する機能はこのテンプレートにはないのですか？
出来れば表示したいのですが…（´・ω・`）
教えて下さい。

| piyo | 2007/09/23 1:05 PM |

piyoさん初めまして。

デフォルトではないです。
そういうのを希望されない方々のために作ったものなので。
表示したい場合はhtmlの



<h1 class="site_title"><a href="."><img src="http://nous.img.jugem.jp/20070822_325641.jpg" alt="site_title" /></a></h1>






を



<h1 class="site_title">{blog_name}</h1>

<p class="description">{blog_description}</p>




と書き換えれば表示されます。

| tk | 2007/09/23 2:29 PM |

遅くなりました。
置き換えたら可愛い画像が消えてしまって…
画像消さずにサイト名を表記するのは難しいでしょうか？

何度もすみません…

| piyo | 2007/09/25 12:33 PM |

こんにちは。
うーん、元々あの画像は見本用で
本来はユーザー様がそれぞれあの画像や他の画像に
サイト名をいれた画像を用意して差し替えるような
テンプレなのです。

なので背景に表示したい場合はある程度cssの知識が必要になってきます。
#headerのbackgroundとして
あの画像のURLと
repeatはno-repeat、positionは50%(center)
を加えて指定し
heightを311px以上とる、という感じでしょうか。
カスタマイズ用　などのほかのテンプレートを見ると
cssの#headerはそういう作りになっていて説明がついているので
それらと見比べながら調整なさってください。

それが難しい！という場合は
ご自分であの画像をDLして画像編集ソフトで
ブログ名を入れてしまうという手もあります。

| tk | 2007/09/25 12:47 PM |

あーっとflatはheaderがないんですね。。

ならhtmlの方にも
<div id="header">と</div>で
タイトル部分を囲ってやる必要があります。
むずかしい。。。って場合には
画像とタイトル名が重ならなくていいなら
imgタグでそのまま画像を下か上にでも書き加えてしまえばいいです。

| tk | 2007/09/25 12:57 PM |

よし、お昼が終わったので変更点を調べてきました。

htmlを

<div id="header">



<h1 class="site_title">{blog_name}</h1>

<p class="description">{blog_description}</p>




</div>

に。
cssは
#header {
background:url(http://nous.img.jugem.jp/20070822_325641.jpg) no-repeat center;
height:311px;
}
を追加です。

タイトルの色や位置はご自分でcssを調整なさってください。

| tk | 2007/09/25 1:04 PM |

なんとか出来ました（汗）
こういうのに慣れてなくて手こずりましたが、
丁寧に説明して下さりありがとうございました（礼）

タイトルの色や位置の調整、頑張ってみますね(・∀・)

| piyo | 2007/09/26 11:19 AM |

cssはなれないうちは難しいですが
慣れると簡単にデザインが変更できるので
また何かあったらお気軽にどうぞー。
ありがとうございました。

| tk | 2007/09/27 12:08 AM |

はじめまして。
カスタマイズ用flat使わせてもらってます。
左右の枠の変更なんですけど、
CSSの何処にあるか見ても分からないんです...
ごめんなさい、できれば教えて下さい。

| きいち | 2007/11/17 10:35 AM |

初めまして。
下のほうにあってちゃんと日本語で
記事部分の背景設定
サイドバーの背景設定と
注意書きがかいてあるので、下まで読んでみてください。

.back1と.back2です。

| tk | 2007/11/17 11:23 AM |

すいません、
分かりました。
ありがとうございます。

| きいち | 2007/11/17 3:17 PM |

こんにちは。
えと、背景を画像ではなく色にしたいのですが..
どうしたらいいのでしょうか；
よかったら教えて下さいっ!

| きいち | 2008/01/06 4:17 PM |

背景色は
background-color:#カラーコード;
という風に指定します。
これをbodyやback1.2など
お好きなところにいれてみてください。

| tk | 2008/01/06 4:26 PM |

ありがとうございます!!
出来ました**
また何かあったらよろしくお願いしますっ

| きいち | 2008/01/07 3:55 PM |

はじめまして
今ｔｋさんのflatのテンプレでリニューアルをしようとしています♪

そこで、どうしても分からないことがあったため、コメントさせていただきますＸ（

flatのテンプレではｻｲﾄﾞﾊﾞｰ、記事のﾊﾞｰとそのＷＥＢページの上の方に間がありますよね。
そこの間を消したいのです・・・
そのページの１番上からサイドバーなどがあるようにしたいのですが・・・

教えてくださるとうれしいです
よろしくおねがいします

| ゆき | 2008/01/19 12:55 AM |

うーん、上に隙間はなかったと思うのですが
どこか間違えて弄られてしまったのではないですか？
実際のURLを提示なさるか再DLを試されてください。

| tk | 2008/01/19 8:57 AM |

再ＤＬし、リニューアルしてみました(＾-＾*)
ありがとうございましたｖ

本当にたすかりました

| ゆき | 2008/01/19 3:47 PM |

全然読んでも分からんスけど－

まずなにおしたらいいですか？

| あンな((Д*..! | 2008/01/21 5:30 PM |

JUGEMは初心者向けではありませんので、
読んでも分からないのならカスタマイズを諦めた方がよろしいかと思います。

| tk | 2008/01/21 5:40 PM |

こんにちわ♪
また質問してしまってすみません(´；；)

コメントページに行くと画像だけが左にずれてしまいます
ｔｋさまが前書いてらっしゃったＨＴＭＬでコメントページの箇所のwidthというところを小さくしたのですが直りません

もっと小さくした方がいいのでしょうか？

| ゆき | 2008/01/25 8:28 PM |

そうですね。
他に見当たらないので。

| tk | 2008/01/25 8:40 PM |

連続ですみません(><)
前の日記のページを見るための（**/**ＰＡＧＥＳ）というところの色はＣＳＳのどこで変えれるのでしょうか？

| ゆき | 2008/01/25 10:05 PM |

css一番下の

ul.navi li{
display:inline;
}

にcolor:#●●;
を追加してください。

| tk | 2008/01/25 10:09 PM |

できました！
ありがとうございます(＾ー＾)

| ゆき | 2008/01/25 10:51 PM |

こんばんは！
わからないことがあり、コメントさせていただきます(＞＜)
コメントを書く際に、文字を打つと字が黒くなるのです。
コメントを書くときの文字色と文字の大きさを指定するにはどうすればいいのでしょうか？
教えてくださるとうれしいです

| ゆき | 2008/02/22 7:22 PM |

cssの

/*----------------------------------
　コメント欄の四角の枠線の色や背景色は
　ここで変更できます
--------------------------------------*/

input, textarea {
border: 1px solid #FFCCFF;

}

ここに
color:#すきないろ;
や
font-size:すきなおおきさpx;
をいれてください。
ただこれやると送信ボタンとかもそうなっちゃうので
別にしたいって時はその下に

textarea {
ここにかく
}
って項目を追加してください。

| tk | 2008/02/22 7:38 PM |

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

| ゆき | 2008/02/22 7:50 PM |

こんにちは!
いつも参考にさせてもらってます+゜
えっと、サイドバーの題名を
もうちょっと右にしたいんですが
どうすればいいでしょうか?

| みさ | 2008/05/17 10:01 PM |

テンプレによって違いますが
私の配布しているのだったらcssの
.linktitleの
marginの左を増やせばよりますよ。

| tk | 2008/05/17 10:10 PM |

できました！
ありがとうございます!(・ω・)

flatを使わせてもらってるんですが
サイドバーで改行すると
文字が繋がってしまいます;
で、他の人のをみると
スペースキーを使わずに
改行していましたが
どうしたらスペースキーを使わずに
改行できますか?

| みさ | 2008/05/18 3:28 PM |

<br />とかきこみます。

| tk | 2008/05/18 3:48 PM |

分かりました!!
ありがとうございました＼(^o^)／

| みさ | 2008/05/18 4:59 PM |

すみません。
コメントするところの大きさを変えるには、
どこをいじればいいのですか？
探したんですけど、見つからなくって…
教えてください。

| のん | 2008/06/22 2:45 PM |

http://nous.jugem.jp/?eid=75

これと原理は同じです。
rows colos widthの数字を弄ってください。

| tk | 2008/06/22 3:02 PM |

おはようございます。
ちょっと、問題が発生したので
よろしければ教えてください。

記事とコメントの文字の色や大きさの指定のところが
ありますよね？
そこでこのように設定しました。

.entry_more {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳゴシック", "Osaka‐等幅";
font-size: 10px;
line-height: 80%;
color: #C0C0C0;
margin: 15px 0px 10px 0px;
}

そして、line-height: 80%;のところを
80%にすると記事、コメントの文字の大きさが
共同で設定されるため
コメントの文字がくっついて読みにくくなります。
なので記事は記事で文字の大きさなどを設定できるように、
コメントはコメントで文字の大きさなどが設定できるようにするための
cssを教えてください。

とりあえずブログではかっこ悪いので直るまでコメは表示しないようにしてます。

| 優姫 | 2008/06/23 7:06 AM |

すみません、仰っている意味がよく分かりません。

まず記事やコメントを指定しているcssは
.entry_moreじゃなくて.entry_bodyですよね？
.entry_moreは追記部分のみの適用です。

また
>そして、line-height: 80%;のところを
>80%にすると記事、コメントの文字の大きさが
>共同で設定されるため

ここが一番分かりません。
line-height:80%;のところを80%にするって変えてないってことでしょうか。
それとも；をとっちゃったってことですか？
ないとは思いますが;をとったりしたらえらいことになります。
またline-heightは行間指定の為
これを書き換えてもコメントと記事の文字の大きさが変わるということはありません。
そもそも100%以下にはしない方がいいですよ。読みにくくなるんで。
http://www.syboos.jp/webcss/doc/20080527232837539.html
の例を見ればわかると思いますが
100%で重ならないぎりぎりの状態という意味です。80%にしたら重なります。

どういう状況で、何をやられたのか、さっぱり分からない状態です。
ですので、とりあえず意味が分からない部分を横によけておいて

>なので記事は記事で文字の大きさなどを設定できるように、
>コメントはコメントで文字の大きさなどが設定できるようにするための
>cssを教えてください。

の部分だけ説明すると
単にhtmlで目的の部分を囲っている<div class="なんとか">ってなっている部分を同じ名前にならないよう書き換えて
新しい名前の項目をcssに作って指定すればいいだけです。
htmlとcssの相関関係は
http://nous.jugem.jp/?eid=15
の解説をご参照下さい。

| tk | 2008/06/23 9:10 AM |

お忙しい所をすいません質問です

白の背景を別の色に変えるにはどうすればいいんですか？
後、背景を一色ではなく、水玉模様などに変える事はできるのでしょうか？

よろしかったら回答お願いします

| satu | 2008/08/08 1:53 PM |

カスタマイズ用flatですか？

記事部分とサイドバー部分ならもこもこ背景がもともと指定されているので、そのURLを用意された画像のアドレスにかきかえればいいです。
全体背景はbody部分に指定してください。

| tk | 2008/08/08 2:25 PM |

はいカスタマイズ用Flatです

それでbobyはhtmlですか？
２度もすいません

| satu | 2008/08/08 3:35 PM |

/*--------------------------------------------------
　全体の背景は以下の()内にURLをいれてください
----------------------------------------------------*/

body {
background: url();
}

と注釈がついていると思うのですが。
一応日本語は全部目を通して見てくださいね。

| tk | 2008/08/08 3:53 PM |

はい発見しました

URLの所に画像のURLを入れればいいんですよね？

http://から始まるやつですか？

何度もすいません

| satu | 2008/08/08 4:31 PM |

まずは試して見たらどうですか？
ブログのカスタマイズというより、非常に基本的なところなので、
ご自分でやってみて覚えることをお勧めします。

| tk | 2008/08/08 6:28 PM |

再度すいません
私のurlが「http://image.jugemkey.jp/user/motonatu/180" alt="profilephoto"」なのですが、このurlをやってもでてきません
何かいらない所はあるんでしょうか？

「http://image.jugemkey.jp/user/motonatu/180" alt="profilephoto」を結構いじってるんですが何の変化もありませんでした・・
あとpngなどが付いてるヤツでないと駄目なんですか？

| satu | 2008/08/08 9:46 PM |

まず、最後が.gif .jpg .pngで終わるファイルでないと
アップロードできなかったはずです。
あとalt="profilephoto"はどこからでてきたんでしょう。。。
これはURLではありません。

画像をアップロードすると
画像のURLという文字の横に四角があって、そこにhttpで始まって.gif .jpg .pngで終わるURLがかかれているはずです。

| tk | 2008/08/08 9:49 PM |

あ！先ほど解決できましたありがとうございます！
一応URLを載せます

それで先ほど成功したとたんにちょっとトラブルが・・
えっとですね・・もこもこが取れて文字が大きくなっているんですが・・
どうしたらいいでしょうか？

| satu | 2008/08/08 9:50 PM |

ページが見つかりません。URLが違うんでしょう。
ですが、大抵そういうトラブルはcssで
:や;や}を間違って書いたり消してしまった時に起こります。
自分でどこを書き換えて、何を消してしまったのか、元のものと比べて探してください。

| tk | 2008/08/08 10:20 PM |

初めまして、突然の書き込み失礼します。
このテンプレートをダウンロードさせていただいた者なのですが、
メニュー画面(プロフィールを使用するところ、URL形式が?pid=)
が表示されないんです、

サイドバーの
→→→A B O U T M O R E??
と
T h a n k s S i f t///
で使用しているのですがクリックしても記事の部分に表示されるのは
Copyright (C) 2008 JUGEM Some Rights Reserved.
だけで、文が表示されません、

多分私が必要な場所を間違えて葬ってしまったと思うのですが、
もしよければ教えていただけませんでしょうか？？
お忙しい中本当にすみません、お返事お待ちしております、

| m.a | 2008/08/15 11:53 AM |

子ユーザーは作成済みなのですよね？
プロフィール部分の独自タグは


<div class="entry">

<div class="entry_title">{profile_name}</div>
<div class="entry_body">{profile_description}</div>

</div>


なので、これをもう1個テンプレをDLしてどこに入っているのかみながら戻してください。

| tk | 2008/08/15 12:03 PM |

元あった場所に戻すと、
記事部分ではなくサイドバーに表示されてしまうため、
エントリータグの中にプロフィール独自タグを
入れると、記事部分には表示されるのですが、
コメント等が引用してしまいました、

こちら↓
http://bunny-chux.jugem.jp/?pid=1

| m.a | 2008/08/15 12:26 PM |

そんなばかなー、としか言えない状態です。


<div class="linktitle">
PROFILE
</div>
<div class="linktext">
{user_list}
</div>


と


<div class="entry">

<div class="entry_title">{profile_name}</div>
<div class="entry_body">{profile_description}</div>

</div>


は違いますよ。
落ち着いて全部見て、それでも分からないようだったら
再DLしたhtmlだけを今のhtmlに移動して、装飾しなおしたほうがいいです。
あ、エントリータグの中にプロフィールタグをいれちゃだめですよ。
独自タグがからまるとおかしくなります。

| tk | 2008/08/15 12:34 PM |

できました、
てっきり同じものと勘違いしていました。
お忙しいところご迷惑を掛けてしまい申し訳ございませんでした、
ご丁寧に教えてくださり本当にありがとうございました。

| m.a | 2008/08/15 12:43 PM |

テンプレ使わせていただいています＠
よければ質問よろしいでしょうか？

サイドとメインの間を失くしたくて

<td width="0">
<img src="./template/flat/img/blank.gif" width="0" height="0">
</td>

としたのですがちょっとだけ間が開いてしまいます。
どうやったらサイドとメインをぴったりくっつけられるのでしょうか？

http://7em.jugem.jp/?tid=3

| えみ | 2008/08/19 3:27 PM |

<td width="0">
<img src="./template/flat/img/blank.gif" width="0" height="0">
</td>

ごとちょっと削除してみてください。

| tk | 2008/08/19 5:12 PM |

できました！
本当にありがとうございました％

| えみ | 2008/08/19 7:22 PM |

こんにちは。
カスタマイズ用flatを使用させていただいています。
質問なのですが、コメントをしてくださったかたの横にある時間の文字色を変えるには、どうしたらよいのでしょうか？
それと、コメントを真ん中寄せにする方法も教えてください><

| はつね | 2008/08/25 1:04 PM |

時間はcssの
.entry_stateのcolorを書き換えます。

コメントとはコメント本文のことですか？
今のところ記事本文と共通なので、中央寄せにすると記事の方も中央によってしまいます。

{comment_description}
がコメント本文をあらわす独自タグですので
htmlでこれを囲むentry_bodyをentry_body2にでもかきかえ、
cssに.entry_bodyをコピーして、あたらしく.entry_body2の項目をつくって
text-align:center;と追加すればいいです。

| tk | 2008/08/25 1:39 PM |

出来ました**
有難う御座いました！

| はつね | 2008/08/25 2:44 PM |

突然の書き込み失礼します。
以前お世話になったものです、
記事部分を窓にすることは可能でしょうか??
もし可能なら教えていただければ幸いです。

| m.a | 2008/08/31 4:30 PM |

窓っていうのは、私のテンプレでそうなっている部分を参考にすると分かると思いますが
height:○○px;
overflow:auto;
で作ります。
これは高さを何pxと指定し、そこからはみ出た部分はoverflow:auto;でスクロールを表示して中に収納するというものです。
これを収納したい部分の前後に<div id="window">と</div>をhtmlに書き込んで区切り、cssで

#window {
height:○○px;
overflow:auto;
}

とすればいいわけです。

| tk | 2008/08/31 4:33 PM |

こんにちは!!
コメントの入力時に
文字色を変えようとcssに
カラーコードを入れても
変わりません´Д｀
一応↓が現在のcssの状態です@
/*----------------------------------
　コメント欄の四角の枠線の色や背景色は
　ここで変更できます。コメント記入欄の文字の大きさや文字色もここ。
--------------------------------------*/

input, textarea {
border: 1px solid #E9E4E0;

}

.site_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳゴシック", "Osaka‐等幅";
font-weight: bolder;
color: #E9E4E0;
text-align:center;
}

.site_title a,
.site_title a:link,
.site_title a:visited,
.site_title a:active,
.site_title a:hover {
color:#E9E4E0;
text-decoration:none;
}

.description {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳゴシック", "Osaka‐等幅";
font-size: 12px;
font-weight: bolder;
color: #E9E4E0;
margin: 10px 0px 20px 20px;
}

.entry {
margin: 0px 10px 20px 10px;
padding: 0 5px;
}

どこかおかしいところがあったら
指定お願いします(´・ω・)
あと、入力するときの文字を
小さくしたいです。

回答返お願いしますOrz

| りお | 2008/09/29 5:13 PM |

input, textarea {
border: 1px solid #E9E4E0;

}

ここの空白行に
color:#ff0000;
のように色を記入します。

| tk | 2008/09/29 6:05 PM |

ありがとうございます!
解決しました@
あと、コメント欄の枠を
もうちょっと横を狭くしたいんですが
どこをいじればいいでしょうか?

| りお | 2008/09/29 9:50 PM |

よくある質問の
http://nous.jugem.jp/?eid=75
を参照ください。

| tk | 2008/09/29 9:52 PM |

解決しました!
あと、送信ボタンの色が変わりません;
そもそもどこをいじるんですか;
違うところいじってるかもしれないのでOrz

| りお | 2008/09/29 10:04 PM |

input, textarea {
border: 1px solid #E9E4E0;

}

と一緒です。

| tk | 2008/09/29 10:08 PM |

↑と同じようにしているんですが
まったくかわりません;
なんででしょうか@
ブログお願いしますOrz
すみません

| りお | 2008/09/30 5:59 PM |

いえだから、その一箇所でコメント記入欄とボタンは一括指定なんです。
どうしたんでしょうか。灰色部分を変えたいんですか？
なら↑にbackground:#色コード;
って付け加えればいいです。

| tk | 2008/09/30 6:04 PM |

そういうわけですか￤
解決しました*

| りお | 2008/09/30 6:09 PM |

こんばんは。

リニューアルに向けてこれからカスタマイズしたいのですが、
以前通りかかったブログのような形にしたいんです。
分かりにくいかも知れませんが図にしてみました。
http://rm9xx.img.jugem.jp/20081025_102198.gif

flat、又は他にtk様の配布していらっしゃる
テンプレートで可能でしょうか？
不可能なら不可能で構いません^^

| ちか | 2008/10/25 9:31 PM |

http://nous.jugem.jp/?eid=23
の左右をいれかえたのがそうですね。

| tk | 2008/10/25 9:43 PM |

分かりました!
どうもご回答ありがとうございました＊

| ちか | 2008/10/26 12:41 PM |

http://xxchxx.jugem.jp/
上のぶろぐを見ていただければ
分かるのですが、
<td width="10">
<img src="./template/flat/img/blank.gif" width="10" height="1">
</td>
を消してないのに、中央の余白がなくなってしまいます
なぜでしょうか？？

| ちさと | 2008/11/15 9:28 PM |

<td width="10">
<img src="./template/flat/img/blank.gif" width="10" height="1">
</td>

が真ん中にないからです。

htmlで左右をいれかえたなら、




<td width="10">
<img src="./template/flat/img/blank.gif" width="10" height="1">
</td>
もちゃんと二つの真ん中になるよう移動させなければなりません。



<td width="350" class="back2">
中略
</td>
の後に




<td width="10">
<img src="./template/flat/img/blank.gif" width="10" height="1">
</td>

ですよ。

| ｔｋ | 2008/11/15 9:32 PM |

このテンプレートを使っているのですが

記事を書いて右上に作者の名前で

Posted by ○○

って出てくるのですが

これを消したいんですけど

どうしたらいいでしょうか?

| 雛 | 2008/12/07 9:59 PM |

.entry_authorの項目に
display:none;っていれたらどうでしょう。

| tk | 2008/12/07 10:10 PM |

できました！
有難う御座いました^^*

| 雛 | 2008/12/08 7:11 PM |

http://hajikerobaby.jugem.jp/?tid=21
こんにちわ★
カスタマイズ用Flatを今カスタマイズしているんですが
URLを見ていただけると分かるんですが
サイドバーと記事部分が右に少しはみ出てるんです。
いろいろ試してみましたたとえば
サイドバーともこもこサイズは200、記事ともこもこは400と指定しているんです。なので下ののを600にしました
#wrapper {
width:600px;

他にも
.linktitleの
margin: 10px 10px 0px 10px;
にしてみたりしましたが
ぜんぜん直りません・・・
どうすればいいでしょうか？？？

| リム | 2009/01/15 2:20 PM |

まずcssの
body{ overflow:hidden; }

これを消してください。
あなたのブラウザではちゃんと見れているのかもしれませんが、
最新のブラウザではスクロールバーが消えて、タイトル画くらいまでしか見えてなかったりします。文が読めません。

次に
#wrapper {
width:600px;
margin: 0 auto;
}

少ないです。
右と左の間に真中もあるのですよ。
最低でも610、できれば620にしないと駄目です。

最後に、
何の縁取りもないもこもこ画像なら、画像じゃなくて色コード指定すればいいです。

background-image:url(http://hajikerobaby.img.jugem.jp/20090115_392346.png);
background-repeat:repeat-y;
background-position:center top;

を消して
background:#色コード;
ってすればいいですよ。

| tk | 2009/01/15 2:36 PM |

700にしてもやっぱり換わりません・・・
本当にどうすれば・・・

| リム | 2009/01/15 4:18 PM |

なんつか、使ってる画像がでかい気がしますね。
サイドバーもエントリ部分も。横が広すぎます。
画像を小さくするか、サイドバーやエントリ部分の幅を広げるか、
cssのmarginとpaddingの数字をかたっぱしから縮めるかのすきなものを選んで下さい。

ちなみに前の回答に書いた背景を画像じゃなくて色にする、にすれば自動的に治るかもしれません。勝手に幅を広げてくれるので。

| tk | 2009/01/15 4:37 PM |

からーこーどはがぞうにつかっているいろと
からーこーどのいろ
がおなじにならないんで多分むりかもしれません。。。。
cssのmarginとpaddingの数字をかたっぱしから縮める
というとぐたいてきにはどうっすれば。。。。

すいません、無知で。。。

| りむ | 2009/01/15 5:01 PM |

そんな馬鹿な。それはカラーコードが間違ってるだけですよ。
cssのmarginとpaddingの数字をかたっぱしから縮める
はそのままです。

他にも
.linktitleの
margin: 10px 10px 0px 10px;
にしてみたりしましたが

ってさっきかいてましたが
これの２番目と４番目がそれぞれ左右なので
margin: 10px 0px 0px 0px;
と0にします。
これを見つけた端から全部にやっていくんですよ。
これでも治らなかったらpaddingも削る。

画像縮めるかバー広げる方が楽ですけど。

| tk | 2009/01/15 5:13 PM |

http://hajikerobaby.jugem.jp/?tid=21

paddingを消したら直りました！！
本当にありがとうございます！！！
崩れてたりしてませんか？？

| リム | 2009/01/15 8:30 PM |

tkさんこんばんは!
いつも講座参考にさせて頂いてます

カスタマイズ用flatでリニューアルを
しているのですが、

サイドバーの方にメイン画像を持って
いって上の余白を無くしたいですが、
画像の上に余白ができてしまいました

ちなみにタグを入れている場所はhtmlの
サイドバーの中身の内容部分です


<img src="画像URL"/>

それと、余白はこんな感じになってます
http://yrdxx.jugem.jp/?tid=43

入れる場所が間違っているのでしょうか(´;ω;｀)??
それと何かタグを入れれば余白が消えますかね??

お忙しいと思いますが、よろしくお願いします＞＜

| ゆの | 2009/02/07 6:27 PM |

以下サイドバーです。

の上にある
<br />
を削除します。これって改行するタグですので。

| tk | 2009/02/07 7:33 PM |

早い回答有難うございます!

やってみたらいきました!
本当にありがとうございました!

これからも参考にさせていただきます!
頑張ってください(^ω^)!

| ゆの | 2009/02/07 8:16 PM |

こちらのテンプレート使わせていただいています
カスタムの方法が書いてあって本当に助かっています。
tkさんのように自分も詳しくなれるように精進します!
これからもお世話になると思います。
かわいらしいテンプレートありがとうございます。

| mina | 2009/03/01 9:23 AM |

こちらこそありがとうございます。
最近は新しい記事を書かずにサポートを少々しているばかりですが
お役に立てれば嬉しいです。
コメントありがとうございました。

| tk | 2009/03/03 1:09 PM |

はじめまして。
加音と申します。
はじめてのJUGEMで１からここで学ばせていただいてます。
テンプレートが初めての私でも編集しやすくて、
助かってます!!

さて、質問なのですが、
タイトル画像の差し替えのことです。
カスタマイズ用 flatを使用させていただいております。
今回、tkさんが用意してくださっていたタイトル画像と
同じサイズの物を作成し、URLを差し替えました。
すると、なぜかリンクの部分が大きくなってしまったんです…。
タイトル画像周辺は触ってません。
CSSもどこがタイトル画像のところかわからず、触っていません。
何がいけなかったのでしょうか…。



<center><h1 class="site_title"><a href="."><img src="http://kamikaze-horn.img.jugem.jp/20090402_987061.jpg" alt="site_title" /></a></h1></center>






今、このようになっています。

http://kamikaze-horn.jugem.jp/
↑こちらです

お忙しいところ変な質問してしまい、
申し訳ありません…。

| 加音 | 2009/04/04 12:07 AM |

あれ、私<center>タグなんていれてました？
これなくても自動で真ん中に配置されるようにしてあったんですけど。
<center></center>は削除してください。

で、ですね。
何で真ん中によってない上にリンクが大きく見えるかというと、
実は元画像が写真の右側と下側に１センチちょっとくらい余白が入ってるみたいなんですよ。
白いからぱっと見わかりませんが、
ためしにcssの.back2に
background-color:red;
って行をつけたして背景ぬってみると、どれくらい白い部分があるか浮き上がってくるから分かりやすいです。

これ自分で画像作りました？
タイトル画像を編集しなおして、余白部分を削って再アップロードしてからURLをさしかえてください。
それで全部治るはずです。

| tk | 2009/04/04 12:32 AM |

返事遅れてしまい申し訳ないです…。

私いじってましたね、、
ごめんなさい。
ちゃんとなりました!!
実はどうしてもリンクのサイズが合わなくて
テンプレートを変えてしまったので…。
断念したテンプレートにもまた挑戦してみたいとおもいます。
ありがとうございました!!
失礼します。

| 加音 | 2009/04/06 9:55 PM |

初めましてっ。
今、tkさんのテンプレートを
カスタマイズさせていただいているんですが、
下線を消すにはどうすればいいでしょうか??

あと、記事だけスクロール?させて、
サイドバーはうごかないようにすることは
できないでしょうか？？

お返事よろしくお願いします。

| あき | 2009/04/24 4:58 AM |

何の下線だか分かりません。
cssのborder-bottomの行をかたっぱしから消していってはどうでしょう。

記事だけスクロールさせるのは.back2にheight指定とoverflow:auto;を入れればいいかと。
ただそれだけでは不恰好になりそうなので、調整が大変かもしれません。

| tk | 2009/04/24 11:09 PM |

こんにちは、初めまして。
編集しやすいテンプレートで
愛用させていただいています！

質問なのですが、
flatのテンプレートで、全体を左に寄せるには
タグのどこを編集すればよいでしょうか？

| フミ | 2009/07/17 1:19 PM |

まずhtmlの

<div id="wrapper">
<table border="0" cellspacing="0" cellpadding="0" align="center">

を

<div id="wrapper">
<table border="0" cellspacing="0" cellpadding="0">
に、center寄せ指定を削ってください。
次にcssの

#wrapper {
width: 720px;
margin: 0 auto;
}
の
margin: 0 auto;
を
margin:0;
にします。
これでどうでしょうか。

| tk | 2009/07/17 1:24 PM |

できました！
即答・わかりやすい回答
どうもありがとうございました、感謝です*

それでは失礼いたします。

| フミ | 2009/07/17 1:29 PM |

初めまして!質問なのですが、
サイドバーのフリースペースの事なのですが、
題名と点線を表示させたくないのですがどうやったら
出来るでしょうか?＞＜

| みにー | 2009/07/21 11:45 AM |

題名も表示させたくないならhtmlから対応する独自タグを消しちゃえばいいです。
確か{freespace_title数字}
こんな感じだったかなぁ……。

| tk | 2009/07/21 12:23 PM |

こんにちは。

http://xp0v0qx.jugem.jp/?tid=3

を見ていただきたいのですが
サイドバーの文字が大きくて直せません。
CSSで変えたと思うのですが
どうしたら良いでしょうか？

忙しいところご迷惑お掛けいたします。

| 婀耶 | 2009/07/21 2:21 PM |

んー。
これ元はhtmlに
<div class="linktext">と</div>があったと思うのですが、それは間違って消してしまったのでしょうか。

cssの.linktextの指定はhtmlで
<div class="linktext">と</div>の間に書かれたものにしか反映しません。
なのでこの二つで該当箇所を囲んでください。

| tk | 2009/07/21 2:25 PM |

ご返答ありがとうございます!!
直りました。
本当にありがとうございます。

直ったのですがサイドバーの右側に余白ができてしまいます。
これはどうしたら直りますか？

http://xp0v0qx.jugem.jp/?tid=3

| 婀耶 | 2009/07/21 2:37 PM |

これですね、もっと詳しくの画像にも.linktextの余白指定がかかっているからひろがっちゃうんだと思います。
.linktextのpadding:10px;を削除するか、imgタグの前で一旦</div>を書いて、もっと詳しくの画像のあとをもう一回<div class="linktext">と</div>で囲めばなるんじゃないでしょうか。

| tk | 2009/07/21 2:41 PM |

直りました。
本当にありがとうございました!!

これからも運営頑張って下さい。

| 婀耶 | 2009/07/21 2:56 PM |

ありがとうございました出来ました☆
後もうひとつ質問なのですが、コメント欄でコメントを書く時に文字の大きさや色を変えてる人を見ます。どうすれば出来ますでしょうか?
説明わかりずらいですよね；。

| みにー | 2009/07/22 8:03 AM |

カスタマイズ用flatを使っているなら

/*----------------------------------
　コメント欄の四角の枠線の色や背景色は
　ここで変更できます。コメント記入欄の文字の大きさや文字色もここ。
--------------------------------------*/

という注意書きがcssにちゃんとあるので、
ここにfont-sizeやcolor指定を入れればいいです。

| tk | 2009/07/22 2:04 PM |

返事ありがとうございます。
えっと、画像があったほうがいいと思いましたので
画像を用意してきました。
http://co2.jp/s2xx/img/hosi.gif←こんな感じに＞＜
本当説明不足でごめんなさい。
今の自分のブログはhttp://co2.jp/s2xx/img/2.gifこんな感じになっています!
コメントを打つときの文字を色やフォントサイズを変えたいのですが、
出来ますでしょうか?

| みにー | 2009/07/22 5:39 PM |

いやだから上のレスに書いてあるじゃないですか（笑）
どこが分からないんですか？

font-size:文字の大きさ;
color:#好きなカラーコード;
で変わりますよ。
自信ないなら他の項目でfont-sizeやcolor指定してあるところからコピペしてきて書き換えればいいです。

さすがにこの色ならカラーコード何？　とか聞かれても困るので
http://www.finitojapan.com/cltable.html
とか見てください。
文字の大きさは10pxとかにすれば小さいですね。これ以上小さくすると大きなモニタで見てる人は小さすぎて見えません。

| tk | 2009/07/22 5:47 PM |

２回も同じ事すいませんでした；
上のレスのはやってみたのですが、出来なかったので
説明が不十分だったのかっとおもって質問させていただきました＞＜
何回やっても何も変化がなかったです。どっかがきっと間違ってるので自分でなんとかがんばってみます。
有難うございました*

| みにー | 2009/07/22 6:43 PM |

質問は分かりやすかったのですぐに分かったのです。
何が間違っているか分からない場合はURLをはるかcssの該当部分をコピペで張っていただければ見させていただきます。

input, textarea {
border: 1px solid #枠線の色;
color:#ddd;
font-size:10px;
}

こういう感じにするんですよ。
可能性が高い間違いは、:や;のつけそこね、逆に書いている、などやその上の方でどこか}を消してしまったところがある、などでしょうか。

あとでURLを消したいってことでしたら、終わったらコメント消しますので、分からなかったらまた来てみてください。健闘をお祈りします。

| tk | 2009/07/22 6:54 PM |

いきなり質問すみません。

コメントを左寄せにするには
どうすればいいのでしょうか？？

おしえてください><

| aiko | 2009/09/29 5:08 PM |

ｍｍ。
コメント自体は普通が左寄せだと思うんですが……。
ひょっとしてコメント何通とかのところですか？

/*------------------------------------------
　記事下のカテゴリや時間部分の指定です。
　文字の大きさや色はここで指定できます。
-----------------------------------------*/

.entry_state {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳゴシック", "Osaka‐等幅";
font-size: 10px;
color: #999999;
margin: 20px 0px 25px 0px;
text-align:right;
}

のtext-align:right;を削除すればいいですよ。

| tk | 2009/09/29 9:50 PM |

そうですっ!！
できました*
ありがとうございますっ

| aiko | 2009/09/30 11:15 AM |

はじめまして、こんにちわ。

全体的に左寄せにしたいのですが、
できるでしょうか？
教えてくださいっ。

| くるり | 2009/10/13 3:24 PM |

htmlの
<table border="0" cellspacing="0" cellpadding="0" align="center">
を
<table border="0" cellspacing="0" cellpadding="0">

cssの
#wrapper {
width: 720px;
margin: 0 auto;
}

を
#wrapper {
width: 720px;
}

でなりませんかね。

| tk | 2009/10/13 3:29 PM |

なりましたっ。
こんな早くお答えくださって
ありがとうございましたっ！

| くるり | 2009/10/13 3:32 PM |

お忙しいところすいません！
記事部分の白背景が
写らないのですが
どこか抜けているのでしょうか??
回答お願いします

| りお | 2010/02/10 8:01 PM |

指定していないからですよ。
.back2の
background-image:url();
に背景画像URLをいれるか
background-color:#ffffff;
という行をつけたしてください。

| tk | 2010/02/10 8:33 PM |

解決しました！
ありがとうございました

| りお | 2010/02/10 9:02 PM |

はじめまして＾＾
質問なのですが、　COME○　（○＝コメントの数）が私のブログの記事の下のほうにありますよね。

そのCOME○という文字を記事の上の日にちの描いてある場所に移したいのですが・・
　　
2010.○月.○日 ○曜日　　　COME○
↑のように

どのタグをどこに移動させればようのでしょうか？
説明下手ですみません；；
何度か試したのですが失敗してしまって・・；

お力下さると嬉しいです・・＾＾
まってます!

| 咲希 | 2010/03/30 5:34 PM |

独自タグが思い出せないorz

えーと
http://nous.jugem.jp/?eid=73
を見るだに

COME<a href="{entry_permalink}#comments">{comment_num_only}</a>
みたいなやつですね。
これを
{entry_date}
の隣にhtmlで移動させたらどうでしょう。

独自タグリストはちゃんとしたものが管理画面にあるので
気になる場合はそっちをチェックしてください。

| tk | 2010/03/30 7:09 PM |

丁寧なご回答ありがとうございます!!
おかげで解決することができました!
本当にありがとうございました（>ω<*）

| 咲希 | 2010/03/31 8:56 AM |

こんばんは。
お久しぶりです。

あたしのブログを見て頂くと
わかると思うのですが
サイドバーの文字を真ん中寄せに
しているんです。でもなぜか上と
下にあるピンクの画像のラインだけ
右の方に伸びていて真ん中寄せに
しているはずの文字が左寄せに
なっているように見えます(´･ω･`)
これ以上サイドバーの幅を小さく
すると今度は文字が入りきらなく
なってしまうんです><;

良ければ教えてください。
よろしくお願いします^^

| 桜音 | 2010/03/31 6:59 PM |

がたがた忙しくしてて遅れました。すみません。
ちゃんとなってるように見えるので解決したのでしょうか。
まだおかしい、ということでしたらご連絡下さい。

| tk | 2010/04/04 4:06 PM |

ごめんなさい(´;ω;｀)
サイドバーの横幅を
少し広げたらきちんと
真ん中になったみたいです。

自己解決しました(*ω`*)

| 桜音 | 2010/04/07 5:27 PM |

こんにちは(*´ω｀*)
おひさしぶりです。
質問させてください。

ページ全体のカーソルとリンクに
触れたときのカーソルを変化
させたくて↓のようなタグを
HTMLの<head>～</head>の中に
入れたのですがページが変に
なってしまい,出来ませんでした;

<style type="text/css">

</style>

どのようにしたら普通に表示
されるようになりますかね??
ぜひ教えてください(´･ω･`)

| 桜音 | 2010/05/01 6:55 PM |

帰省中なのでみていないのですが
htmlにかかなくてもcssに

a { cursor:pointer; }
body { cursor:crosshair; }

って書けばいいんですよ。

| tk | 2010/05/03 10:05 AM |

こんにちは(｀･ω･´)
お返事ありがとうございます。

いまやってみたところ,ページ全体の
カーソルは変化したのですがリンクに
触れたときのカーソルがひとつも変化
しませんでした(´･ω･`)これは
どうしたら直るのでしょうか･･･??

| 桜音 | 2010/05/03 1:17 PM |

さぁ……私カーソル変えるの好きではないので、詳しくないんです。
bodyとaの順番を逆にしてみたらどうですか。

| tk | 2010/05/03 2:56 PM |

あとはaはもともとリンク色指定の行があるはずなので
そこに４-５行全部cursor:pointer;って挿入すればいいかもしれません。

| tk | 2010/05/03 2:57 PM |

こんばんは(*´･∀･｀)

リンク色指定のあるところ4～5行に
全て上のタグを入れたら出来ました!
詳しく教えて頂きありがとうございました@
とてもわかりやすくてためになりました。

またなにかあったときにはお願いします*

| 桜音 | 2010/05/03 7:18 PM |

すいません、tk様はいますでしょうか?;;
何ヶ月前が最後ですからいませんよね><
でも一応質問書いておきます、

たくさんあるんです。

o1/
こめんとの何通のところがおせない

o2/
記事をo1ぺ-じにつき一件にしたい

o3/
たいとる画が左にずれている

o4/
文字色がいろo2設定しているのにまったく変わらない

これ以外は自力でやりました;
初心者ではありません^^;
宜しくお願いします,、

| 唯 | 2010/10/03 9:47 AM |

あ、urlは
http://xchuxxxxx.jugem.jp/
です><

| 唯 | 2010/10/03 9:48 AM |

o1

aタグが存在してません。間違って消しちゃったんじゃないですか？
代わりに</a>が何故か二つもあるので、元テンプレを見てhtmlを直してください。

o2

カスタマイズの問題ではありません。JUGEMのマニュアルをみてください。
「～～～はずなのにならない」という問題の場合「やってるはず」のことが間違っていることがほとんどです。
基本設定の「記事の表示件数」はきちんと一件になっていますか？
ケータイ設定の方やカテゴリ、月別ページと間違っていませんか？

o3
ブラウザが違うからだと思いますが、タイトル画が左にずれているというレベルではありません。全体的に崩れています。
cssの
.entry_date {{display:none;
で{が重複してるせいかな。違うかな。
これ以外が原因だったら、どこがおかしいのか調べる時間がないので、タイトル画に関してだけ。
htmlだと横が310になっているのに画像は300なのが悪いんじゃないでしょうか。

あとcss、#wrapperのwidthの数字がおかしいです。
htmlの数字減らしたならこっちも減らさないと。

o4　多分、私のブラウザでだだ崩れしてるのと同じ原因ですね。
どっからかcssが無効になってるようです。
:や;や}に間違いがないか、確認してみてください。
自分はもう初心者じゃない、と思い始めた辺りの方がよくつまづくのはその辺なので。

そんな感じです。

| tk | 2010/10/03 2:47 PM |

お、お返事ありがとうございます!
01・02はできました。

03は、直っていますでしょうか?
私のところでは直っているのですが..
あと、cssの#wrapperのwidthは300になおせば
いいのでしょうか?
勝手にそう直したのですが,

04は、どこが間違ってるのか
確かめてもさっぱり分かりません…

ご回答お願いします><;

| 唯 | 2010/10/03 7:37 PM |

#wrapperは全体の横幅です。
なので、メニューの横幅+間の10+メインの幅で数字を出します。
もともと720だった時は、htmlの数字はもっと大きかったですよね？
その数字をあなたは削ったはずです。その削った分だけwrapperも削らないといけないのです。
私は計算するのが面倒なので、自分で設定した数字を足してwrapperを指定しなおしてください。
300だとメインバーの分だけでしかありません。

o4
注意箇所を明言しているのだから、注意されたことは、ちゃんと自分で確認してください。
あなたの指定している色指定、全部;がありませんよ。
他の行と比べれば何がおかしいのか分かるはずですし、このblogでもcssの指定は最後に;をつけるということは説明してあります。

| tk | 2010/10/03 7:44 PM |

あっ、わかりました!!
ありがとうございました*全部聞いたこと
直ってますよね?

| 唯 | 2010/10/03 8:07 PM |

言ったことはなおってますが、デコメ日記のリンク画像、横200pxありますよね。
htmlのサイドバーが150で設定されてるので、私から見るとはみ出して見えます。
このリンク画像、ちょっと横幅縮めたほうがいいですよ。

| tk | 2010/10/03 8:15 PM |

あ、確かにそうですね!
う-ん、サイドバーを200にしてもいいですか?

| 唯 | 2010/10/03 8:29 PM |

なんかいろ02いじったんですが
http://xchuxxxxx.jugem.jp/
↑サイドバーこんな状態になりました。
mixの文字が左にずれてるのはどうすればいいですかね?
教えてもらったと思うんですけどわかんなくなりました。

| 唯 | 2010/10/03 8:43 PM |

なんでサイドバーがまだ180なんだと。
180のものに200入れたらおかしくなって他もずれますがな。
画像を縮める気がないならサイドバー広げてください。

自分の大事なブログなんですからちゃんと算数計算してください。
画像が縮められないなら、サイドバーは200以上にする。
そしたらサイドバーの幅+間の10+メインの幅の数字をwrapperに書き込む。

これだけです。
私、同じこと何回も言ってますよ。

| tk | 2010/10/03 9:03 PM |

あと
.linktextにmarginが左右10pxずつかかってるので、
画像を縮める気がないのならこっちも弄らないとだめです。

.linktext {
font-family: "Osaka‐等幅";
font-size: 10px;
color: #ff99cc;
line-height: 170%;
margin: 1px 10px 10px 10px;
padding: 10px;

}

を

.linktext {
font-family: "Osaka‐等幅";
font-size: 10px;
color: #ff99cc;
line-height: 170%;
margin: 1px 0px 10px 0px;

}

に変更。
ただこれすると、他の文章とかの余白も消えちゃうので
画像縮める方が楽なんですけどね。

| tk | 2010/10/03 9:10 PM |

なんか変になって(こめの部分)
てきとうにもこ画設定してたら太くなったけど
できた(?)のでありがとうございました*
てか、丁寧なご説明感謝でした。

| 唯 | 2010/10/03 9:39 PM |

http://www.birkenstocksandalssale.us.com/ birkenstock sale
http://www.pandorajewelryscharms.us.com/ pandora bracelet
http://www.longchampbag.us.com/ longchamp bag
http://www.yeezyboost350shoes.us.com/ yeezy boost
http://www.nikeairvapormaxflyknit.us.com/ nike air max women
http://www.curry4-shoes.us.com/ under armour curry 3
http://www.katespadepurses.us.com/ kate spade
http://www.salomonspeedcross3.us.com/ salomon
http://www.adidasnmdrunnerr1.us.com/ ultra boost mens
http://www.jordans11shoes.us.com/ jordan retro 12
http://www.jordan11spacejams.us.com/ air jordan xi
http://www.louboutinredbottoms.us.com/ christian louboutin sale
http://www.airmax90shoes.us.com/ nike vapor max
http://www.hermesbirkin-handbags.us.com/ hermes birkin
http://www.nikeairmax-90.us.com/ nike air max women
http://www.fitflops-sale.us.com/ fit flops
http://www.kd10-shoes.us.com/ nike kd
http://www.pandora-jewelrysale.us.com/ pandora rings
http://www.pumafentyrihannashoes.us.com/ puma suede
http://www.lebron15-shoes.us.com/ lebron 15
http://www.kyrie-4.us.com/ kyrie irving shoes
http://www.pandorajewelryrings.us.com/ pandora jewelry
http://www.adidasyeezy-350.us.com/ adidas yeezy boost 350 v2
http://www.fitflopsshoes.us.com/ fitflop uk
http://www.adidas-ultraboost.us.com/ adidas ultra uncaged
ドリフトliuyuzhen

| yeezy boost 350 | 2018/05/11 11:41 AM |

よくある質問集

スポンサーサイト