【Simplicity2カスタマイズ】記事一覧の投稿日・カテゴリーをCSSでカスタマイズ!コピペで簡単

Simplicity2カスタマイズ 投稿日・カテゴリー

当ブログのWordpressのテーマをWordpress公式テーマ「TwentyTwelve」から寝ログを運営しているわいひらさんという方が作ったテーマ「Simplicity2」に変更したので、「Simplicity2」のカスタマイズを備忘録がてら記事にしていきます。

この記事は「記事一覧で表示される投稿日・カテゴリーのメタ情報のカスタマイズ」をCSSでやっていこうと思います。

スポンサーリンク

投稿日・カテゴリーのメタ情報をカスタマイズ Before After

今回カスタマイズしたのは、トップページの記事一覧に表示される記事一つ一つの投稿日とカテゴリーです。

カスタマイズ前は、このように左にサムネイルが表示され、上から順に投稿日・カテゴリーのメタ情報、タイトル、抜粋文となっています。Simplicity2メタ情報 変更

それを今回は、このように投稿日・カテゴリーのメタ情報を右に移動し、薄くかかっていたグレーの背景を消していきます。文字の大きさや色も一緒に変更が可能です。

Simplicity2メタ情報 変更

メタ情報を右側にすると見やすさが増してデザイン的にいい気がするので、このようにカスタマイズしました

・記事と記事の境界に線を引くカスタマイズはこちらで解説しています

・上の画像のようにサムネイルを横長にしたいならこちら

投稿日・カテゴリーのメタ情報をカスタマイズ コード

テーマの編集をするには必ず子テーマを編集するようにしましょう

先ほど紹介したようにメタ情報をカスタマイズしていくコードをSimplicity2の「スタイルシート (style.css)」に記述していきます。

外観 → テーマの編集 → スタイルシート (style.css)

コピペでOKです!

中身を解説していきます。

まず完成形コードのこちらのコードで文字の大きさと行間を調節しています。

「font-size」の(14px)の値を大きくすれば文字が大きくなります。

「line-height」の(200%)の値を大きくすれば行間が大きくなり、値を小さくすると行間が近くなります。

文字の色を変えたいなら、こちらのコードの「#ffffff」を変更すれば文字色が変更できます。色のコードはこちらで確認するといいでしょう「color-sample.com

次に完成形コードのこちらの部分で文字を右に寄せて、文字の背景を白にしています。

「text-align」の(right)の部分で文字を右に寄せています。(left)にすれば左、(center)にすれば中央に文字が寄ります。

「background-color」の「#ffffff」の部分で文字の背景を白にしています。他の色にしたいならこちらから色のコードを確認して変更してみてください「color-sample.com

完成形のコードをスタイルシート (style.css)にそのままコピペすれば、「文字色が黒、背景が白、右寄せ」で投稿日・カテゴリーをカスタマイズすることができます!

簡単ですね。

投稿日・カテゴリーのメタ情報をカスタマイズ まとめ

この記事は、「記事一覧で表示される投稿日・カテゴリーのメタ情報のカスタマイズ」をご紹介していきました。

細かいところですが、右寄りと左寄りの小さな違いですが見た目は結構違うのでこだわってみました。

コピペで簡単に実装できるので初心者でも簡単ですね!

スポンサーリンク
次はこちら



シェアする

  • このエントリーをはてなブックマークに追加

フォローする