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

<< カスタマイズ用 flat + main + エンターページをつけたい(カスタマイズ用 Enter付) >>

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

これだけは知っとけhtmlタグ

えー、これだけ知ってれば何とかなるだろうという最低限を。


1.リンクタグ


<a href="リンク先のURL">ここにリンクが張られます</a>

です。一番使うんじゃないですかね。
JUGEMだったら記事にリンクってボタンがついてるとおもうので
リンクを張りたい箇所をドラッグしてリンクボタンを押すと
URL入力画面がでます。そこにURLをいれれば自動で
リンクタグが挿入されます。


2.画像タグ


<img src="画像URL" alt="画像の説明" />

画像を張ります。アップロードしてからそのURLを
画像の管理画面でチェックすれば分かりますよ。
JUGEMだったら画像をアップすると、画像の横の方に
投稿ボタンがあるので、そこを押せばタグが挿入された
新規記事投稿画面が立ち上がります。
(本当はwidthとheightで大きさも指定した方がいいですが
 まぁなくても表示されます)


1と2を組み合わせると画像にリンクが張れます。


<a href="URL"><img src="画像URL" /></a>

ですね。ただ画像に枠線が出ちゃうので
こっちみてcssで線消した方がいいですよ


3.改行タグ


フリースペースの編集などにつかいます。


<br />

これを入れると改行されます。
記事の投稿やプロフィールは自動に改行が反映されるので
別に要りません。


この三つだけ知ってればとりあえずブログはやっていけます。
次はテンプレ編集に必要なものを。


4.div/spanタグ


上の三つに比べれば優先度は圧倒的に落ちますが
テンプレの編集などをする人には必要です。
これらは主にスタイルシートを適用させる為の
範囲を指定するのに使います。


<div>ここにスタイルシートきかせたいなー</div>

って感じに囲んで


<div class="entrybox">ここにきかせたい!</div>

という感じにクラス指定などをするわけです。
cssの書き方はカテゴリからcss講座を見てください。
divはおっきい塊に
spanはちょっとの文字列部分に
使います。
(厳密にはブロック要素とインライン要素ですが
 とりあえず塊と文字列って理解してればまぁいいかなと)


5.見出しタグ


<h1></h1>

のように1から6まであります。
1が大見出し、6になるほど小見出し。
1は大抵サイトタイトルです。
ブログだとせいぜい2か3を記事タイトルやサイドタイトル
って感じに使うくらいですね。
まぁこんなところを弄る人はSEO対策を考える人くらいです。


6.リストタグ


JUGEMの独自タグでカテゴリーリストやエントリーリストは
このリストタグを出力します。


<ul>
<li>リスト1行目</li>
<li>リスト2行目</li>
</ul>

って感じです。
ulでこの中はリスト! って囲んで
1行1行はliで囲むわけですね。
他にもdlとかolとかあるけどとりあえずulだけ知ってればよし!
独自タグリストを解体して記述を直す時とかに
使います。
このエントリの下のほうにあるコメントリストを
さっぱりさせる時とかですね。


7.コメントアウト


注意書きなどに使います。
この中に書いたものは出力されません。


<!-- ここは表示されないの -->

って使います。複数行に渡っても大丈夫です。


以上。
これだけ知ってればテンプレの編集にはそう困りません。
あ、head内とか弄らないでくださいね。危ないから。
私が初めてhtmlを覚えた頃はもっとごちゃっとしてたんですが
最近はデザインはほとんどcss任せなので
htmlでやることは文章構造のマークアップくらいですね。
いい時代になったものである。

| 21:17 | Comment 35 | trackbacks(0) |

スポンサーサイト

| 21:17 | Comment 0 | - |

Comment

お久しぶりです。
ここで普通のhtmlの質問ってしてもいいんでしょうか?
やっぱりJUGAM専用ですよね。。。

| れあ | 2008/01/31 5:06 PM |

あ、別にいいですよ。
IE限定のものとかは分からなかったりもしますが。
試しに聞いてみてください。

| tk | 2008/01/31 5:09 PM |

ありがとうございます。
見よう見まねでメモ帳からつくってるんですが
本文などが一部白文字になっていて...
どこでどうなったのかわからなくて;
メニュー(CASTなどの文字)が異様に大きくなってるし;
すんなりといってくれないものですね...

http://cute.sh/rea/menu.txt
ここです。

| れあ | 2008/01/31 5:22 PM |

白くなってるのは

<BODY TEXT=ffffff LINK=ffffff ALINK=ffffff VLINK=000000>

</font>

が原因ですね。削除してください。
文字サイズはスタイルシートのbodyに
font-size:●●px;
みたいにいれると基本サイズがきまりますよ。

| tk | 2008/01/31 5:38 PM |

ありがとうございます!
一応できたんですけど
行と行の隙間ってかえられますか?

| れあ | 2008/01/31 5:41 PM |

bodyのcssに
line-height:1.7;
みたいにいれるとあきます。
数字がへるとせまくなって、ふやすとふえていきます。

| tk | 2008/01/31 5:51 PM |

ありがとうございます。
あともう1つ!
リンクの二重線消すのってどうすればいいですか?

| れあ | 2008/02/01 6:07 PM |

あれ、普通下線1本のはずなんですけど二重線になってます?

リンクの線はcssの

a {
a:link {
a:hover{

みたいにaで始まるところに1個ずつ
underline:none;
といれれば消えます。
ブログのcssにも入っているので探して見本にしてみてください

| tk | 2008/02/01 6:28 PM |

えーと
全部にいれてみたつもりなんですけど
消えてません;;

| れあ | 2008/02/01 6:52 PM |

text-decorationだった。
うろ覚えでかいちゃだめですね。

/*-----------------------------------------------------
aについて
aはリンク色です。
colorは色、text-decorationは下線のあるなしを指定してますので
カラーコードを変えたりunderlineとnoneを使い分けて下さい。
a:hoverはマウスオン時の挙動です。

-----------------------------------------------------*/

a { color: #E36F86; text-decoration: none; }
a:link { color: #E36F86; text-decoration: none; }
a:visited { color: #EA93A4; text-decoration: none; }
a:active { color: #EA93A4; text-decoration: none; }
a:hover { color: #999999; text-decoration: none; }

これがブログに入っているcssなのでこれを見本にしてください。

| tk | 2008/02/01 6:56 PM |

ありがとうございます(Д、)。

| れあ | 2008/02/02 2:01 PM |

こんにちは。
いつもお世話になってます!
質問しに来ました。

ブログ内でページ移動する時に
ゆっくりとページが変わっていくように
したいんですけど、
そういうタグがあるんですか??

| ちえ | 2008/03/11 2:56 PM |

トランジション効果というやつですね。
これIEでしかきかないのと、私はあまり好きではないので
サポートしていないのです。
検索すればタグがいくつかでてくるとおもいますので
それをhtmlに書き込めばokですよ。

| tk | 2008/03/11 3:26 PM |

サポート外なのに
お返事ありがとうございます。
試してます。
ありがとうございました!

| ちえ | 2008/03/11 10:17 PM |

はじめまして★

いつも参考にさせていただいてます。

http://swimmiew.jugem.jp/

↑の方なんですけど

サイドバーと記事のまわりもこもこしてますよね?

これってどーやってるのでしょうか?...

どこでできるのですかね?

| 里未 | 2008/09/06 12:42 PM |

カスタマイズ用flatをDLして説明を読んでください。

| tk | 2008/09/06 12:55 PM |

ありがとうございます

「もこもこ」とかなんか色々書いてあるのですが

もこもこってなんですか?

| 里未 | 2008/09/06 2:11 PM |

というかHTML・CSSどっちですかね?;

| 里未 | 2008/09/06 2:12 PM |

両方読んで下さい。
必要なことはほとんど書いてありますので。
で、読んでそれでも分からないところだけ質問してくださいね。
サイドバーと記事側の幅を変えないのならcssだけで充分です。



| tk | 2008/09/06 2:18 PM |

初めまして。
みくと申します。
comments(0)というところをお手紙0通のように書き換えたいのですが...
ぜんぜん分からなかったのでここで質問してしまいました;;
教えてください><

| みく | 2009/03/26 3:03 PM |

ごめんなさい><
見直したらわかりました><

| みく | 2009/03/26 3:07 PM |

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

あの、htmlのタグの中で
改行ではなく、スペースを
空けたいときはどうすればいいでしょうか?
スペースをしても一行も間が
あかないのですが
あかせるためのタグってあるのでしょうか?

すみません;;
初心者なもので;;

| くま | 2009/08/04 9:38 PM |

普通に全角スペースで空きますよ。
一行も間があかない、の意味がちょっと分かりません。一マスの間違いですか?
半角だと空いたように見えないかも。

あとはcssでmarginやpaddingを使うという手もあります。
が、何処をどういう表示にしたいのか見当つかないので、これ以上詳しいことは言えません。

| tk | 2009/08/04 9:45 PM |

返事ありがとうございます。

全角スペースで
やってもあかないんですよ;;
その場合はどうすればいいでしょうか?

| くま | 2009/08/04 11:41 PM |

いやだからあかないはずがないんですよ。
あかないなら、何か別の原因があるんです。でもそんなのは実際のblogを見てみなきゃ分からないわけで。
一行は一マスの間違いでよかったんですか?

で、あかない場合の為に
>あとはcssでmarginやpaddingを使うという手もあります。
>が、何処をどういう表示にしたいのか見当つかないので、これ以上詳しいことは言えません。
と言ってるわけです。

あかないならcssでmarginやpaddingを指定してください、としか言えません。
話が進まないのでこれ以上聞きたいならURLを張ってください。

| tk | 2009/08/05 12:07 AM |


すみません。
できました;;

本当に申し訳ないです。
色々ありがとうございました。

| くま | 2009/08/05 1:56 PM |

初めまして。

質問があるのですが、
フリースペースに段落分けをしながら書き込みしたところ、
表示されたのは、段落のないのです。

どうすれば、段落分けになりますか?

| 愛未 | 2009/08/05 8:31 PM |

フリースペースは自動改行がききません。
改行したいところには<br />というタグをかきこむように。

| tk | 2009/08/05 8:34 PM |

ありがとうございます!

| 愛未 | 2009/08/05 10:54 PM |

こんばんは。
いつも、お世話になってます。

質問なんですが、
ゲストからのコメントの文字を小さくしたいのです。

もう一つは、私のブログでいうと、コメント投稿の
「GO!」というボタンありますよね?
その文字色と、灰色の背景を変えたいのですが、
どうすればいいのでしょうか?

| 愛未 | 2009/08/07 6:48 PM |

コメントはcssの
.entry_bodyのフォントサイズを小さくすれば小さくなります。

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

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

}


にbaclground指定をいれればいいですよ。
ただコメントの文字書くところと共通なので、
background:#ffffff;
って白くしちゃうのが無難ですね。
ボタンだけ色を変えるのはもうちょっと書き換え箇所が多いので、その場合だけ再度ご質問ください。

| tk | 2009/08/07 6:58 PM |

夜遅くに申し訳御座いません。

コメント投稿背景と、
コメントの文字サイズの設定はできました*

もう一つ、コメント投稿文字
私のブログでいうとGO!の文字色が変わりません。

どうすればいいのでしょうか?

| 愛未 | 2009/08/07 11:44 PM |

う、説明はしょったからか……。

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

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

}

ここが、ボタンと書き込み部分なんです。
だからここにcolorって項目を書き込めば文字色は変わります。
だけどコメント投稿欄の文字色も変わります。

http://nous.jugem.jp/?eid=25
のエントリをざっと読んで見てください。cssの書き方が分かるので、他のカスタマイズもしやすくなりますよ。

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

分かりました。
ありがとうございますw

| 愛未 | 2009/08/08 5:56 PM |

ジュゲムのHTML編集をしていたら、ブログ内検索のSearchのタグを削除してしまいまして。削除したタグを元に戻したいのですが、どのように書けばよいのでしょうか。教えてください。

| 突然すみません | 2011/05/14 1:05 AM |

Submit Comment









Trackback URL

http://nous.jugem.jp/trackback/68

Trackback