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

<< メニュー画面を作りたい + main + 小窓の横幅とスクロール(修正) >>

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

C-MAP アイフレ(もどき)

12/20追記。
配布テンプレの広告の位置を変えたので
広告の位置修正記述をいれました。


11/30追記。
配布テンプレの広告の位置を変えたので
テーブルタグの挿入位置も変わりました。

スクロールバーを弄らない人はtableタグ挿入の必要はありません。


positionを使った範囲内にoverflow:auto;で擬似フレームを
作ると、Fx2以外で中のマウスホイールの挙動が怪しくなります。
その為謎のテーブルタグを挿入させますが
ご了承下さい。自分でも何でか分からない。。。
しかもそれでもoperaは動かないし! もう仕様だ仕様!
貴女の忍耐に感謝致します。thx


1.元テンプレを用意する。
 私の配布しているカスタマイズ用2を使います。
 これをDLしてください。


2.C-MAPタグを用意し、画像をアップします。
 これはさすがにサポート外なのでご自分で用意してください。


3.html編集で<div id="layout">の下に
C-MAPタグをいれます。

<div id="layout">

<img src="http://end.gonna.jp/tmpl/ces2221.jpg" usemap="#ces2221" border="0" alt="cback" />
<map name="ces2221">
<area shape="rect" coords="23,225,75,269" href="./?pid=2" />
<area shape="rect" coords="66,270,125,296" href="./?pid=1" />
<area shape="rect" coords="45,300,97,333" href="./?pid=3" />
<area shape="rect" coords="475,186,475,186" nohref />
<area shape="default" nohref />
</map>

こんな感じですね。
JUGEMはxhtmlなのでタグは小文字に直して
閉じタグ(/)を入れてますが
そうでなくても多分動きます。
alt属性などはめんどいので省略。
文法気にしてる人は入れるといいです。



4.htmlにテーブルタグを入れます。


<div id="main">
<div class="pad">

の下に


<table>
<tr><td>

と書き込みます。
次にずっと下がって


</div>
</div>
<!-- メインカラム内終了 -->

の上に


</td></tr></table>

と書き込みます。


5.css編集に入ります。


・#layoutのwidthをC-MAP画像の横幅と同じにします。
・#layoutにposition:relative;という行を追加します。


・#contentsのfloat:right;という行を削除します。
・#contentsにposition:absolute;という行を追加します。
・#contentsにtop:●●px;という行を追加して、
 記事部分の上からの距離を指定します。
 (始点はC-MAP画像の左上からです)
・#contentsにleft:●●px;という行を追加して、
 記事部分の左からの距離を指定します。
 (始点はC-MAP画像の左上からです)
・#contentsにz-index:3;という行を追加します。


・#side1にdisplay:none;という行を追加します。


・#contents #main .padのheight:300px;の数字を調整し
 好きな記事部分の高さを指定します。
・#contents #main .padのwidth:400px;を好きな記事幅に変更します。
・#adsのmargin-top:●●px;を重ならない数字に増やすか、
#adsを{
position:absolute;
right:0;
bottom:0;
}
のように右下固定にします。
(rightをleftに変えれば左下固定になります。
これで出来上がりです。


スクロールバーの透過はサポート外なので
23で過去ログでも調べてください。

| 10:04 | Comment 61 | - |

スポンサーサイト

| 10:04 | Comment 0 | - |

Comment

すいません!
えっと
“画像をアップします”って言うのは
どうすればいいんでしょうか?
C-MAPをくっつけていないpng画像をアップするんでしょうか
それともFTP?とかいうのをやるんですか?
何もわかんなくてすいません

| あきんた | 2007/12/19 9:31 PM |

まず、C-MAPで作られるのはhtmlタグです。
画像はご自分で用意したものです。
タグがくっついた画像というものは存在しないので
普通に画像をアップロードしてください。

C-MAPは3でhtmlに書き込んでいます。

| tk | 2007/12/19 10:05 PM |

なんか全部壊れました・・・もうわかりません・・・。

| あきんた | 2007/12/20 7:55 PM |

ああ、広告について書き足しておくのを忘れました。
申し訳ありません。

#adsのmargin-topの数字を増やしてかさならないようにするか

position:absoluteをつかって
右下や左下固定に書き換えてください。
元エントリに書き足しておきました。

あとは
<IMG src="お正月リニュ.png" usemap="#お正月リニュ" border="0">
このpngをアップロードしてそのURLに書き換えれば
いいかと思います。
JUGEMでアップできないほど容量が大きい場合は
直リンクしても違反にならないサーバを探すか
pngではなくjpgに変換してみてください。

| tk | 2007/12/20 8:25 PM |

あぁーできました!!
ほんとにありがとうございました!

| あきんた | 2007/12/21 7:28 PM |

何とかなってよかったです。ありがとうございました!

| tk | 2007/12/21 10:43 PM |

こんにちは。
カスタマイズ6にコメントが出来無かったので
こちらに質問します。

全体の背景→body、background-image:url();
窓画→header、background-image:url();
このような設定方法で良いんですか?
だとしたら、headerの説明部分に

「・タイトル画像を背景で張りたい。
→background-image:url(); の()にURLを記入してください。
 またwidth:400pxの400をタイトル画像の横幅より大きく、
 height:200px; の200をタイトル画像の高さより
 大きくしてください。」

とありますが、width:400px・height:200px;は
何処にあるんですか?
自分で追加してみたんですが、
窓画が表示されません。
(↑のアドレスを見て頂いたら分かると思います)

どうすれば良いでしょうか?
長文すいません。

| ちえ | 2008/02/14 3:46 PM |

アドレス記入するの忘れてました。
http://xxkiralaxx.jugem.jp/?tid=6
こちらです。

| ちえ | 2008/02/14 3:47 PM |

カスタマイズ用6は
エントリにも書いてある通り
>タイトル画は使用しないという前提での作りです。

他にも同エントリには
>bodyに繰り返し背景を敷き詰めたい場合は、ワンポイント背景は
>#layoutの方に張ってください。

とかいてありますので
これを踏まえて再チャレンジしてみてください。

| tk | 2008/02/14 3:52 PM |

タイトル画を使用しない。
という事は、窓画を背景として
設定するという事ですよね??
それでは、窓画と背景画を
2つ同時に設定するという事は
無理な事なんですか?

bodyに窓画を設定して
background-repeat:no-repeat;としました。

layoutに背景画を設定してみましたが、
今度は窓画が表示されて
背景が真っ白になってしまいました;;

| ちえ | 2008/02/14 4:25 PM |

いや

他にも同エントリには
>bodyに繰り返し背景を敷き詰めたい場合は、ワンポイント背景は
>#layoutの方に張ってください。

ってかいてあるじゃないですか(笑)

bodyに全体背景を張って
ワンポイント=窓画はlayoutに

しきつめるべきbodyに
background-repeat:no-repeat;
をしているのが間違いです。

| tk | 2008/02/14 4:28 PM |

あ〜!
そういう事ですか;
設定しました。

今度は窓画が途中で切れてしまいます。
何か質問攻めですいません。

| ちえ | 2008/02/14 4:39 PM |

うーん、窓画の割りに窓がちっこいんでしょうね。
#layoutにwidthとheightの行を足して
窓画の大きさ以上にするといいですよ。

| tk | 2008/02/14 4:47 PM |

widthとheight追加して
窓画以上にしましたが
変化がありませんでした;

| ちえ | 2008/02/14 4:58 PM |

まぁまぁ落ち着いて他の行を見てみてください。
;
ってのが最後についてるでしょう。
それがないと読み取ってくれないんですよ。

| tk | 2008/02/14 5:07 PM |

出来ました!
ありがとうございます。

あの、よく皆さん画面の右下とかに
ワンポイントの画像設定されてますけど、
そういう事も出来るんですか??
窓画をワンポイント背景として
設定した場合は無理なんでしょうか??

| ちえ | 2008/02/14 5:22 PM |

んー。難しいですね。
けど雑な手でいいなら

<body onload="javascript:initval();">
のすぐ下に
<img src="ワンポイントの画像URL" style="position:absolute;top:上からのpx;left:左からのpx;z-index:999" />
って書くと好きな位置に画像はおけますよ。

| tk | 2008/02/14 5:30 PM |

ありがとうございます。
<body onload="javascript:initval();">を
今必死で探してます。
何処にあるかヒントお願いします。

| ちえ | 2008/02/14 5:41 PM |

今見付かりました!!
挑戦してみます!

| ちえ | 2008/02/14 5:43 PM |

ほほい。pxは大事なのでちゃんといれてみてください。
(分かりにくい書き方ですいません)

| tk | 2008/02/14 5:47 PM |

http://hajikerobaby.jugem.jp/?tid=11
初めまして、うえのURLみてもらいたいんですが
記事がないんです(ピンクの四角の中)
、それにメニューのロゴをクリックしても
メニューが記事の所に表示されるはずなのに来ないんです。
背景も固定されずに動きますし
広告もありません、もう何が何だかわからなくて・・・
おしえてください。
あとスクロールバーもなくしたいです
お願いします

| 魔血 | 2008/04/01 8:24 PM |

うーん、どこからつっこめばいいのか。
まずですねC-MAPは背景じゃないんです。
普通にバナーを張るみたいに画像を表示させているだけ。

なのでこれはC-MAPが大きすぎる事が問題です。
記事がその他が裏側にきちゃってるんですね。
不精しないで背景は背景で表示させて
右側のクリックさせる部分だけC-MAPにしたほうがいいですよ。
で、C-MAPは背景じゃないので当然ながらスクロールすれば動きます。IE6ではどうしようもないです。

あとスクロールバーをなくすのは
広告表示とからんで規約違反になる可能性があるので
私はサポートしていません。

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

http://hajikerobaby.jugem.jp/?tid=12
すいませんこっちです

| 魔血 | 2008/04/01 8:58 PM |

右側のクリックさせる部分だけC-MAPにしたほうがいいですよ。

とは背景は背景で固定してクリックするところだけC-mAPってこと
ですよね??
えーと、そのじゃークリックすところだけを 背景固定
している画像の上に位置指定することはできるのですか??
(クリックしているところを右の四角い所に位置指定)

| 魔血 | 2008/04/01 9:05 PM |

c-mapのimg srcタグに
usemap="#90b18a3e" border="0"の後ろにでも
style="position:absolute;top:○○px;left:○○px;"
って挿入すればできますよ。
数字は自分で弄ってください。

でも今見たら記事表示されてますね。

| tk | 2008/04/01 9:09 PM |

ありがとうございます〜!
はい、記事は何とか自分でできました。
本当にありがとうございます

| 魔血 | 2008/04/01 9:13 PM |

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

すいません、またきました
C-mapはできたんですが今度は
記事がでてこなくなっちゃいました
どうすれば・・・まいどまいどすいません・・・

| 魔血 | 2008/04/01 9:53 PM |

さぁ・・・・・・
むしろ何をしたのか私がお聞きしたいくらいなんですが。

cssの#contents #main .padのheight
少なすぎませんか。

| tk | 2008/04/01 9:58 PM |

すいません、何回も・・・

#contents {
position:absolute;
top:300px;
left:298px;
z-index:3;
}

にしたら記事が消えて
float:right;
だったらきじがきえません
上のは絶対に変えないといけないんですか??
http://hajikerobaby.jugem.jp/?tid=13

| 魔血 | 2008/04/02 6:34 PM |

floatでご希望のレイアウトになっているなら別にいいんじゃないでしょうか
position:absoluteは単に
レイアウトが分からない人でも簡単に位置調節がしやすいってだけなので。
私が自分のHP作るときはまず使いません。

| tk | 2008/04/02 6:36 PM |

そうなのですか!!
あとF11とか画面を大きくしたらC-mapも動きますよね??
動かさなくすることはやはりダメなんでしょうか??
画面が大きいとずれちゃうんです><

| 魔血 | 2008/04/02 6:43 PM |

position:absoluteでちゃんと固定できてれば動きません。
あとは背景部分も含めて綿密に全部位置を調整するかですね。

| tk | 2008/04/02 6:50 PM |

どうもありがとうございました

| 魔血 | 2008/04/02 7:00 PM |

初めまして。
いつも参考にさせて頂いています。


質問なんですが、、、
URLを見ていただくと分かると思うんですが、
画像が上からかなり隙間が開いています;

いろいろ見たんですが、どうすればあの隙間が
無くなるのか分かりません、、、

どうすればいいんでしょうか?!
お願いします。

| あき | 2008/04/19 6:43 PM |

css #layoutの注意書き

・上からの隙間をもっと開けたい。
→margin: 50px auto;の
 50pxを増やしてください。減らせば上にずれます。

を参照して直してください。

| tk | 2008/04/19 6:46 PM |

あっ!
書いてあるのに気付かなくて、、、
すみませんでした;

ありがとうございました!

| あき | 2008/04/19 6:51 PM |

初めまして、tkさん。
LaDolceVitaというブログのありすと申します。

http://lalala-xx.jugem.jp/?tid=6を見て下さい。
記事の文字がHTML・CSSをいじってる間に
いつの間にか太くなってしまったのですが、
原因がどこだかわからないのです(´・ω・`;;)
わかりますでしょうか?
教えてくださると助かります。

| ありす | 2008/10/06 5:54 PM |

<h1 class="mix">
が原因だと思います。理由がないならこれを削除で。

| tk | 2008/10/06 5:59 PM |

わ〜!直りました!
tkさんに、本当尊敬です♪
教えてくださって、ありがとうございました!

| ありす | 2008/10/06 8:23 PM |

こんにちは、ありすです。
いつもお世話になっておりますm(_ _)m
早速ですが…
http://lalala-xx.jugem.jp/?tid=6を弄っているのですが、
上に白い空白があるので、それをなくすにはどうすればいいのでしょうか?
どうぞよろしくお願いします。

| ありす | 2008/10/19 11:50 AM |

すみません、自分の力で解決しました。
無駄なコメントすいませんでした。

| ありす | 2008/10/19 12:20 PM |


はじめまして、はるかです

いまリニューアルしようと思って、
今は真ん中に記事やタイトルがあって、
タイトル画をクリックしたらMENUに行くようにしてるんですけど
次は「flat」を使おうと思ってるんです。

で、新しく作ったタイトル画をUPしたら、
左に寄ってしまって枠からはみ出てしまったんです。

記事は左寄せにしたいので、
タイトル画だけを真ん中寄せすることはできませんか?
もし此処の講座に書いてあったら申し訳ありません;

| はるか | 2008/10/20 9:42 PM |


すみません(´;ω;`)

内容と関係ない場所のところに
コメントしてしまいましたД`

| はるか | 2008/10/20 9:43 PM |

カスタマイズ用flatを使って変なところを弄らなければ自動でそうなるはずです。

| tk | 2008/10/20 9:44 PM |

ほんとですか、

頑張ってみます(^ω^)
わざわざありがとうございました。

| はるか | 2008/10/21 1:15 PM |

こんばんは。
画像を左下固定にするにはどうしたらいいのでしょうか?
カスタマイズ用2を使わせてもらっています。

それと、コメントを投稿するときに
「画像に表示されている数字を入力して下さい」
と出るじゃないですか。
それをなくすにはどうしたらいいのでしょうか?

教えてください、お願いします。

| まりん | 2008/11/09 6:28 PM |

css body部分の注釈を見てください。
body以外ではバグで背景固定がうまく働きません。

| tk | 2008/11/09 9:38 PM |

あーっと、数字を入力してくださいはカスタマイズの問題じゃないのでJUGEMのマニュアルをみてくださいね。
管理画面のどこかに数字認証のon offを切り替えるところがあったはずです。

| tk | 2008/11/09 9:39 PM |

あ、ごめんなさい。間違えました。
窓の部分を左上にするにはどうしたらいいでしょうか?
でした;
手間を掛けさせてしまってすいません。

数字を入力してくださいのはできました!
親切にありがとうございました。

| まりん | 2008/11/10 4:41 PM |

うーん、窓を動かすならカスタマイズ用6のがやりやすいんですが
2の移動のさせ方はhttp://nous.jugem.jp/?eid=36
を参照してみてください。

| tk | 2008/11/10 4:45 PM |

こちらのカスタマイズ2をお借りしています。
いじってすぐ更新して様子見ながらまたいじって、と
繰り返して少し時間置いてからまた開いてみたら・・・
記事が全部消えてしまいました。さらにクリッカブルマップのリンク先も
さっきまで見れたのに見れなくなってしまいました。

http://ss2t.jugem.jp/

何か閉じタグを忘れたのか何なのか分かりません。
良かったら見ていただけないでしょうか?

| | 2009/03/03 12:48 PM |

本文出力系のタグが全て消えています。
htmlをドラッグして間違えてdeleteでも押してしまったのではないでしょうか。
元テンプレをもう1個見ながら、htmlを修正するといいです。
消えた量が多すぎるので、ちょっとコメントには書き出せません。

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

ありがとうございます。
今から修正したいと思います。

<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>



このスクリプトのタグは、
左にあるメニューリンク(Infoやtemplate)が不必要な場合は削除しても
いいのでしょうか?

| n | 2009/03/04 2:28 AM |

連続投稿ですみません、修正したら直りました。
ありがとうございます。

もう一つ質問なのですが、
記事(本文)の幅を広げたいのですが

カスタマイズ2で#contents #main .padの
width:○○px;の部分をいじると、確かに広くはなるものの
スクロールバーがどんどん右へ遠のいて行きます。

全体を広げるのではなく、記事のみ(全体はこのままでOK)を
広げたい場合、カスタマイズ2のテンプレではどの部分を
修正したらいいのでしょうか?

お忙しいところ申し訳ありません。

http://ss2t.jugem.jp/

| n | 2009/03/04 5:01 AM |

.entryにwidth指定を新規挿入して数字を設定してみてください。

| tk | 2009/03/04 5:56 AM |

試してみたのですが変わりませんでした(´`)
どこかいらないタグがあるのでしょうか。

| | 2009/03/07 9:23 PM |

いや、
width100%;
この書き方じゃだめですよ。
間に:がいりますし。
width: 300px;
のようにpx指定した方がいいです。

| tk | 2009/03/07 9:51 PM |

出来ました!
最後までご丁寧に分かりやすい説明ありがとうございました!
とても感謝しています^^

| | 2009/03/09 12:07 AM |

初めまして。
今回は窓に挑戦したのですが、ほとんどうまくいったのに
なぜか記事やそのほかのメニューページの一番上に
フリースペースが出てきてしまいます。
どこが間違っているのかわかりません・・・

http://0u0xx.jugem.jp/?tid=13

| もりこ | 2009/12/28 5:04 PM |

でかけてたので返信遅くなりました。すみません。

cssの

.page {
font-size: 9px;
color: burlywood;
padding: 10px 0px 0px 0px;
text-align: center;


の下にあったはずの}
がなくなってます。このせいだと思うので、書き足してみてください。

| 由紀 | 2009/12/29 5:11 PM |

見事解決しました!ありがとうございます><;
助かりました!

| もりこ | 2009/12/29 7:38 PM |

Submit Comment