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

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

よくある質問集

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


コメントが増えすぎたので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 | - |

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

先に言っておくと、非推奨なカスタマイズです。
ブログというものはタイトル、タイトル画を押すとトップに戻る作りですので
それをメニューに書き換えてしまうということは
トップに戻ろうとした人がメニューに飛ばされてしまって「何これ!?」
ってなります。非常口をあけたらまだ中だった、みたいなものです。
ブログに慣れてる人なら怒ると思う。
しかもプロフィール画面でメニューを作るんで、そこを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 | - |

サイドバーに折畳メニューを導入

これはカスタマイズ用flatなど、もともと構造に折畳スクリプトを
使っていないもの向きです。
スクリプト自体は公式テンプレのもの。
html head内に


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

を挿入。
クリックする部分をhtmlで


<div class="linktitle">
<a href="javascript:GetMenu('open1');">
タイトル</a></div>

のようにaタグを書き加える。


折りたたまれる部分は


<div class="getlist" id='open1'>
<div class="linktext">
中身
</div>
</div>

このようにclass="getlist"とid指定のdivで囲む。
この時class="getlist"は固定。
idのopen1はクリックする部分のタイトルの
GetMenu('open1')
ここのopen1と同じになるようにしてください。
2個目のセットを作りたかったらopen2にすればいいです。


cssの最後にでも


.getlist {
display:none;
}

と書き込む。これでできあがりです。
動作としては複数ある場合別のを開けば開いてあったのは閉じます。
で同じのを2回クリックしても閉じない。
本当は開いても別のが閉じなくて、2回クリックすれば閉じるって
スクリプトもあるんですが、それここで公開すると
色々ばれるので。すいません。
結構上級かも?

| 18:25 | Comment 33 | - |

簡単リンクタグ

<textarea rows="2" onmouseover="this.focus()" onfocus="this.select()" cols="20">
&lt;a href=&quot;リンク先アドレス&quot; title=&quot;サイト名&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;バナーのアドレス&quot; alt=&quot;サイト名&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;
</textarea>

日本語部分は書き換えてください。
rows縦。cols横。サイズは数字調整で。
あとJUGEMはバナーの上書きアップロードは不可能です。

| 18:07 | Comment 11 | - |

タイトルの左にアイコンを入れる。

ふみだと直接htmlに入れたりする方法を教える方が多いんですが
それだとサイドメニューなんかは全部に入れるのが面倒なので
cssで表示する方法をお教えします。


まずtitleのclassを探します。
サイドだったら.linktitle
エントリだったら.entry_titleが一般的です。
それをみつけたら
もともとあるpaddingの行を削除し、代わりに


background:url(アイコン画像URL) no-repeat left bottom;
height:●●px;
padding-left:●●px;

をいれます。
heightはアイコン画像の高さ以上
padding-leftはアイコン画像の横の幅以上を指定し
数字を徐々に増やして調整しながらちょうどいいところで止めるといいです。
html弄る必要はなし。


これを下線を画像にしたい場合は


background:url(アイコン画像URL) repeat-x bottom;
height:●●px;

で同様に調整してください。
もともとあるborder-bottomの行は削除で。

| 21:09 | Comment 17 | - |

トップページでもこもこから中身がはみ出る。

デフォルトより幅を狭くした時などに起こる現象です。
えー、これ結構面倒なので、あまり狭くしないでください(笑)
と言っていても仕方ないので、どこを直すべきかメモを。
類似質問として
・flat系のテンプレの幅を変えたい。もこもこ調整。
・コメントを開くともこもこ枠とずれる!
もご参照下さい。


1.大きすぎる画像や文字列がないか調べる。
タイトル画や半角URLの文字列、
改行しないで画像と文字を続けたりすると中身が
幅をおしひろげてしまいます。


2.サイドバーがはみ出る場合。
cssの.linktitleと.linktextのmarginを弄ります。
margin: 0px 10px 0px 10px;
となっている場合
順番に上 右 下 左の外側の余白を指定しています。
なので2番目と4番目の数字を増減させてみてください。
ただしあんまり狭くするとカレンダーではみ出ます。
カレンダーの直し方は
http://www.fumi23.com/to/l07/h/21475.html
参照のこと。阿檀様ありがとうございます。


3.記事の方がはみ出る。
まずcssの
.site_titleの
padding: 20px;

.entryの
padding: 20px;
を削除してみてください。
左右40pxずつ余白を取るって結構大きいので。


これで直らない場合は
.entry_title
.entry_author
.entry_body
.entry_more
.copyright
のmarginをさっきと同じ様に右と左を削ってみてください。


更に駄目な場合は.back2に
padding:0 10px;
を追加して左右の内側余白を取り、
background-color:#fff;を削除。
width:●●px;←tdの幅より20数字を減らしてください。
を追加してみるという手も。


これでもどうしても収まらない!って時は
ああ、小さすぎるんだな・・・・・・と諦めてください。
何という投げやり講座。

| 10:47 | Comment 34 | - |

記事タイトルと日付を横並びに

2/21追記。プロフページに弊害がでちゃうので
cssの.entry_bodyにも


clear:both;

を追加してください。


同じ行でタイトルは左に、日付は右に寄せるカスタマイズです。
実はこの手の同じ行内で違う要素を左右に分けるのって
結構面倒なんですよね。でも折角回答を作ったので
こちらにも書いてみます。
基本はflatを元にしています。
他のテンプレはご自分で調節してください。


1.htmlの書き換え


<div class="entry_date">{entry_date}</div>
<div class="entry_title">{entry_title}</div>


<div class="etitle">
<span class="entry_date">{entry_date}</span>
<div class="entry_title">{entry_title}</div>
<br class="clear" />
</div>

に書き換えます。


2.cssの書き換え
.entry_dateは


.entry_date {
font-family: "Verdana";
font-size: px;
font-weight: normal;
color: #;
margin: 15px 5px 0px 0px;
float:right;
text-align:right;
}

に。ポイントはfloatとmarginです。
marginは自分で調節してくださいね。
.entry_titleは


.entry_title {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: px;
font-weight: bolder;
color: #;
margin: 15px 0px 5px 0px;
float:left;
}

に。ポイントはやはりfloatとmarginです。
これらの下に下線を引きたい場合は、発想を逆転して
authorの上に線を引きます(flatの場合)


.entry_author {
font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "MS ゴシック", "Osaka‐等幅";
font-size: 10px;
font-weight: normal;
color: #;
margin: 5px 0px 15px 0px;
padding-top:5px;
border-top: 1px dotted #;
}

こんな感じですね。
marginの最初の数字は少なくしておくこと。
padding-topは線とauthorの間です。


cssに


.clear {
clear:both;
}

がない場合はこれも追加してください。
brでclearするのはスマートじゃないんですが
小学生も見るようなサイトでclearfixすすめるのは
さすがにやりすぎかなと思うので。
floatを安定させるには最初のうちは
leftとright両方指定と、clearを忘れないということを
気をつけていれば言いかと思います。


| 15:13 | Comment 11 | - |

タイトル下にリンク文字列を書く。

ブロ画の下などに文字を書き、そこにリンクを張りたい場合。
descriptionを使います。
ブログタイトル下にあるブログの説明ですね。
一番最初にブログやるならJUGEMと書かれているところです。
これの編集はJUGEMの設定のブログの説明で書き換えられます。


1.htmlから{blog_description}を探し
そこにリンクタグで囲む、これだけです。

プロフィールにリンクさせるなら
<a href="./?pid=1">{blog_description}</a>
これだけです。


ただ私のテンプレだと基本的にコメントアウトで
非表示にしてあるのでそれを取り除く必要があります。
<!--
<p class="description">{blog_description}</p>-->
となっているのでこれを
<p class="description">{blog_description}</p>
にしてあげればいいわけですね。


2.{blog_description}がhtmlにない場合。
たまーにそういうテンプレがあります。
そういう場合は
htmlの
<!-- BEGIN title -->と
<!-- END title -->の間に書き込めば使えます。
大抵はブログタイトルかブロ画の下ですね。


<!-- BEGIN title -->
<div id="header">
<h1 class="site_title">{blog_name}(或いはブロ画のimgタグ)</h1>
<p class="description">{blog_description}</p>←ここにいれる。
</div>
<!-- END title -->

ちなみにこちらのエントリで触れたり
ずーっと昔はふみコミュで似たようなご相談にも乗ったのですが
BEGIN titleとEND titleの中から独自タグを全部なくすと
その間に書かれたもの全部が出力されません。
なので消したいものはhtmlから削除ではなく
<!--と-->でコメントアウトで消してあげてくださいね。
{blog_name}か{blog_description}のどちらかが残っていればいいです。


3.中央寄せなど装飾してみる。
元々
<p class="description">{blog_description}</p>

<div class="description">{blog_description}</div>
等になっている場合、装飾はcssの.descriptionで行います。
ない場合はこれらで囲ってあげてください(p推奨)


.description {
margin:0 auto;
text-align:center;
font-size:●●px;
color:#カラーコード;
}

これは中央寄せの一例です。
margin:0 autoのautoを削除すれば左によったりします。
色は一応指定してありますが、リンクを張る場合
a { color:#カラーコード;}
みたいな方の色に揃えられてしまうので注意。
そこだけ色を変えたい場合は


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

のような記述をcssの本来のa色指定の下にいれてください。

| 08:39 | Comment 3 | - |

+ 1/4PAGES + >>