アメブロの個別記事の記事情報(更新日時・テーマ)を1行表示にするカスタマイズ方法

アメブロの新タイプ(第二世代)のCSS編集用デザインでは、個別記事の記事情報(更新日付とテーマ名)が、2行で表示されるようになっています。

この2行表示は、右側に2行分のスペースがポッカリと空いてしまいますので、1行にならないものかと思われる方もいらっしゃるのではないでしょうか。

そこで、当記事では、アメブロの新CSS編集用デザインの、個別記事の記事情報(更新日付とテーマ名)を、1行表示にするカスタマイズ方法をご紹介します。

個別記事の記事情報(更新日付とテーマ名)を1行表示にする

当カスタマイズは、ブログデザインCSSの編集で行いますので、CSSの編集方法がわからない場合は先にチェックしておいて下さい。

なお、新タイプのCSS編集用デザインの標準型(トップページに記事の内容がそのまま表示されるタイプ)を選んだ場合、トップページなどでも、個別記事ページと同様に記事情報が1行表示になりますのでご注意下さい。

また、今回は、4種類のカスタマイズ方法をご紹介します。

何れも記事情報(更新日付とテーマ名)を1行表示にするやり方ですが、それぞれ、更新日付とテーマ名が表示される位置(レイアウト)が違いますので、お好みのレイアウトの方法をご参照下さい。

それでは、以下に、カスタマイズ方法を(CSSのコードが簡単な順に)ご紹介します。

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

テーマ名を左寄せ、更新日付を右寄せで表示するには、ブログデザインCSSの末尾に次のコードを追加してください。

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

左から更新日付、テーマ名の順に、全体を左寄せで表示するには、ブログデザインCSSの末尾に次のコードを追加してください。

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

更新日付を左寄せ、テーマ名を右寄せで表示するには、ブログデザインCSSの末尾に次のコードを追加してください。

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

左からテーマ名、更新日付の順に、全体を右寄せで表示するには、ブログデザインCSSの末尾に次のコードを追加してください。

長いテーマ名への対応

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

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

もし、2行になることを抑制したい場合は、以下のコードを併用することで、2行にならない(はみ出した部分が「・・・」で省略される)ようにできますので、やってみて下さい。

まとめ

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

記事タイトル下が、かなりスッキリとすると思いますので、もしよろしければお試しください。

よろしければフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。