投稿日時を記事タイトルの上側に表示する

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロの新デザイン(CSS編集用デザイン)では、記事投稿日時が記事タイトルの下側に表示されるようになっていますが、投稿日時がこの位置に表示されることに違和感を感じる方も多いようです。

そこで今回は、その記事投稿日時を記事タイトルの上側に表示するカスタマイズ方法をご紹介します。

やり方は簡単です。

ユーザーCSSの末尾に以下のようなコードを追加してください。

.skinArticle {
  position: relative;
  padding-top: 25px;
}
.articleTime {
  position: absolute;
  right: 5px;
  top: 5px;
}
.articleDetailArea br {
  display: none;
}

まず、25pxの部分では、記事タイトルの上側の隙間を初期状態よりも広めになるように設定しています。

これは、投稿日時を記事の上部に移動させるには記事タイトルの上側の空きがやや狭いためですが、例えば画像で記事枠を表示している場合などは、これが悪影響となる可能性がありますので、状況に応じて調整あるいは省略してください。

また、『right: 5px』と『top: 5px』の部分では、記事投稿日時を表示する位置を、記事領域の右上隅から見てどの位置に表示するかを指定します。

表示位置を調節したい場合は、これらの数値を変更してみてください。

もし、投稿日時を記事の左上の方に表示したい場合は、『right』を『left』に変え、左端からの位置を指定するようにすることもできます。

また、グレーで書いてある部分は、投稿日時をこの方法で初期位置から移動すると、記事タイトル下に変に隙間が空いてしまうので、それを解消するために記述しています。

ただし、投稿者を表示している場合などは、これにより表示が崩れてしまう可能性がありますので、その場合はこの部分を外してみてください。

以上、アメブロの新デザイン(CSS編集用デザイン)で記事投稿日時を記事タイトルの上側に表示するカスタマイズ方法をご紹介しました。

どうぞ、参考にしてください。

関連記事

アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ

アメブロカスタマイズで人の集まるブログ作り