目次

【アメブロカスタマイズ】個別記事の「更新日時」と「テーマ」を1行にまとめる方法

アメブロの新CSS編集用デザインでは、個別記事のタイトル下の記事情報（更新日付とテーマ名）が2行で表示されます。

これはこれで問題ないかもしれないのですが、ふと、右側にポッカリと空いた2行分のスペースが気になってしまいました。

そこで、当記事では、この記事タイトル下の記事情報（更新日付とテーマ名）を、1行にまとめるカスタマイズ方法をご紹介します。

1行表示にするわけですが、更新日付とテーマ名のそれぞれを左右どちらに表示するかでやり方が変わりますので、表示位置の違いで4種類ご紹介したいと思います。

カスタマイズは、CSSの編集で行いますので、やり方がわからない場合は先にチェックしておいて下さい。

CSSを編集してアメブロをカスタマイズをする手順
アメブロをカスタマイズするための専用のデザイン「CSS編集用デザイン」に用意されている「ブログデザインCSS」を編集してアメブロをカスタマイズする手順について説明します。

個別記事のタイトル下の記事情報を1行にまとめる

では、ここから実際のカスタマイズ方法ですが、何れもCSSの末尾にコードをコピペするだけですので簡単です。

テーマを左寄せ、更新日時を右寄せに

まず、テーマ名を左寄せ、更新日付を右寄せで表示するパターンです。

CSSの末尾に次のコードを追加してください。

/* 記事情報：日時を右寄せ、テーマを左寄せで表示 */
.skin-entryPubdate {
  float: right;
}

個人的にはこのレイアウトが好みですが、どうでしょう。

左よせで更新日付・テーマ名の順に

次は、両方左寄せで、左から更新日付、テーマ名の順に表示するパターンです。

CSSの末尾に次のコードを追加してください。

/* 記事情報：左寄せで日時・テーマの順に表示 */
.skin-entryPubdate {
  float: left;
  margin-right: 10px; /* 日時とテーマの間の余白 */
}

更新日付を左寄せ、テーマ名を右寄せで

次は、更新日付を左寄せ、テーマ名を右寄せで表示するパターンです。

CSSの末尾に次のコードを追加してください。

/* 記事情報：日時を左寄せ、テーマを右寄せで表示 */
.skin-entryPubdate {
  float: left;
}
.skin-entryThemes {
  text-align: right;
}

右寄せで（左から）テーマ名・更新日付の順に表示

最後に、療法を右寄せで、左からテーマ名、更新日付の順に表示するパターンです。

CSSの末尾に次のコードを追加してください。

/* 記事情報：右寄せで左からテーマ・日時の順に表示 */
.skin-entryPubdate {
  float: right;
  margin-left: 10px; /* 日時とテーマ間のスペース */
}
.skin-entryThemes {
  text-align: right;
}

長いテーマ名への対応

以上の方法で更新日付とテーマ名を1行にまとめて表示することが可能ですが、テーマ名が長い場合に、テーマ名だけが2行表示になってしまうことがあります。

本来はこの画像ほど長いテーマ名をつけることはできないと思いますが、例えばカラムレイアウトが3列の場合はここまで長くなくても2行表示になります。

もし、2行になることを抑制したい場合は、以下のコードもCSSに末尾に追加しておくと、2行にならず、はみ出した部分が「・・・」で省略されるようにできますのでお試し下さい。

/* 記事情報：長いテーマ名を折り返さず省略 */
.skin-entryThemes {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

まとめ

以上、アメブロCSS編集用デザインの初期状態で2行で表示される個別記事のタイトル下の記事情報（更新日付とテーマ名）を、1行にまとめて表示にするカスタマイズ方法をご紹介しました。

記事タイトル下が、少しスッキリとすると思いますので、よろしければ参考にして下さい。

(準備中)
(準備中)