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

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

カスタマイズ用6

久々のテンプレートです。
小窓の位置がうごかせねーっていう人が多いので
動かしやすいものを作ってみました。
メニューは記事上部にフリースペースのものが並ぶようになっています。
タイトル画は使用しないという前提での作りです。
body背景に窓画を張って、窓の位置と大きさを簡単調節するつくりになっています。
bodyに繰り返し背景を敷き詰めたい場合は、ワンポイント背景や窓画などは
#layoutの方に張ってください。左上にでるはずです。
そのままで表示されないときは#layoutに画像と窓を全部中に入れられるほどの大きさの
widthとheightを指定してみてください。
C-MAPなんかも<div id="layout">のすぐ次にかけば左上にでます。
ぴったり左上がいやなら、#layoutにmarginやpaddingをとって調整のこと。
DLはこちら。

| 16:27 | Comment 95 | - |

カスタマイズは贅沢品

以前からちょっと気になっていたことをだらだらと。
私がこういうブログを持ったり、質問板にて質問に答えているのは
若い方々に「cssの仕組みに興味を持って自分でデザインするやり方を覚えてもらいたい」と思って始めていたりします。


基本的に昔は個人のホームページというのはある程度の知識がないと凝ったデザインが出来ない贅沢品で
扱いが難しいJUGEMなんかは今もその名残があるかと思います。
阿檀さんが時折「ブログはカスタマイズして遊ぶものではない」と仰ってますが
ブログというのは本来世界中に向けて自分の言いたいことを発信する為のツールです。
で、デザインのカスタマイズっていうのは
言ってしまえば知識がある人の特権に近いわけです。
JUGEMなんかは特に「知識がある人のみ、カスタマイズしてください」と断っています。


知識というものは無形である為、分かりにくいかもしれませんが
努力すれば手に入る、しかし貴重なものだったりします。
講座を見る、検索してみる、パソコンがあるならカスタマイズについて分からないことなんて
本当は何一つないんです。
htmlやcssが自分の身につけば、どんどんデザインを好きに変えられます。


ですが時折、
分からないからとりあえず聞いてみよう
試してみる前に聞く
調べる前に聞く
読んでみる前に聞く
1つ答をもらったら、ついでにこれもあれも調べる前に教えて
と言う方が見受けられます。
残念ながらネット上ではこういった方は「教えてちゃん」「教えて君」と呼ばれ
自身で努力をせず人にそれを押し付けるとして敬遠されがちです。


勿論分からないから聞くのは悪いことではありません。
でも対処療法的に、このリニュのここの変更はどこを書き換えればいいの!?
と聞いたにもかかわらず、その答えが身につかず次のリニュで同じ様なことを聞くのはどうでしょう。
問題の答だけ聞いて理解せずに楽をしても
仕組みを理解しなければ、調べる努力をしなければ同じことの繰り返しです。


カスタマイズというのは贅沢品とかきましたが
例えばアバターの服を有料で売るサイトなどありますよね。
実はあれに似ているのです
綺麗な見かけの為には相応の代償が必要です。
現金がこの場合は、知識と努力と時間に相当します。
綺麗な服が欲しい! でも自分では調べる努力も時間もかけたくないからあなたの時間を頂戴!
それを繰り返していては解答者も疲れてしまうでしょう。
見知らぬ相手の洋服を借りっぱなしにしているのと同じことです。
相手が善意で答えてくれている場合は尚更です。


分からないことがあったら、まず調べてみる。
それでも分からなくて聞いたなら、それを身につける。
この二つを気にしてみるだけで大分違うはずです。
綺麗なリニュも自分の力で成し遂げたものの方が達成感があります。
すぐには無理でも1つのリニュにつき1つでもいいですから
自分で出来た!という箇所を増やしてみたらどうでしょう。
html cssなんてそんな難しいものではないのですから
おそらく半年もすれば他の人の質問にさらさら答えられるくらいのレベルにはなれると思いますよ!

| 17:54 | 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 | - |

JUGEM,Flat系テンプレ、幅変更

このエントリは阿檀様が作成してくださいました


flatflat whiteカスタマイズ用flatで、
メニュー幅、記事幅の変更をしたいという方があります。
変更箇所をまとめておきます。


計画を立てよう
まず、メニュー幅、記事幅、間の隙間を
何ピクセルにするか決めます。
メニュー幅、記事幅にあわせて、
背景画像(通称「もこもこ」)を用意します。
次に足し算をします。下の段は最初に使われている数字です。


メニュー幅+記事幅+間の隙間+ 余裕=全体幅
 240px + 460px +10px +10px =720px


最後の余裕の10pxは、ブラウザ(IE,FF,OPERAなど)によるズレを
吸収するためじゃないかと思います(←自信なしw)。
普通、変更する必要はありません。


実際に変えてみよう


メニュー幅、記事幅、間の隙間は、HTMLを変えます。
「カスタマイズ用 flat」 だけは、HTMLに変更箇所の指示がありますが、flat/flat whiteにはありません。


3テンプレートに共通している部分を探すと、
<!--LEFT-->
というのがあります。これを検索(ctrl+f)して、その下の


<td width="240" (略)>

を、最初に計画した「メニュー幅」に変更。


<!--CENTER-->
を検索(ctrl+f)して、その下近くにある2ケ所、


<td width="10">

<td width="460" (略)>

を、計画した「間の隙間」「記事幅」幅に変更します。
 もう一箇所、CSSのほうに変更箇所があります。下記の場所に、計画した「全体幅」の数値を入れてください。


#wrapper {
width: 720px;
margin: 0 auto;
}

もこもこ模様と文字が重なる?


 CSSの設定と、実際のもこもこ画像の幅によって、模様と文字が重なることがあります。もこもこをつけるときに、.back1、.back2で設定している方が多いようなので(「カスタマイズ用flat」では最初からそうなっている)、それで説明します。


.back1{
(略)
padding(略):XXpx;
(略)}

 こうなっている場所を探して、変更します。


.back1{
(略)
padding:10px 30px;
(略)}

 これはCSSの「キマリ」で、padding:XXpx XXpx;と書いたら、
最初が「上下の余白」、スペースの後が「左右の余白」です。
数字を大きくしたり小さくしたりして、
どう変化するか見てみてください。
 back2についてにも同様に「.back2」を探して変更してください。なお、ピリオド(.)重要なので、ヨロシク。
 以上です。ミ^。^彡っヾ

| 18:16 | Comment 72 | - |

コメント欄を開くともこもこ枠とずれる!

って話がそろそろ耳にタコになってきてしまったので
エントリに起こします。
この問題を見るのはflat系のテンプレですが
多分コメント欄が大きいからそうなります。


html編集で
<textarea tabindex="4" id="description" name="description" rows="10" cols="50" style="width:400px;">
を探して400の数字を減らしてください。以上!
あ、あんまり小さい時は50の数字も減らしてください。


これでなおらない時は
コメント欄に長い半角英数字(URLアドレス)や
記号の連打======などがあるせいで
伸びちゃってる可能性があります。
色んな記事のコメント欄を開いてみて
記事によって広がってたり広がってなかったりする場合は
その可能性が高いので
問題のコメントを削除か非公開にするしかないですね!

| 21:11 | Comment 15 | - |

<< + 2/8PAGES + >>