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

<< トップにメニューだけ表示させる。 + main + カスタマイズ用8 >>

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

カスタマイズ用7

カスタマイズ用3をベースに小窓記事・オートリンク(iframe)
広告を並べたテンプレートです。
窓画などを張る場合には#layoutに背景指定してください。
オートリンクのURLはhtml側で変更です。
#layoutと#contentsが全体の横幅なので、カラム落ちさせないよう調節してください。


メニューはデフォルトでは非表示。
表示させてwidthを調節すれば4カラムになります。
headerに色々書き込めば全体の上部分に表示です。


DLはこちら。

| 09:07 | Comment 27 | - |

スポンサーサイト

| 09:07 | Comment 0 | - |

Comment

はじめまして(*uωu*)
カスタマイズ用7を使おうと
今編集をしているのですが、
オートリンクのやつを左に
もってくることは可能ですか?

もしできるののでしたら
やり方を教えてもらいたいです(*>д<*)

おねがいします

| ゆず | 2008/07/19 6:58 PM |

旅行先なので検証できてないのですが
cssの

#auto {
float:right;
}

のrightをleftにしてみてはどうでしょうか。

| tk | 2008/07/19 9:57 PM |

できました!
丁寧にお返事ありがとうございました☆*゜

| ゆず | 2008/07/20 2:04 PM |

カスタマイズ7を編集中なのですが、
記事部分のサイズではなく位置を移動させるにはどうすればいいのでしょうか?
記事部分のサイズはあっているのですが、窓画(layoutの背景に設定しています)に
合わせられないのです;;
それと、窓画の下に横に並んだオートリンクを設置するには、
どの位置にアイフレームのタグをつければいいのでしょうか?

| ゆり | 2008/09/21 10:23 AM |

このテンプレは、簡単に位置を移動させられるようには出来ていないのです。
なので、ちょっと知識が必要になります。

#layoutと#contentsのwidthを充分に広げ、
floatされているそれぞれの要素をpaddingで左か右を取って移動させます。

>それと、窓画の下に横に並んだオートリンクを設置するには、
>どの位置にアイフレームのタグをつければいいのでしょうか?

これが想像つきません。どのような状況なんでしょう。
現状のように記事と広告の間以外にオートリンクを置くなら、html自体の大幅な書き換えが必要になってきます。

どのようにしたいのか情報が少なすぎてアドバイスがしにくいです。
再質問の場合には実際のカスタマイズ中のURLと完成希望図を添えてください。

| tk | 2008/09/21 10:34 AM |

あー、把握しました。
#mainにmargin-topをとれば、記事部分は下にさがりますよ。
ただ記事部分とauto部分を縦並びにしたいなら、このテンプレじゃないほうがよかったかな。
横並べにしているから動かしにくいテンプレなので。
縦並べにしようとするとまたあちこち調整しないといけなくなります。

iframeタグはhtmlの

<p class="page">{prev_page_link} + {page_now}/{page_num}PAGES + {next_page_link}</p>
<!-- END page -->


</div>

ためしにこの部分に、いれてください。

</div>

これで簡単にいかなかったら、ごっつ調整が必要ですね。
あ、あとふみのスレは削除しといてくださいね。
名前を変えていても分かります。マルチポストは禁止です。

| tk | 2008/09/21 10:42 AM |

丁寧にありがとうございます。
カスタマイズ中のアドレスはURLに入たのでみてください!
完成予想図
http://www4.fumi23.com/up/03/g/159643.gif
こんな感じです。
 
一回やってみますね!
ありがとうございます。
 
23のスレ、消しました;;
ごめんなさい。

| ゆり | 2008/09/21 2:11 PM |

http://end.gonna.jp/tmpl/sky.zip
この中にhtmlとcssファイルを作っていれといたので
DL後解凍して、それぞれにはりつけてください。
htmlの下の方にオートのURLを書くiframeタグがあるので
自分でかきかえてください。

| tk | 2008/09/21 2:39 PM |

あ、cssはゆりさんの設定を引き継ぎましたが、htmlはデフォルトなので、面倒でごめんなさいですけどカスタマイズした部分はかきなおしといてください。
こめんと→commentなど。

| tk | 2008/09/21 2:40 PM |

もう1個注釈。ブラウザによってはautoのスクロールバーがなくなっちゃうので、*のoverflow:hidden;は削除しましたが
横スクロールバーが気になるなら画像の横幅を減らすか、別のブラウザでautoがかけなくてもいいよーっていうなら戻しても平気です。

| tk | 2008/09/21 2:44 PM |

ありがとうございます。
DLして、そのHTMLとCSSに変更してみました。
スクロールバーを、小窓(記事部分)のみ変更するにはどうすればいいのでしょうか?
それとlayoutに書いた窓の縦幅をもうすこし広くしたいのですが…

| ゆり | 2008/09/21 7:21 PM |

contents .main .padのところにスクロール指定をいれてみてください。
縦幅もそこで調節します。基本と変わらないのでcssの注意書きを参考にしてください。

あとhtmlのコメント欄の書き換えに失敗しているようですよ。
消しちゃいけない文字を消してコメント欄に飛べなくなっているみたいなので、確認してください。

bodyにpinkチェックだけの背景を指定すれば、白い部分もピンクになります。

| tk | 2008/09/21 7:28 PM |

>それとlayoutに書いた窓の縦幅
これがスクロール部分のことではなくて、画像を張っている全体のことでしたら、layoutにheightの行をつけたして、#contentsのmargin-top:140px;の数字を増減させて高さを調節します。

| tk | 2008/09/21 7:29 PM |

本当にありがとうございます!
コメントも直せました。

>それとlayoutに書いた窓の縦幅
これがスクロール部分のことではなくて、画像を張っている全体のことでしたら、layoutにheightの行をつけたして、#contentsのmargin-top:140px;の数字を増減させて高さを調節します。
 
をやってみたら、記事の窓、広告が下に下がってしまいました;
CSSいじったのですがどこをいじったのかわからないのですが、どこかわかりますか?
 
Commentの題名部分と、(トラックバックは消しています。)
Let's commentを細字にしたいのですが、どうすればいいですか?

| ゆり | 2008/09/21 7:47 PM |

heightとは、縦の高さを意味します。

height:240px;
top:155px;
こんなの書いちゃ駄目ですよ。topの行は削除です。
縦はどう考えても240px以上あります。
この画像の高さが550pxくらいありますよね? それより小さくしてはいけません。
また

#contents {
float:right;
width:750px;
margin-top:140px;
height:260px;
}

については140を増減、つまり増やしたり減らしたりしろといったのであって、こちらにheightをつけたせという意味ではありません。
よく書かれていることを読んで、違うことをやらないでくださいね。

コメントの部分は.entry_titleと共通です。bolderをnormalにしてください。

| tk | 2008/09/21 7:57 PM |

ちなみに
>それとlayoutに書いた窓の縦幅をもうすこし広くしたいのですが…

これがどういう意味なのかよく分かりません。
私が上に書いているのは、もっと大きな窓画を張りたい場合、という意味です。
スクロール部分を縦に大きくしたいというなら7:28 PM のレスに書いてある通りです。
このどちらでもないなら、もうちょっと分かりやすく説明してください。

| tk | 2008/09/21 7:59 PM |

ありがとうございます!コメントの部分できました♪
7:59(上のコメント)のようにしたいというわけではなく、
窓画像はもともと1024×609ピクセルで作っているのですが、
そのサイズで窓画が表示されないので、表示できるようにするにはどうすればいいですか?
という意味です。分かりにくい説明でごめんなさい;
(今は1020×400ピクセルぐらいです..なぜ切れているのでしょうか?)
記事部分の窓のサイズは丁度良くできたので、
後は上5行ができればほぼ完成なんです!

| ゆり | 2008/09/21 8:12 PM |

表示されてますよ。ちゃんと609pxです。
あのですね。ご自分でちゃんと画像を見てください。
窓画はたしかに609pxの大きさですが、ピンクの部分は400pxくらいしかありません。
あとは、画像自体が上下に白い部分があるんです。
つまり、
縦600pxの画像のうち、この画像の上下には100pxくらいずつのただ白いだけの空白があるわけです。
なので、画像を作り直してください。ただこれだけです。

あと、今は何かすごい崩れ方してますが、消しちゃ不味いところでも消しちゃったんじゃないでしょうか。気になるならバックアップを見ながらなおしてくださいね。私にはどこを変えたか分からないので。

| tk | 2008/09/21 8:44 PM |

あ、画像が悪かったのですね><
CSSをDLして上書きしたのでそれを忘れていました。
画像変えたらできたのですが、その画像左側に5mmくらいの白い余白ができてしまいました。説明、本当にありがとうございます!
で、この白い余白なのですがこれって、消せるのでしょうか?これは、画像が悪いのではないです。
 
後、その「何かすごい崩れ方」は一応微妙に直ったのですが、上めっちゃ余白があるので、どこの数字をいじったらいいのでしょうか?

| ゆり | 2008/09/21 9:25 PM |

css

#headerのheightの行を削除。

#contentsの
margin-top:200px;
の数字を減らす。

#contents #main .pad
にはheightの行があったはずなんですが、消しちゃったのですか?
あれがないとおかしくなりますよ。
バックアップはこまめにしてくださいね。

| tk | 2008/09/21 9:32 PM |

空白は単にゆりさんの画面が画像より大きいからじゃないですか?
気になるならbodyにでもピンク背景を指定すればいいです、って前にもいいましたね。

| tk | 2008/09/21 9:34 PM |

こんにちは^^
いつもtk様のJUGEM講座を参考にさせて頂いております。

私は今、カスタマイズ用7をお借りして、
自分のブログスキンを作成中なのですが、
完成図は、
http://mikazukibook.img.jugem.jp/20081012_528546.png
↑のようにしたいのですが、
http://mikazukibook.img.jugem.jp/20081012_528544.png
どうしても、↑のようになってしまい、全体的に崩れてしまいます。
タイトル画を記事横(画面左)に寄せることは可能でしょうか?

お忙しいとは思いますが、お返事お待ちしております。

| こころ | 2008/10/12 2:00 PM |

実際にカスタマイズ中のURLを見ないとちょっと分かりませんが、
このテンプレは窓その他の位置を簡単に移動できるようにはなっておりません。

#layoutの横幅を充分にとって、タイトル画は#layoutに背景指定、
(タイトル画+記事+オート+広告分)
次に#contentsの横幅を充分にとる。
(記事+オート+広告分)

で調節してみてください。

| | 2008/10/12 2:38 PM |

こんばんは。
なんとか解決することが出来ました^^
ご丁寧な解説、ありがとうございましたm(_ _)m

| こころ | 2008/10/13 7:52 PM |

こんばんは、
いつも講座参考にさせていただいております*
わからないことがあるので質問させていただきます
カスタマイズ用7を編集しているのですが右側の窓の位置が右に行ってしまって左にもってくることができません;
どこを調整すればよろしいでしょうか?
それとHTML・CSS共に変なところがあるかもしれないので教えていただけるとありがたいです><

| 夏樹 | 2009/03/22 9:19 PM |

これは……どこから勘違いをただせばいいのか。
まず広告と右のウィンドウは全体の右端にいくようになっています。

なので#layoutや#contentsのwidthを馬鹿でかくしているとすんごく右にいってしまうのです。

あとですね。
#contentsのfloat:right;
を消してabsolute系の指示をいれたのは何故ですか?
ここの講座を見たのならあれはカスタマイズ2用です。7でやらないでください。
cssは全部元に戻してカスタマイズしなおした方がいいと思います。

あと#layoutのwidthより#contentsのwidthが大きくてはいけません。
最低でも同じ数字にすること。これも変なことになります。

| tk | 2009/03/22 9:31 PM |

ご指摘ありがとうございます。
もう一度講座をよく見ながらカスタマイズし直してみます。
ありがとうございました^^

| 夏樹 | 2009/03/22 9:53 PM |

Submit Comment