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

<< 記事タイトルと日付を横並びに + main + タイトルの左にアイコンを入れる。 >>

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

トップページでもこもこから中身がはみ出る。

デフォルトより幅を狭くした時などに起こる現象です。
えー、これ結構面倒なので、あまり狭くしないでください(笑)
と言っていても仕方ないので、どこを直すべきかメモを。
類似質問として
・flat系のテンプレの幅を変えたい。もこもこ調整。
・コメントを開くともこもこ枠とずれる!
もご参照下さい。


1.大きすぎる画像や文字列がないか調べる。
タイトル画や半角URLの文字列、
改行しないで画像と文字を続けたりすると中身が
幅をおしひろげてしまいます。


2.サイドバーがはみ出る場合。
cssの.linktitleと.linktextのmarginを弄ります。
margin: 0px 10px 0px 10px;
となっている場合
順番に上 右 下 左の外側の余白を指定しています。
なので2番目と4番目の数字を増減させてみてください。
ただしあんまり狭くするとカレンダーではみ出ます。
カレンダーの直し方は
http://www.fumi23.com/to/l07/h/21475.html
参照のこと。阿檀様ありがとうございます。


3.記事の方がはみ出る。
まずcssの
.site_titleの
padding: 20px;

.entryの
padding: 20px;
を削除してみてください。
左右40pxずつ余白を取るって結構大きいので。


これで直らない場合は
.entry_title
.entry_author
.entry_body
.entry_more
.copyright
のmarginをさっきと同じ様に右と左を削ってみてください。


更に駄目な場合は.back2に
padding:0 10px;
を追加して左右の内側余白を取り、
background-color:#fff;を削除。
width:●●px;←tdの幅より20数字を減らしてください。
を追加してみるという手も。


これでもどうしても収まらない!って時は
ああ、小さすぎるんだな・・・・・・と諦めてください。
何という投げやり講座。

| 10:47 | Comment 34 | - |

スポンサーサイト

| 10:47 | Comment 0 | - |

Comment

http://xxkiralaxx.jugem.jp/?tid=4

はみでるって言うより
右に寄ってしまいます。
記事部分の幅が狭いんでしょうか?

| ちえ | 2008/03/01 1:17 PM |

狭いですね。
あの3つ続いている画像やタイトル画がでかいっていうか。
.back2のpaddingの数字を減らしてみたらましにはなるでしょうが
それでも狭いかもしれません。

| tk | 2008/03/01 1:24 PM |

記事部分の横幅広げました。
そしたら、サイドバーのもこもこが
何か変になってしまいました。

サイドバーの横幅も広げるべきですか??

| ちえ | 2008/03/01 2:02 PM |

うーん別に変になっているようには見えませんよ。

| tk | 2008/03/01 3:01 PM |

カレンダーのところがはみ出ているので
直したいのですが
URLをクリックしてもページが出ないので
教えてもらえますか?

| 流榎 | 2008/04/01 9:59 PM |

ぐはっ、おちちゃったんですか・・・・・・
かなり面倒なので、だが断るとか言いたいくらいなんですが一応。

.calendar

background: #ffffff;を削除
margin: 1px 10px 20px 10px;の10を減らしたり増やしたりして調整。

.cellと
.weekdayのwidth:25pxの数字を減らす。

| tk | 2008/04/01 10:24 PM |

返事遅れました。
できました!!

| 流榎 | 2008/04/05 6:57 PM |

こんなときってどうすればいいんですか(;ω;)
全部はみ出ちゃってるんです...

| Aya | 2008/07/28 12:15 AM |

もこもこのサイズがよくありません。
htmlとcssの横幅をみてあわせないといけませんよ。

<!-- サイドバーの横幅はここで指定します。
 もこもこ背景はcssの.back1に記入箇所があります -->

<td width="240" class="back1">

とかいてあるのにwidth 200pxしかないもこもこを指定してありますし

<!-- 記事部分の横幅はここで指定します。
 もこもこ背景はcssの.back2に記入箇所があります -->

<td width="460" class="back2">

とかいてあるのに同じ200pxのもこもこを指定してあります。
ちゃんと横幅が違うもこもこを二つ作って
数字をあわせてください。htmlとcssをよくよめばわかるはずです。

| tk | 2008/07/28 12:44 AM |

そうでしたか!
ありがとうございます!!
ですが..
ちゃんと違うもこもこを2つ作ったのにまだずれているのってなぜですか?
教えて下さい*><*

| Aya | 2008/07/28 1:15 AM |

自分でじっくり考えてやったら出来ました!!
どうもありがとうございましたっ(^ω^)

| Aya | 2008/07/28 1:27 AM |

ありゃ。
ところどころおかしくなっちゃってますね。

.entry_date {
font-family: "Verdana";
font-size: 10px;
font-weight: normal;
color: #F97DA6;
margin: 10px 30px;}←この}がいらない
padding-bottom: 3px;
text-align:right;
border-bottom: 1px dotted #FFD2C1;
}

のように、一番最後じゃないのに
margin: 10px 30px;のあとに}がついちゃってるところがいくつかありますので
そこを削除すれば直りますよ。

| tk | 2008/07/28 9:49 AM |

凄いです(^ω^)
}が余分についていました!
ありがとうございました!!

| Aya | 2008/07/28 2:51 PM |

今度はなんだよ、って感じですが何度もすみません(__)
色々動かしてたらもこもこが見えなくなっちゃったんです...
どうすれば元に戻るんですか??

| aya | 2008/07/28 3:33 PM |

さっき書いた

>一番最後じゃないのに
>margin: 10px 30px;のあとに}がついちゃってるところがいくつかありますので

がまだいっぱい残ってますよ。
そのせいでcssが効いてません。

ul {
margin: 10px 30px;}
padding: 0px;
list-style-image: url(http://01candy.img.jugem.jp/20080727_38907.png);
}

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

.entry_date {
font-family: "Verdana";
font-size: 10px;
font-weight: normal;
color: #F97DA6;
margin: 10px 30px;}
padding-bottom: 3px;
text-align:right;
border-bottom: 1px dotted #FFD2C1;
}

.entry_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 10px;
font-weight: bolder;
color: #666666;
margin: 10px 30px;}
}

.entry_author {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 10px;
font-weight: normal;
color: #666666;
margin: 10px 30px;}

}

.entry_more {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 10px;
line-height: 170%;
color: #666666;
margin: 10px 30px;}
}

書ききれないんで以下は省略しますが、これ以外にもあちこちにあります。自分で探して一つずつ30pxの後の}を消してください。

あとback1とback2

background-image;url(http://01candy.img.jugem.jp/20080728_39256.gif);
じゃなくて
background-image:url(http://01candy.img.jugem.jp/20080728_39256.gif);

です。;は行の最後。:が行の途中。これ間違えると効きません。

| tk | 2008/07/28 3:39 PM |

トップページは大丈夫なのですが追記やコメントに行くとタイトル画が左に行ってしまってうまく表示されません。
どうすればなおるのでしょうか?

| 怜菜 | 2008/08/18 3:11 PM |

あっなおりました…
お手数をおかけしました。

| 怜菜 | 2008/08/18 3:13 PM |

こんにちは、以前、記事の背景でお世話になった、ちなです。
(覚えていますか?)
改名したんです。

本題に入りますが、コメントをクリックすると、
もこもこからはみ出るんです。
この記事を読んだんですが・・・よく分からないんです;;
詳しく、説明してくれくれると嬉しいです^^

| 杏里 | 2008/09/20 6:55 PM |

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

こっちの方です。

| tk | 2008/09/20 7:45 PM |

初めまして!
あの、MIXの部分のaboutとkissが重なっちゃってるのを直したいんですが・・・。

あと、どうしても記事の文字がもこもこからはみでてしまい、直す方法が分からなくて・・・。

| mami | 2008/10/07 9:00 PM |

マルチポストは禁止です。
ふみでkita様がご相談に乗ってくださっているのですから、あちらで答えるのが礼儀ではないでしょうか。

| tk | 2008/10/07 9:05 PM |

そちらの方法ではよく分からなくて・・・。
もしマルチポストが禁止ならあちらのスレッドを削除させていただきます。

| mami | 2008/10/07 9:13 PM |

すみません;kitaさんのことを考えればたとえ難しい説明でも
耳を傾けるべきでしたね;
向こうで頑張ります。
すみませんでした。

| mami | 2008/10/07 9:39 PM |

こんにちは!

リニューアルをしていて、サイドバーにタイトル画を張っているんですけど
http://xchamxx.jugem.jp/?tid=13
こちらです↑
左よりになっちゃっていて、真中に画像をもってくることはできませんか?

| なのは | 2009/03/22 11:14 AM |

まずcss .linktextの
padding: 10px;
を削除。

でkissのバナーを4個ずつで<br />いれるようにしてみてください。
バナーが横幅を取りすぎているので右に拡張されちゃってます。

| tk | 2009/03/22 11:40 AM |

質問します;;
サイドバーにタイトル画をおいてるんですけど、
タイトル画が一番上までくっつけさせられますか?
多分、フリースペースの文字が邪魔なんだとおもいますけど;;

あと...サイドバーの文字が←によっちゃってるので
中央にできますか??

よかったらおしえてください∩^ω^∩

| 瑠衣 | 2009/07/12 4:07 PM |

まずhtmlの

<br />

<!--以下サイドバーです。
 並び順を変えるには、 BEGIN ENDタグごと移動させてください-->


の<br />を削除してください。
で今現在フリースペースに画像を張ってあるみたいですが、
<!--以下サイドバーです。
 並び順を変えるには、 BEGIN ENDタグごと移動させてください-->
のすぐ下に
<imgタグを移すことをお勧めします。

サイドバーの文字はcssの
.linktext{

}

の{}の中にmargin-left:1em;
とか書けば左に隙間開きますよ。
タイトルも右にずらしたい場合は.linktitleにも
margin-left:1em;を挿入してください。

| tk | 2009/07/12 4:48 PM |

返信ありがとうございます(*∩・ω∩)
できました!!理想どうりです.*

| 瑠衣 | 2009/07/12 5:58 PM |

サイドバーの背景が
表示されません;

margin: 0px 10px 0px 10px;
を増減させているのですが・・
見てみてください(´・ω・`)
お願いします

| りお | 2010/05/05 6:00 PM |

cssの注意書きをよく読んでください。
背景設定がしてありませんよ。

| tk | 2010/05/05 6:02 PM |

すいません!よく
読んでいませんでした・・
お忙しい中すいませんでした;

| りお | 2010/05/05 6:13 PM |

何度もすいません

背景を白のみに
するには背景設定は
どうすれば良いので
しょうか?

| りお | 2010/05/05 6:18 PM |

background-color:#fff;
です。こういったことを調べたいならcss講座を参照ください。

| tk | 2010/05/05 6:23 PM |

できました!
余分な時間を
すいませんでした;
ありがとうございます

| りお | 2010/05/05 6:27 PM |

Submit Comment