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

<< JUGEM,Flat系テンプレ、幅変更 + main + 記事タイトルと日付を横並びに >>

よくある質問集

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


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


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


■具体的カスタマイズ

スポンサーサイト

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

| | Comment 0 | - |

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

ブロ画の下などに文字を書き、そこにリンクを張りたい場合。
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 | - |

スポンサーサイト

| 08:39 | Comment 0 | - |

Comment

はじめましてこんばんは。
いつもこちらのサイトを参考にさせてもらっています。

ブログタイトルの下にメニューをおきたいな、おきたいな〜
自分でタグ色々いじってみても、できないし…
とちょっとじれったかったときに、この方法を知りました。

なるほど、ブログディスクリプションにアバウトへのリンクを貼ればよいのはわかったのですが、
私の場合もう二つ、メニューを作りたいのです。
写真を展示するページと、リンク、です。

これらのメニューをアバウトと同じように、ブログタイトルの下に置いて、クリックすればentry_bodyの中に表示される、ということはできますか?
ぜひぜひ、やりたいことなのです。
お力添えお願いしますm(_ _)m

| ワルツ | 2008/04/03 6:03 PM |

http://nous.jugem.jp/?eid=55
を参考にメニュー画面を二つつくって

<a href="./?pid=1">{blog_description}</a>
ではなく

<!--{blog_description}-->
<a href="./?pid=1">photo</a> <a href="./?pid=2">Links</a>

とすればいいんじゃないでしょうか。
独自タグを削除ではなくコメントアウトしているのはエラー防止の為です。

| tk | 2008/04/03 6:16 PM |

早速のお返事ありがとうございます。
仰るとおりにやってみたところ!

いとも簡単に出来ました!!

ずっとやりたいと思っていたことなので
ほんとうに嬉しいです。
これで自分の好きなようにデザインできます。
tkさん、本当に助かりました。ありがとうございますm(_ _)m

そしてここまで色々できるjugemがやっぱ大好きです。

| ワルツ | 2008/04/03 6:53 PM |

Submit Comment