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

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

検索にかかりたくない!

って人います?
完全に検索を避けるのはJUGEMでは不可能です。
が、ちょっとはましって方法もあります。
htmlのhead内に


<meta name="robots" content="noindex,nofollow,noarchive" />
<meta name="robot-control" content="deny-all" />
<meta name="GOOGLEBOT" content="NOINDEX, NOFOLLOW,NOARCHIVE" />
<meta name="HATENA" content="NODIFF,NOINDEX" />

っていれる。これだけです。
ただお行儀の悪い検索ロボットはこれを無視して
押し入ってきますので。かかりにくくなるってだけですね。
本当に見て欲しくない人が居るならパスワードを
かけられるブログに行った方が賢明です。


あと1回かかっちゃうと手遅れですね。
向こうの記録庫に保管されちゃったってことなので。
このタグは入れた後かかりにくくなるってだけで
拾われちゃったのは自然に消えるまで待つしかないです。

| 13:49 | 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) |

JUGEM基本head

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={site_encoding}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>{site_title}</title>
<link rel="stylesheet" href="{site_css}" type="text/css" />
<link type="text/css" href="{gmo_header_css}" rel="stylesheet" media="screen,print" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{site_rss}" />
<link rel="alternate" type="application/atom+xml" href="{site_atom}" />
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
<script type="text/javascript" src="./template/js/cookie.js"></script>
</head>
<body onload="javascript:initval();">


一番下に


</body>
</html>

これがないとcss読み込まなかったり文字化けしたり
コメントのクッキーがきかなかったり散々です。
元々あるはずだと思うので、ある程度validなhtmlを
書ける自信のある人以外は、
例えiframeの呼び出し元として使うだけでも
html編集フォームをまっさらにしてから
カスタマイズを始めるのは禁物です。
消しちゃいけないものが結構ありますよ!

| 15:51 | Comment 12 | - |

原因不明に崩れちゃった時(独自タグエリア)

JUGEMには
<!--BEGIN ●●-->と<!--END ●●-->
のような独自タグエリアが存在します。
これは独自タグの為のもので
JUGEMはこのコメントアウトに反応して
独自タグを読み込みにかかります。
(なので独自にコメントアウトをつける場合は
 このBEGINやEND形式を真似しない方が懸命です)
そのせいでカスタマイズ途中で失敗すると
普通のhtmlではありえない現象が起こることがあります。


1.<!--BEGIN ●●-->と<!--END ●●-->を削除してしまう。


独自タグが動かなかったりします。
それだけではなく訳分からん大暴走が始まることも。
中に独自タグが入っている場合、これを削除するのは厳禁です。


2.htmlに1個しか書いていなく、複製されない箇所なのに
何故か2個になった。


タイトル部分がよくなります。
<!-- BEGIN title -->と<!-- END title -->
の間にimgタグや余計なものを入れたりするとなることがあるので
その場合は<!-- END title -->の下に出してやってください。
私の体感ではこのタイトルエリアが一番挙動が不安定です。


3.htmlにちゃんと書いてある記述が出力されない。


これ<!--BEGIN ●●-->と<!--END ●●-->が
あるのに、対応する独自タグを削っちゃったりすると
こうなったりします。
<!-- BEGIN title -->と<!-- END title -->から
{blog_description}を削ったり
<!-- BEGIN profile -->と<!-- END profile -->
から
{user_list}を削ったりするとなっちゃいますね。


{user_list}などは
<!-- BEGIN profile -->と<!-- END profile -->
も一緒に削っちゃえばいいんですが
ヘッダ部分は<!-- BEGIN title -->と<!-- END title -->
を削ると大暴走したりするので、
<!-- {blog_description} -->
のようにコメントアウトで消す方が安全です。


4.なんだか分からない崩れ方をした。


<!--BEGIN ●●-->と<!--END ●●-->
が同じものがhtml内に2個あったりしませんか?
これもやばいです。
また<!--BEGIN ●●-->と<!--END ●●-->
を入れ子にしてしまっても正しく動作しなかったりします。


htmlはちゃんとしているのに理解できない崩れ方をした時
JUGEMでは大抵これらが原因だったりします。
<!--BEGIN ●●-->と<!--END ●●-->
は形式はコメントアウトですがJUGEMのプログラムに
深く関わっているので、取り扱いは注意してください。


これらエリアを示すコメントアウト記述は
正しく動いている時はソースにも書き出されません。
試しに普通の時のソースを見てみてください。
どこにも
<!--BEGIN ●●-->と<!--END ●●-->
がないですよね。(独自に追加されてない場合)
なので、おかしくなった時ソースを見て、
これらのコメントアウトが
書き出されている場合は、
そこが怪しいので疑ってみてください。

| 09:15 | Comment 118 | - |

xhtmlとhtmlのタグの書き方の違い

このご時世、blogはxhtmlで動いてるものが
多いんじゃないでしょうか。
多分にもれずJUGEMもそうです。
xhtmlとhtmlって何が違うの!って思うでしょうが
基本は同じです。
同じだけどちょっと書き方が違ってきます。
仕組みが違うんじゃなくて書き方が。
主なものを紹介してみますね。


1.タグに大文字を使いません。
<A HREF=".........">ここ</A>
はい!ダウト!!
これはhtmlですね。
JUGEMでは
<a href="..............">ここ</a>
です。というかこれからの時代
一部を除いてだんだん皆こうなるんじゃないかな。


2.タグは開始と閉じでセットです。
<div>だけとかはなし! もともと無しな気もするけど
でもimgタグやbrタグ、hrタグはもともと1個じゃん!
と思われた貴女。ここに違いがあります。
1個だけで使うタグは
<img src="........" />
<br />
みたいに半角スペースを空けて最後に/をいれることで
1個でも閉じてるよ!って主張するわけです。


他にも違いは色々ありますが
まずはここを気にするところから始めるといいですよ。
JUGEMは公式でもこれを守ってないのが多いですし
今現在だと別に守らなくてもさして支障はないんですがね。
これからを気にするなら、ってレベルです。


| 10:52 | Comment 2 | - |

JUGEM独自タグ

厳密にはxhtmlではないのですが
JUGEMのカスタマイズをするには避けて通れないのが
この独自タグ。
はい独自タグリストはここにありますよ


独自タグとはブログサービスによって異なる
html出力のための記述です。
MTなんかだと普通の<>で囲まれたタグですが
JUGEMは{}で囲まれます。ロリポも一緒ですね。


テンプレの編集をすると、html編集とcss編集がありますが
html編集には{}で囲まれたものがいっぱいあるはずです。
でも実際のブログのソースを表示させると{}はない。
これは{}内の独自タグが、貴女のブログに対応した内容に
変換されるからです。


例えば{blog_name}
これは実際のソースでは
<a href="http://[id].jugem.jp/">ブログタイトル</a>
となります。
つまりhtml編集で{blog_name}と書けば
勝手に貴女のブログタイトルを調べて、
そのトップにリンクを張ったものを出力してくれるわけです。
便利だー。


マニュアルの見方は一番左の{}はhtml編集フォームに
書き込む記述。真ん中は実際のソースではどうなるか
一番右は普通の説明ですね。ここまでokですか?


ただJUGEMの独自タグにはある決まりがあります。
それはものによって決められた
<!-- BEGIN なんとか --> 〜 <!-- END なんとか -->
の間でしか動かないというものです。
htmlのソースを見るとこういうものが
いっぱいありますよね。
どの独自タグがどのエリア内で動くかというのは
マニュアルに書いてあるのでチェックしてみてください。
またこのエリアがhtml内に同じものが2個ある場合
正しく動作しなかったりしますのでそれも注意。


ではどのように使うかですが、
例えば


1.タイトルを画像にしたい
大抵元々は<h1 class="site_title">{blog_name}</h1>
みたいになってるんじゃないでしょうか。
なのでこの{blog_name}をimgタグに置き換えてみます。
でもそれだけじゃリンクは張られませんよね。
{blog_name}はこれだけでリンクサービス付きの
優れものだったのです。


だから
<h1 class="site_title"><a href="ブログURL"><img src="タイトル画URL" /></a></h1>
とaリンクタグを足してやる。
これでタイトル画をクリックするとトップに飛ぶようになります。


2.recent commentをすっきりさせる。(上級)
このブログみたいにエントリ名を省いてみます。
まず普通は


<!-- BEGIN recent_comment -->
色々
{recent_comment_list}
色々
<!-- END recent_comment -->

みたいになってますね。
{recent_comment_list}はこれだけでリストを10件表示し
エントリタイトルと投稿者名と日付を2行で表示します。
これをすっきりさせるには{recent_comment_list}を
使わないでリストをださないといけません。


それにはrecent_commentのエリア内に
さらにrecent_comment_itemsのエリアを作って書き込みます。
このrecent_comment_itemsのエリア内は
コメントの数だけ(最大10回)繰り返すようになります。


<!-- BEGIN recent_comment -->
<ul>
<!-- BEGIN recent_comment_items -->
<li><a href="./?eid={recent_comment_item_entry_id}#comments"> 〔{recent_comment_item_date}〕 {recent_comment_item_name}</a>
</li>
<!-- END recent_comment_items -->
</ul>
<!-- END recent_comment -->

こんな感じですね。
{recent_comment_list}には元々リストを作成する
ul liタグが含まれていたんですが
これを使わないため自分でulとliを書かないといけません。


リンクを張る頁を実際ブログ側で見てみると
http://ブログURL/?eid=エントリID#comments
ってなってますよね。ブログURLは.だけででるので
エントリIDを独自タグ{recent_comment_item_entry_id}
で置き換えてやります。
何だか数学の方程式みたいになってきましたよ。


続いてリンクを張る文字部分に
{recent_comment_item_date}で日付を
{recent_comment_item_name}で投稿者名を出力します。
[]は見やすいように入れてるだけです。
で</a>で閉じ、この項目を</li>で閉じ出来上がりです。


こっちはそれなりにhtmlの知識がある人じゃないと
中々すぐには理解できないかもしれません。
特にulとliとかはリファレンスを見てみてください


独自タグが分かると色んな改造が簡単にできるので
まずはバックアップをとってあちこち書き換え
html編集内のhtmlと実際のソースを比べて研究してみてください。

| 09:23 | Comment 173 | - |

html絶対やっちゃいけないこと!

結構そういうのをみるので。。


まず第1にhtmlはカギカッコのように
開始タグと閉じタグで1セットです。
<div なんとか></div>
と言う感じですね。/でとじてます。
1個でつかうものは<img src なんとか />
って最後に/がはいってます。


でhtmlは
<html なんとか>
<head>
色々かいてある
</head>
<body なんとか>
</body>
</html>
って順番でできてます。
人間と一緒ですね。頭があって体がある。


headはblogには表示されないページの説明や設定で
bodyは実際に表示されるものをかきます。


で、headやbodyが複数あったり
headの中にbodyがあったり
bodyの中にheadがあったり
headの前に何かを書き込んだりするのは
絶対ダメです。
そんな人間いたら怖いですよね。ブログもそうです。


これをやると極端な話、そのページを見た途端
パソコンが固まったりすることもあります。
当然、IE6以外では変な風に見えたりしてます。
のでhtmlに手を加える時は
headやbodyを増やさないように気をつけてみてください。

| 18:54 | Comment 4 | - |

+ 1/1PAGES +