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

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

カスタマイズ用8

記事本文と広告をカスタマイズ用6で並べたい、と言われ、7使ったほうが簡単ですよ、と言って後からみたらちょっと調整が大変そうだった。

ので、こっちでやってみました。
ついでに6と同じ上部フリースペースメニューも足した。
それだけ。ちょっとテンプレートが増えてきたので整理したいですな。

→DL

| 18:13 | Comment 32 | - |

カスタマイズ用7

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


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


DLはこちら。

| 09:07 | Comment 27 | - |

トップにメニューだけ表示させる。

なんかすっげー久しぶりですな。
これ実は説明するのすんごく面倒なので、どうせなら記事にしようとする次第。


今のこのブログと同様にトップにメニューだけ出して
普通の記事を非表示にするというものです。
htmlとcssの両方でやります。カスタマイズ上級者向け。
テンプレートによって細かいところは違いますが、おおざっぱな説明を。


まず私はこれ、メニューはフリースペースにて表示させてます。
それをしないって人はhtmlに直書きです。
自動改行しないのでどっちも<br />で改行してください。


1.
<!-- BEGIN entry -->
の上に


<div class="entry2">
<!-- BEGIN freespace3 -->
<h2 class="entry_title">
{freespace_title3}</h2>
<div class="entry_body">{freespace_contents3}</div>
<!-- END freespace3 -->
</div>

を書き入れます。
私はフリースペース3を使っているのでこれですが
違う番号を使う場合には4箇所ある3を書き換えてください。
他の2とかの数字を書き換えないように。
直書きする人は、ここの独自タグを文章に書き換えてください。


2.htmlの比較的上の方にある
<body onload="javascript:initval();">


<body onload="javascript:initval();" id="{index}">

に書き換えます。


3.htmlの
<!-- BEGIN entry -->
の下に


<div class="entry_text">

を挿入。
<!-- END entry -->
の上に


</div>

を挿入します。
ここまでいいですか。次はcssです。


4.cssの下の方に


#index .entry_text {
display:none;
}
.entry_text {
display:block;
}
.entry2 {
display:none;
}
#index .entry2 {
display:block;
}

と書いてください。

もともとある


.entry {
色々書いてある
}


をコピーして、その下にでも


.entry2 {
おなじ事がかいてある
}

これで完成です。
バックアップ必須。結構面倒なカスタマイズなので隅々まで読んで出来そうだって
分かってからやってください。ちゃんと読んでない質問はお断りします。
一般的なJUGEMテンプレのclass名を使ってありますが、
UTFなどのあんまり特殊なテンプレだと調整が必要なこともあります。
その場合はご自分で頑張られるか、テンプレ作者にでも質問してください。

| 21:11 | Comment 46 | - |

よくある質問集

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


コメントが増えすぎたので3代目です。
前の質問集のコメントを見たい方はこちら


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


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

*デザイン変更によく使われるcssリスト
*最低限のhtml
*最低限の独自タグ



■具体的カスタマイズ
・サイドバーに折畳メニューを導入
・簡単リンク
・タイトルの左にアイコンを入れる。下線を画像にする
・flat系のテンプレの線をもこもこにしたい
・flat系のテンプレの幅を変えたい。もこもこ調整。
・トップページで中身がもこもこよりはみ出る(flat)
・タイトルと日付を横並びに(基本flat)
・窓の中に本文を収めたい。
・C-MAP アイフレもどきをやりたい。
・スクロールバーの変更(不親切ぎみ)
・上部メニューを導入
・写真の枠線をいじりたい
・バナーの枠線を消したい
・タイトルを画像にしたい(途中に書いてある)
・タイトル画を押してメニューに
・メニュー画面を作りたい。(子ユーザー登録)
・レイアウトを真ん中寄せしたい。
・上部の変なバーと広告その他について
・続きを読むを書き換える。
・ページ送りを設置したい
・新しいメニュー項目を作りたい(フリースペース)
・エンターページをつけたい(そういうテンプレ)
・タイトル下にリンク文字列を書く
・検索にかかりたくない
・ブログのURLを変えたい!(ブログ作り直さなくてok)
・ブログをお休みしたい!
・コメントを開くともこもこ枠とずれる!
・トップにメニューだけ表示させる。
・トラブル! .entry_bodyに書いても文字の指定が反映されない
・トラブル! 小窓内でマウススクロールが止まる
・トラブル! 改行が2回で1回分に
・トラブル! 追記折り畳みスクリプトが動かない!
・トラブル! html弄ってたら崩壊した。(独自タグ関連)


| 20:28 | Comment 302 | - |

追記折り畳みスクリプトの変更点

JUGEMカスタマイズ講座さまで配布している
続きを読む(風)のものを折りたたみにする
スクリプトですがJUGEMの独自タグの変更により
そのままでは動かなくなっています。


.entry_body hr {
display: none;
}


.jgm_entry_desc_mark hr {
display: none;
}

にして
スクリプト最後の


initSequel('div','entry_body');


initSequel('div','jgm_entry_desc_mark');

に変更して使ってください。

| 20:27 | Comment 7 | - |

カスタマイズ用plain

そこまでテーブルレイアウトをぼろくそに言うならば
やっぱflatの代替品を出してからだろ、と思い直して緊急作成。
cssでデザイン制御をしてあります。


カスタマイズ上異なる点は
1.左右カラムの横幅もcssで指定。
2.もこもこの指定箇所が違う。
3.cssで本文とサイドを左右簡単に入れ替えられる。
4.タイトル画を本文とサイド両方にわたって横長いものを張る変更もできる。
5.テーブルより表示がはえーよ。
って感じです。


ただ、サイドが本文側よりあまり長いと、本文の側のもこもこが途切れてしまうので注意。
もこもこを張らないで普通のテンプレートみたいなデザインにも出来ます。
flatよりは、もこもこと重なる、重ならない、のmargin.padding変更を
簡単にしてありますし、タイトルにアイコンをつけたいなども
css内に書いてあります。
とりあえず質問する時は注意書きを全部読んでください。
何も読まないでスレ立てたりすると空しさにエビフライ投げたくなります。


DLはこちら。


構造解説。

wrapperに中央寄せ指定がされています。
layoutと二重になっているのはfloatの為です。
layoutにはsideのもこもこ画像を指定できます。
headerは基本はmainの中にはいっていますが、htmlで<div id="main">を
移動させることで下の図のようにもできます。
mainには記事部分のもこもこを指定します。
sidemenuのpaddingを弄ることでもこもことの重なりを調整します。

| 12:01 | Comment 6 | - |

何故テーブルレイアウトが苦手なのか

第1に重いからです・・・・・・。
flatで画像をいっぱい張っている or ブログパーツが多いサイト を
初めて開く時とかたっぷり10秒くらい何も表示されません。
cssにレイアウトを頼ったテンプレは、
読み取れたところから表示してくれるんですが
全体をテーブルでくくってあるレイアウトは全部読み込んで全部表示なので
中身が多いほど真っ白のまま待たされることになります。
これが結構苦痛・・・・・・。
なぜこのご時世に個人サイトで開くまで延々待たないとならんのか。
用事がなきゃ即閉じてます。


第2にソース見難い。
cssレイアウトはdiv idなどを目安にすると、どういう構造になっているのか
(cssになれている人なら)作成者以外にもぱっと分かりますが
テーブルで凝ったレイアウトをされていると
tr tdがあちこちにあって、ソースが雑然としており、
どういう配置されているのか読み解くのが面倒です。
特に入れ子になってたりしたら、サポート投げたくなる。


っつーわけで正しい正しくないではなく、個人的な理由で苦手です。
なので2カラムのカスタマイズしたいけど、flatは嫌だ、
っていう人がいらっしゃったらコメントください。cssメインで1個作ります。
誰もいないのに作るのはかったるいぜー。


| 09:28 | Comment 16 | - |

ninjaブログ用カスタマイズ用4

テストの意味を込めて1つ移植してみました。
忍者とJUGEMの違う点は


・忍者の方が大きい画像がupできる。
・カーソルも音楽もアップできる。
・上書きバナーが出来る。
・メニューを弄るのにhtmlを弄る必要がない。
 プラグインだけで出来る。
・続きを読む、の文字が毎回変えられる。
・プロフィールページ(メニューページ)が作れない。


などです。


なおこのテンプレートは
ある程度html.cssが分かっている人のみご使用ください。
まったく分からない!とりあえず聞こう!注意書き読まない!
の方にはサポートいたしませんので、あらかじめご了承ください。
特に忍者ブログの基本的な使い方など聞かれてもお答えいたしません。
忍者ブログマニュアルをご参照ください。


ここからDL


管理画面の新規テンプレート作成で、
編集フォームを開き、htmlとcssにそれぞれ回答して出来たファイルを
貼り付けてご使用ください。
テンプレ保存ボタンは左上にあります。


カスタマイズに使える変更点は


html
タイトル画部分
お手紙何通などの部分
コメントフォーム周り


css
もこもこ画像
リンク色
一番下の方にあるコメントフォームなどの色
上部メニューの横幅


です。
cssはもともと詳しい注釈がありますし、左に簡単変更ツールがあるので
ある程度は自分で変更できるはずです。
メニューにつきましては、JUGEMのとはscriptが違うので、
ちゃんとは中央寄せになりません。
プラグインで簡単にメニューが弄れるのと引き換えですね。
cssの上部メニュー横幅で自分で調整することになります。
では、健闘をお祈りします。

| 11:16 | Comment 2 | - |

タイトル画を押してメニューに

先に言っておくと、非推奨なカスタマイズです。
ブログというものはタイトル、タイトル画を押すとトップに戻る作りですので
それをメニューに書き換えてしまうということは
トップに戻ろうとした人がメニューに飛ばされてしまって「何これ!?」
ってなります。非常口をあけたらまだ中だった、みたいなものです。
ブログに慣れてる人なら怒ると思う。
しかもプロフィール画面でメニューを作るんで、そこを1度開くと
トップページにブラウザの「戻る」でしか戻れません。かなり迷惑。
なのでこれをやる時は、メニュー内にトップに戻るというリンクを
自分で書き込んでください。


1.htmlからタイトル画を張ってあるところを探す。
カスタマイズ用4とかなら


<h1 class="site_title"><a href="."><img src="省略" alt="site_title" /></a></h1>

ってなってます。
この<a href=".">がトップページに飛ぶという意味なので
<a href="./?pid=1">に書き換える。それだけです。
子ユーザ2を使ってるなら2に。


2.メニュー画面にトップページのリンクを張る。
<a href=".">top</a>
を書き込んどく。これでok。


参考エントリ。
http://nous.jugem.jp/?eid=37:タイトルを画像に
http://nous.jugem.jp/?eid=55:プロフィールページを作る。



| 09:06 | Comment 5 | - |

エントリ本文の独自タグ仕様変更

が、あったみたいです。
広告も変わっているので#adがきかなくなってます。
カスタマイズ用4と5はひっかかってたので修正済み。


あとはエントリ本文の字の大きさや、フォントが
.entry_bodyでcss指定がきかないって話もきくんですが、
その時は


.jgm_entry_desc_mark {

}

って項目つくってその中に書いてみてください。


参考URL
http://info.jugem.jp/?eid=10774



| 21:19 | Comment 0 | - |

+ 1/8PAGES + >>