CSSの最近のブログ記事

記事の日付の場所を変える_02

ただ日付を下に移動しただけでは芸がないので右寄せにします。

日付は<div class="asset-meta">で囲まれているので、

/*記事の日付*/
.asset-meta{
text-align:right;
margin-right:55px;（記事とサイドメニューの余白）
}
とスタイルを定義します。

日付の右寄せだけならこれで良いのですが、記事固有のページに飛ぶと日付のすぐ下のカテゴリとタグが左寄せになっています。

categories.jpg

ダサイのでここも直しました。

続きを読む: 記事の日付の場所を変える_02
2008,12,23 - 15:21 | コメント(0) | トラックバック(0)

記事の日付の場所を変える_01

Unstyledではデフォルトでブログ記事の下に日付が付きますが何となく記事の下に移しちゃいたいと思います。

モジュールテンプレート→ブログ記事の概要の中の日付の記述は

6行目？
<div class="asset-meta">
            <span class="byline">
<!--
<mt:If tag="EntryAuthorDisplayName">
...以下略
『asset-meta』というクラスの付いた『div』になります。

この記述を『div』ごと下の方の<div class="asset-footer">の中に移動させます。

アーカイブテンプレート→ブログ記事　でも同じように『asset-meta』を移動させます。

これで日付は下に行きました。
2008,12,23 - 09:44 | コメント(0) | トラックバック(0)

文字の間隔を指定する

letter-spacing.jpg

文字の間隔が狭くて読みづらかったので字間の調整をしていきます。

記事だけにスタイルを当てていきます。

ブログの記事は

<div class="asset-content entry-content">
内に記述されています。

ですのでこのクラスにCSSを定義します。

/*記事の幅と文字の間隔を調整*/
#alpha .entry-content {
margin : 0 55px 0 15px;
letter-spacing: 1px;（＊追記＊）
}
これだけだとHTMLばっかり記述してる引用文にまで文字の間隔が定義されてしまうので、

/*引用文の背景色と枠線と領域*/
#alpha blockquote {
background:#ffc;
border: 1px dashed #ccc;
padding: 6px 8px 6px 10px;
margin-left: 20px;
margin-right: 70px;
letter-spacing: normal;（＊追記＊）
}
と引用文にも定義します。

＊何故クラスの中のタグを指定しないかというとブラウザによって記述されるタグが違うのでエンジンの違うブラウザで投稿したときにレイアウトが統一されないからです。
2008,12,22 - 05:46 | コメント(0) | トラックバック(0)

ウィジェットのリストに任意のマーカーを付ける

new_archives.jpg

記事が増えてきてウィジェットの中身が見にくくなりました。

ですのでリストマーカーを付けて見やすくしていきます。

使う画像はこれ

arrow.gif

MTの【Unstyled】ではウィジェットの全てのリストに

【list-style:none;】

がかかっていたので今回は背景に設置して対応したいと思います。

続きを読む: ウィジェットのリストに任意のマーカーを付ける
2008,12,20 - 21:31 | コメント(0) | トラックバック(0)

ウィジェットのタイトルに背景を設置

今回使うタイトルの背景はこちら

widget_bg.png（190*22）

この背景をウィジェットのタイトルの背景に設置します。

<h3 class="widget-header">ウィジェットの名前</h3>
この"widget-header"というクラスに追記していきます。

/*Widgetタイトルの背景*/
.widget-header {
background:url(./common/img/widget_bg.png) no-repeat;
width:190px;
height:22px;
padding:3px 0 0 6px;
}
数値は使う画像によって変えてください。
タイトルの文字位置を調整するpaddingの値もお好みで。
2008,12,19 - 13:39 | コメント(0) | トラックバック(0)
メインページ |