2012年05月20日
ファンブログの記事の日付をタイトルバーの右下に表示させる方法
シンプル系スキンのタイトルバーの上に表示されています記事の日付をタイトルバーの右下に移動する方法を説明します。
記事の日付は「メイン」「アーカイブ」「1記事」に表示されていますので、それぞれのHTMLとスタイルシート（CSS）のバックアップを取っておくことを推奨します。
記事の日付は「メイン」「アーカイブ」「1記事」に表示されていますので、それぞれのHTMLとスタイルシート（CSS）のバックアップを取っておくことを推奨します。
▼ それでは移動方法の説明です ▼
最初に記事の日付をタイトルバーの下に移動します。「メイン」のHTMLを開いたら <div class="entryDate"> という記述を探してください。比較的上の方に記述されていますので、少し下にスクロールすればすぐ見つかると思います。説明には付近のソースも記述してありますので、見つからない方はそちらをご覧になってから探してくみてださい。
<BlogEntries> <div class="entry"> <div class="entryDate">{$BlogEntryDateformat="%Y年%m月0日" language="jp"$}</div> <h2 class="entryTitle"><a href="{$BlogEntryPermalinkUrl$}">{$BlogEntryTitle$}</a></h2>記事タイトルのコードの上に記述されている記事の日付のコードを以下のように入れ換えます。
<BlogEntries> <div class="entry"> <h2 class="entryTitle"><a href="{$BlogEntryPermalinkUrl$}">{$BlogEntryTitle$}</a></h2> <div class="entryDate">{$BlogEntryDateformat="%Y年%m月0日" language="jp"$}</div>「プレビュー(P)」を押し、記事の日付がタイトルバーの下に移動していましたら「保存(S)」を押してください。これで「メイン」の日付の移動は完了しましたので、引き続き「アーカイブ」と「1記事」のHTMLに同様の記述がありますので、移動作業を行ってください。
次にタイトルバーの margin （外側の隙間）を調整しますので、スタイルシートの /* 記事タイトル部分 */ という記述を探してください。比較的上の方に記述されていますので、少し下にスクロールすればすぐ見つかると思います。
/* 記事タイトル部分 */ #entries h2.entryTitle { border: none; border-left: 5px solid #XXXXXX; background: #XXXXXX; padding: 6px; margin: 10px 0 0; }margin: 10 px 0 0; がタイトルバーの外側の隙間の記述になりますので margin: 1 px 0 10 px; に書き換えます。
padding: 6px; margin: 1px 0 10px; }「プレビュー(P)」を押し、タイトルバーの上にあった隙間が下に移動していましたら「保存(S)」を押してください。
※ 上 1px の隙間は、サイドバーのサイドタイトルの上面に合わせるために指定しています。
最後にCSSで位置を右寄せにしますので、スタイルシートを開き /* 記事表示部分 */ という記述を探してください。最後の方に記述されていますので、下から探せばすぐ見つかると思います。説明には付近のソースも記述してありますので、見つからない方はそちらをご覧になってから探してくみてださい。
/* 記事表示部分 */ #entries { margin-bottom: 20px; } #entries .entry { margin-bottom: 30px; } #entries .entryDate { font-size:120%; font-weight: bold; color: #333; }#entries .entryDate が記事の日付のCSSコードになりますので、以下のように記述を追記します。
#entries .entryDate {
font-size:120%;
font-weight: bold;
color: #333; text-align: right;
}
「プレビュー(P)」を押し、記事の日付が右側に移動していましたら「保存(S)」を押して作業は終了です。いかがでしたでしょうか？ 背景色を付けたり下線を引いたりしますとメリハリが付きますので、CSSに詳しい方は色々と試してみてください。(´・ω・`)b
※上記Htmlタグ、CSSコードはコピー＆ペーストでそのままご利用になれます。
※Htmlタグ、CSSコードのご使用につきましては、利用者の自己責任にてお願いします。
【小技・裏技の最新記事】
この記事へのコメント