ブログカスタマイズのブログ

HOME > 記事コンテンツ > テンプレート『ガーベラ』のデザイン
【pinkroseさんのコメントはこちら】
すみません!【タイトル、日付を一行で表示】はテンプレート依存のようです。

まず先に元に戻す方法を書いておきます。変更された部分を次のように直して下さい。

<% if:with_date %><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2><% /if %>
<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>

次にpinkroseさんの環境で記事タイトルと日付を一行で表示する方法です。テンプレート依存の箇所があります。日付の下にオレンジの点線があります。このオレンジの点線を削除して一行で表示する場合は、

■ 記事コンテンツのカスタマイズ

<table border=0 cellpadding=0 cellspacing=0 width="100%"><tr>
<td>
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3></td>
<% if:with_date %><td><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2></td><% /if %>
</tr></table>

■ スタイルシートの編集

.date{
text-align:right; /* ←赤文字箇所を追加 */
font-size: 12px;
font-weight:bolder;
font-family:arial, Helvetica;
color:#FFA11D;
margin:0px;
padding:5px 5px 7px 8px;
/* background-image:url(http://blog.seesaa.jp/img/bg/gerbera/date.gif);
background-repeat:no-repeat;
background-position:bottom; ←青文字箇所を削除 */

}

です。
オレンジの点線を残して一行で表示する場合は、

■ 記事コンテンツのカスタマイズ

<table border=0 cellpadding=0 cellspacing=0 width="100%" class="entryheader"><tr>
<td>
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3></td>
<% if:with_date %><td><h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2></td><% /if %>
</tr></table>

■ スタイルシートの編集

.date{
text-align:right; /* ←赤文字箇所を追加 */
font-size: 12px;
font-weight:bolder;
font-family:arial, Helvetica;
color:#FFA11D;
margin:0px;
padding:5px 5px 7px 8px;
/* background-image:url(http://blog.seesaa.jp/img/bg/gerbera/date.gif);
background-repeat:no-repeat;
background-position:bottom; ←青文字箇所を削除 */

}
.entryheader{
background-image:url(http://blog.seesaa.jp/img/bg/gerbera/date.gif);
background-repeat:no-repeat;
background-position:bottom;
} /* ←赤文字箇所を追加 */

です。

試してみたのですが、テンプレート『ガーベラ』では、オレンジの点線を削除する場合も、残す場合も、微妙にバランスがくずれそうです。気になる場合は更にスタイルシートの調整が必要になってきます。もしチャレンジされる場合はお詫びの意味もこめて微調整のアドバイスをしますのでコメント下さい!

追記:タイトル、日付を一行で表示を修正しました。
01:17 | Comments(3) |
この記事へのコメント
2005年06月21日
早速のご返答ありがとうございました。
無事、オレンジの点線を残して1行で表示出来ました!

見た目にはこのままでも大丈夫だと思うのですが、もし調整が必要でしたら教えてください♪
Posted by pinkrose at 16:05
2005年06月21日
拝見しました。無事にできて良かったです!また遊びに来て下さい!
Posted by 管理人 at 21:39
2005年07月02日
初めまして。
CSSとかに関しては全くの初心者で、この記事を見ながらやってみました。
が★どういう訳かうまいこと日付とタイトルが1行になりませんでした(>_<)
でも、せっかくなので日付だけ右寄せにしてみました〜♪
また、イロイロと参考にさせて頂きます!
Posted by at 00:42
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。