記事上部のメタ情報欄を装飾・文字色、サイズ・背景色を変更
　　　　　　　　　　　　　　　—Simplicity2をカスタマイズ中

このサイトではなく、現在構築中の映画情報サイトの方のカスタマイズ録をメモ記事にしています。

そして、WordPressを始めたばかりで
simplicity2を使っていらっしゃる方のお役に立てばと思います。

今回は、記事の上方に位置する「メタ情報」(“post-meta”)の部分をカスタマイズします。
(ついでに”entry .post-meta”の文字色も変更。)

表示位置は記事始めのシェアボタンの上、公開日・更新日・カテゴリーや編集リンクがある部分です。

ページ上部のメタ情報の表示位置

このメタ情報部分の変更・装飾です。

ページ上部のメタ情報を装飾する～文字色・文字サイズ・背景色を変更

📋 この作業に必要なファイルは、
Simplicity2の子テーマのスタイルシート【Simplicity child2 (style.css)】。

TJ Custom CSSの様なCSSプラグインを使用している方や、
jetpackのCSSスタイルシートエディターを使用している方はそちらに書いてもOK。

CSSに変更する情報を書き足します。

背景色をつける

先ずは背景色をつけてみましょう。”post-meta”「メタ情報」に指定していきます。

レモンイエローlemon yellow　#fff352

.post-meta {
	background: #fff352;
}

ベビーブルーbaby blue　#bbe2f1

.post-meta {
	background: #bbe2f1;
}

フラミンゴピンクflamingo pink　#f5b2ac

.post-meta {
	background: #f5b2ac;
}

インディゴindigo #043c78

背景がインディゴで濃い色なので絵文字とリンクテキストを白white(#ffffff)に。

.post-meta a {
	color: #ffffff;
}
.post-meta {
	background: #043c78;
	color: #ffffff;
}

ブラックblack　#000000

背景が黒なので絵文字をイエローyellow(#ffdc00)にし、リンク文字をライムライトlimelight(#fff799)に。

.post-meta a {
	color: #fff799;
}
.post-meta {
	background: #000000;
	color: #ffdc00;
}

アンダーライン(下線)を付ける

テールグリーンteal green　#006a6c で直線、太さ2pxで指定。

.post-meta {
	border-bottom: 2px solid #006a6c;
}

同色 #006a6c でドット(dotted)、太さ2pxで指定。

.post-meta {
	border-bottom:dotted 2px #006a6c;
}

同色 #006a6c で二重線、太さ3pxで指定。

.post-meta {
	border-bottom:double 3px #006a6c;
}

文字色・文字サイズを変更

Simplicityでは、”.post-meta”について、文字の大きさを”font-size:16px”に設定されています。
16pxで丁度良い。と思われている方は、この設定は不要だと思いますので、読み飛ばしてやって下さい。

16pxよりも大きい文字だと違和感があると思いますので、小さくする方だけ書きます。
15px～11pxまでで設定すると良いと思います。

文字サイズの変更/文字を小さくする。

文字サイズを変更する際は、(以下の記述に添って示す)
{font-size: 12px;}12pxの部分をお好みで書き入れます。

.post-meta {
　　　　 font-size: 12px;
}

文字サイズの変更のサンプルはこれ以上は不要だと思いますので、文字色の変更にすすみます😋

文字色を変更

文字色は、カスタマイザーで設定しているリンク色が表示されます。

「メタ情報」の文字色はリンク色ですから、
背景色がある場合に変更するという事になるので、幾つかのパターンを記しておきます。

基本的には前項、背景色の項目でインディゴとブラックの背景の場合の書き方と同じ様に書きます。

.post-meta a {
	color: #ffffff;
}

⇓⇓⇓のような感じです。

応用編

文字色ホワイト(白)whiteで背面を角丸装飾

角丸装飾の背景色をカーマインcarmine(#d70035)にし、文字サイズは12px。
絵文字と文字色(リンク文字)をホワイト(白)white(#ffffff)に指定。

.post-meta a {
	color: #ffffff;
}

.post-meta {
	font-size: 12px;
	background: #d70035;
	color: #ffffff;
	border-radius:  2em;
}

文字色クリームイエローcream yellowで背面を角丸装飾

絵文字をランプブラックlamp black(#24140e)に。文字サイズは、13px。
文字色(リンク文字)をクリームイエローcream yellow(#fff3b8)に指定。
この場合、投稿日・更新日の文字色はランプブラックlamp black(#24140e)になります。

.post-meta a {
	color: #fff3b8;
}

.post-meta {
	font-size: 13px;
	background: #9d8e87;
	color: #24140e;
	border-radius:  2em;
}

その他、こんな感じは如何でしょう

他にも色んな装飾が可能なので、ご自身のサイトの感じに併せて変更してみては如何でしょうか。

Simplicityチックに

背景をSimplicityでよく使われている#f7f7f7ベースに上下破線(dashed)の影付きで。文字サイズは13px。

.post-meta {
	font-size: 13px;
	padding: .5em .75em;
	background: #f7f7f7;
	color: #54917f;
	border-top: 1px dashed #cccccc;
	border-bottom: 1px dashed #cccccc;
	box-shadow: 0 7px 10px -5px rgba(0,0,0,.1) inset;
}

目立たせてみる

メタ情報欄を目立たせたい方(カテゴリー表示を目立たせる目的等)はセンタリング＆ビビットカラーで如何でしょう。

.post-meta {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:5px 0;
	border-color:#029EBC;
	border-style:solid;
	background:#fff;
	color:#017589;
	line-height:140%;
	font-size: 13px;
	text-align:center;
}

みてみたの設定

このサイトでは、文字を小さく、薄くして目立たせない感じにしています。
(なのに、背景色を付けたいって言う変な仕様・・・💦)

.post-meta {
	color: #a6d6dc;
	font-size: 12px;
	line-height: 12px;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	background-color: #ebf6f7;
	background-size: cover;
	border-left-style: hidden;
	border-left-color: #2098a8;
	text-align: right;
	text-indent: 4px;
	white-space: normal;
}

更に、ブログトップやアーカイブページで文字色を変更する場合には以下を追加します。

.entry .post-meta　リンク文字色・マウスホバー時文字色指定

.entry .post-meta a:hover {
	color: #2098a8;
}

.entry .post-meta a {
	color: #a6d6dc;
}

みてみたの映画情報サイトでは。。。

・・・で、映画情報サイトの方は、こんな感じ⇓⇓⇓にしました。 この様に背景画像を表示する事も可能。

.post-meta a {
	color: #ffffff;
}

.post-meta {
	font-size: 13px;
	background: #000000;
	background: url(http://ここに背景画像のアドレス) repeat;
	color: #ffffff;
	border-radius: 3em;
}

以上です。

ここだけお洒落さんになっても変ですよね。

なので、記事の後方に位置する「メタ情報」(“footer-post-meta”)も同じ様にカスタマイズします。

記事下部のメタ情報欄を装飾・文字色、サイズ・背景色を変更—Simplicity2カスタマイズ中

ページ下部のメタ情報を装飾する～文字色・文字サイズ・背景色を変更記事の後方に位置する「メタ情報」("footer-post-meta")の部分をカスタマイズします。表示位置は記事終わりのシェアボタンの下、タグや編集リンクがある部分の変更・装飾です

mitemita.com

2016.02.25

同じ要領で行えば簡単ですので、是非トライしてみて下さい。