« つながりました…… | トップページ | 連休終わっちゃいました »

模様替え

今回の目標は「エントリー部分を枠で囲む」でした。

別途にエントリー部分の横の長さに合わせた四角の枠画像を作り、
“上”“中”“下”に分割して、スタイルシートの
 「.content h3」(デフォルト・エントリーのタイトル部分)
 「.entrybody」(今回新規作成・エントリーの本文部分)
 「.content p.postedtc」(今回新規作成・エントリーの投稿時間等の部分)
のクラスにそれぞれの画像を追加しました。
↓こんな感じです。

デフォルトに強調部分を加える
「.content h3」(エントリーのタイトル部分)

.content h3 {
	color: #8080C0;
	font-family: Verdana, Arial, sans-serif;
	font-size: small;
	text-align: left;
	font-weight: bold;
	background: url(cssimg/top_l.gif) no-repeat;
	padding: 12px 0px 0px 50px;
	margin-bottom: 0px;
	vertical-align: middle;
	}

新規作成
「.entrybody」(エントリーの本文部分)
「.content p.postedtc」(エントリーの投稿時間等の部分)

.entrybody {
	background: url(cssimg/center.gif);
	padding: 5px 15px 0px 15px;
	}
.content p.postedtc {
	color: #666666;
	font-family: Verdana, Arial, sans-serif;
	font-size: x-small;
	text-align: right;
	line-height: normal;
	background-image : url(cssimg/bottom.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding: 20px 20px 10px 20px;
	margin: 0px 0px 25px 0px;
	}

padding や margin などは場合によって調整します。

※デフォルトのスタイルシートには、別に「.content p.posted」という
クラスがありますが、これは別の所で使っているので残しておきます。

次にテンプレートセットをいじります。
「.entrybody」は、インデックステンプレートの
 Main Index Template、
また、バックナンバーテンプレートの
 Category Archives、
 DateBased Archives、
 Individual Archives に

<div class="entrybody">
<$MTEntryBody$>
<MTEntryIfExtended>
<$MTEntryMore$>
</MTEntryIfExtended>
</div>

てな感じでそれぞれクラス属性を追加しています。

「.content p.postedtc」も同じように、
インデックステンプレートのMain Index Template、
また、バックナンバーテンプレートの
 Category Archives、
 DateBased Archives、
 Individual Archives にクラス属性を追加するのですが、
元々デフォルトで<p class="posted">となっているところを
<p class="postedtc">にするだけでよいです。

<p class="postedtc">
<$MTEntryDate format="%I:%M %p"$> 
| <a href="<$MTEntryPermalink$>">固定リンク</a>
<MTEntryIfAllowComments>
| <a href="<$MTEntryPermalink$>#comments">
コメント (<$MTEntryCommentCount$>)</a>
</MTEntryIfAllowComments>
<MTEntryIfAllowPings>
| <a href="<$MTEntryPermalink$>#trackback">
トラックバック (<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
</p>

ただし、Individual Archives の
「受信」「投稿者」に指定されている
<p class="posted">はトラックバックの受信情報や
コメントの投稿者情報、コメントの確認画面でも使われており、
そちらには枠は必要ないので、そのままにしておきます。


枠で囲むのは難しいかなと思っていたのですが、余白とかを
ちょこちょこ調整するだけで意外にあっさりできてしまいました(*^_^*)。
これでJUGEMのテンプレートみたいな影付きの枠画像も使えるかなぁ。

今回サイトのタイトルも画像に変えたのですが、
フォントがどうしても気に入らないので、これは次回持ち越し案件に。
またフォント探しの旅に出なくては!w

2004.7.22追記:
 最初、スタイルシートのデフォルトのクラス「.content p.posted」に
 直接画像を追加していましたが、コメントの確認画面で
 <p class="posted">が使われているらしく、変な表示になるので、
 (コメントの確認画面はデザイン編集ができないようです)
 その部分の記載を修正しました。あと、多少の追加。
 相変わらず分かりにくい説明なので、あまりお役には立てないかもですが(>_<)
 説明するのって難しい……私的メモということで許してください。

|

« つながりました…… | トップページ | 連休終わっちゃいました »

カスタマイズ」カテゴリの記事

コメント

うぉう! すっごく綺麗になりましたねー!!
全体的にメチャ好み(笑)
なんていうか、今っぽいというか…(表現古っ

うちもリニューアルしたいなぁ。
何か古臭いイメージになっちゃってるんで……

投稿: ss | 2004.05.06 01:43

うぎゃー! ありがとうございますー(T▽T)
そう言ってもらえるだけで頑張ったかいがありますよー。
これからも日々精進しますだ!
ふむ、ssさんとこがリニュされたらまた新しい技が盗めますな( ̄ー+ ̄)
楽しみにしとりますw

投稿: 桂桂 | 2004.05.06 23:02

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/1109/540920

この記事へのトラックバック一覧です: 模様替え:

» テンプレートセットの編集 [適当少年 -Suitable boy-]
少しずつ、思いつきでみてくれを編集するばかりで、全然記事を書いてないわけです。 [続きを読む]

受信: 2004.05.12 00:36

« つながりました…… | トップページ | 連休終わっちゃいました »