• コミュニティトップ
• トピック一覧
• 新着トピック
• 最近活発なトピック
• 閲覧数の多いトピック

日時が表示される位置を変更したい

　
テンプレート「o_tp_10_2_right」を利用しています。

デフォルトでは、アップロード日時がエントリの下部（カテゴリの上）に
表示されているのですが、これを記事タイトルの右下（ラインを挟む）に
移動させたいと思っています。

どこをどのように書き換えればいいのでしょうか。

ちなみに、ブログはこちらです。
http://ydsjapan.blog.fc2.com/

よろしくお願いします。

by 　山下　浩  2012年11月20日 12:31

by 　山下　浩
2012年11月20日 12:31

コメント一覧 新しい順に表示▽ / 古い順に表示△

コメント一覧

新しい順  |  古い順

• 
  
  勉強になります。
  ありがとうございました。
  
  
  
  by 　山下　浩  2012年11月23日 13:03
  by 　山下　浩
  2012年11月23日 13:03
• 記事タイトルを装飾する「飾り罫」について若干の誤解があるようなので
  ちょっと補足しておきますね。
  
  シメノが前コメントで引用したスタイルシートの中に
  飾り罫画像へのリンク http://blog-imgs-46.fc2.com/k/i/m/kimaguresozaiya/e-title-02-00.png がありますが
  ごらんのようにスタイルシート内で「背景」として表示指定がなされています。
  
  こういう場合にはおそらく
  記事内に表示される画像のように
  独立したひとつの要素として扱われることはないと思います。
  
  ですから、h2.e_header,h3.e_header,p.c_t_o_header {
  以下のスタイル指定はあくまでも記事タイトルやその他のタイトルに対するもので、飾り罫があってもなくても余白を編集するための手順は概ね同じです。
  
  記事本文中に<img src=画像アドレス>のような形式で挿入される画像とは
  扱われ方が違いますので、その点は心に留めておかれることをお奨めします。
  
  
  by 標野ゆき  2012年11月23日 11:39
  by 標野ゆき
  2012年11月23日 11:39
• なるほど、png画像に対するmargin-bottomなんですね。
  調整したら思い通りの結果になり、無事に解決しました。
  
  標野ゆき様には以前の質問でもお世話になりましたが、
  今回も迅速に指示を頂き、本当にありがとうございました。
  
  by 　山下　浩  2012年11月22日 23:54
  by 　山下　浩
  2012年11月22日 23:54
• 投稿日時のスタイル指定を使って
  これ以上、日時と記事タイトルの間隔を詰めることは出来ませんが
  記事タイトルのスタイル指定を編集すれば、やりようはあると思います。
  
  h2.e_header,
  h3.e_header,
  p.c_t_o_header {
  font: 14px/160% "Verdana","ＭＳ Ｐゴシック", "MS UI Gothic","Arial","Osaka";
  font-weight: bold;
  color: #495a64;
  letter-spacing: 2px;
  text-align: left;
  margin-bottom: 0px;
  padding-top: 5px;
  padding-bottom: 6px;
  padding-left: 33px;
  padding-right: 33px;
  margin-left: 30px;
  margin-right: 15px;
  margin-bottom: 14px;
  background-color: none;
  background-image: url('http://blog-imgs-46.fc2.com/k/i/m/kimaguresozaiya/e-title-02-00.png');
  background-repeat: no-repeat;
  background-position: 0% 100%;
  }
  
  上に抜粋したのがその部分ですが
  margin-bottom の指定が二箇所もあるのは何故なんでしょうね。
  
  質問者さんの希望は間隔を詰めることですから
  margin-bottom値の大きい方を試しに削ってみて表示を確認されたらいいと思います。
  margin-bottom:0pxでは近すぎる場合には値を加減します。
  どうしてもうまくいかない場合にはpadding-bottom値も弄ってみてください。
  
  ただこの指定は複数のクラスにまたがっていますから、他の部分への影響も考えられます。
  不都合がでるようなら、前のときと同じようにスタイル指定を分けたほうがよいかもしれません。
  by 標野ゆき  2012年11月22日 23:10
  by 標野ゆき
  2012年11月22日 23:10
• 
  
  標野ゆき 様
  
  上手くいきました。ありがとうございます！
  
  ただ、今度は日付とその上のラインとの間隔（Ｂ部分）が広すぎるのが気になります。
  記事タイトルとラインとの間隔（Ａ部分）と同程度にしたいのですが、
  「padding-top: 0px」ということは、これ以上は日付を上げられないということですよね…。
  
  そもそも、このラインは画像なのでしょうか。
  だとすれば、画像の下部を削ればいいだけのことなのでしょうか。
  
  何度も申し訳ありませんが、よろしくお願いします。
  　
  by 　山下　浩  2012年11月22日 10:47
  by 　山下　浩
  2012年11月22日 10:47
• div.e_footer {
  background-color: none;
  text-align: right;
  padding-top: 15px;
  padding-left: 0px;
  padding-right: 0px;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 1px;
  }
  
  上に抜粋したスタイル指定は
  記事下の投稿日時・コメントとトラックバックへのリンクボタンに関する指定です。
  
  現在、記事タイトル直下に移動させた投稿日時もこの部分でスタイルが指定されていますので、この指定を編集すれば投稿日時の配置を弄れますが、そうするとコメントとトラックバックへのリンクボタンも動いてしまいます。
  
  そのため、投稿日時のみに新しいクラス名とスタイル指定を割り当てる必要があるということです。
  
  
  ぶっちゃけ
  div.e_footer2 {
  background-color: none;
  text-align: right;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 50px;
  padding-bottom:20px;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: 1px;
  }
  こんな感じのスタイル指定を
  上に引用したdiv.e_footerのスタイル指定の直近にコピペして
  
  <div class="e_footer2">
  <%topentry_year>/<%topentry_month>/<%topentry_day> (<%topentry_wayoubi>)
  </div>
  
  HTMLのクラス名も赤文字の部分を挿入して変更してはいかがでしょうか。
  配置バランスについては質問者さんの好みで値を増減してください。
  
  by 標野ゆき  2012年11月21日 19:09
  by 標野ゆき
  2012年11月21日 19:09
• 標野ゆき 様
  
  遅くなり申し訳ありません。
  ご教授ありがとうございます。
  
  やってみたところ上部に来ましたが、確かに左右や
  天地の余白がしっくり来ません。
  
  >> その場合はクラス「e_footer」のスタイルをスタイルシート内にコピペして
  >> 複製を作ってから、HTML・スタイルシートの両方のクラス名を変更した上で
  >> マージンまたはパディングの値を調整してください。
  
  ここの部分がいまいち理解できないのですが、
  いま一度ご説明を頂けますでしょうか。
  
  また、プレビューの際に本文の文字サイズが若干大きく
  なってしまうのですが、この書き換えと関係ありそうですか？
  または、プレビュー特有の現象なのでしょうか。
  
  よろしくお願いします。
  
  by 　山下　浩  2012年11月21日 11:11
  by 　山下　浩
  2012年11月21日 11:11
• 以下は当該テンプレートのHTML編集例です。
  
  <!--topentry-->
  <div class="content">
  <h2 class="e_header" id="<%topentry_no>"><%topentry_title></h2>
  <div class="e_footer">
  <%topentry_year>/<%topentry_month>/<%topentry_day> (<%topentry_wayoubi>)
  </div>
  <div class="e_body">
  <%topentry_body>
  
  
  太字の文字列は、もともとの場所（下の方にあります）から切り取ってきて、ココに貼り付け、前後のクラス指定（赤文字の部分）はコピペします。
  
  <!--allow_comment-->
  :&nbsp;<a href="<%topentry_link>#cm" title=""><%template_comment>(<%topentry_comment_num>)</a>
  また上記部分、行頭のコロンと空白は削除したほうがよさそうです。
  
  もっとも
  このクラス指定とスタイルは記事下専用なので
  左右や天地の余白がしっくり来ないかもしれません。
  
  その場合はクラス「e_footer」のスタイルをスタイルシート内にコピペして
  複製を作ってから、HTML・スタイルシートの両方のクラス名を変更した上で
  マージンまたはパディングの値を調整してください。
  
  
  by 標野ゆき  2012年11月20日 13:25
  by 標野ゆき
  2012年11月20日 13:25