今回はタイトル上のカテゴリ表示を丸角の枠線で修飾したいと思います。また、『この記事の続きを読む』をクリックして表示されるページのほうには、記事を書いた製作者名が表示されるのに対し、抜粋表示では表示されないという違いがあり、私はこれをどちらも表示しない設定で、揃えることにします。

 

比較図1
比較図1

 

比較図2
比較図2

 

親テーマのスタイルシートを確認する

まずは、親テーマのスタイルシートで、これら情報がどう表示されているのか確認します。
管理画面の〈外観〉ー〈テーマ編集〉をクリックして、右側のメニューーから、『編集するテーマを選択』を親テーマフォルダにして、style.cssをクリックします。1131行目あたりに『6.3 EntryMeta』という項目があります。
このなかのcat-linksがカテゴリ表示のスタイルになっています。これらの設定を変えることで、cat-linksを好きなデザインに変えられます。

親テーマ カテゴリリンクのスタイルシートの設定 
親テーマ カテゴリリンクのスタイルシートの設定

 

.cat-links {
font-weight: 900;
text-transform: uppercase;
}

.cat-links a {
color: #2b2b2b;
}

.cat-links a:hover {
color: #41a62a;
}

 

子テーマのスタイルシートを編集する

それでは、実際に子テーマのスタイルシートを編集していきます。管理画面の〔テーマ編集〕-〔編集するテーマを選択〕で子テーマが選択されていることを確認します。右側のテンプレート一覧から、スタイルシートを選択します。

子テーマ カテゴリリンクのスタイルシートの編集 
子テーマ カテゴリリンクのスタイルシートの編集

 

/*****カテゴリリンクの設定*******/

.cat-links {
font-weight: 900;/*文字の太さ*/
text-transform: none;/*強制的に大文字に変換されないようにする*/
background-color: #3cb371;/*背景色*/
border-radius: 10px;/* CSS3草案 */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px;/* Firefox用 */
padding: 0.2em 1em;/*枠までの余白*/
}

.cat-links a {
color: white;
}

 

①文字の太さ
変更しませんでした。

②アルファベット文字の変換
親テーマの設定では、大文字表記が指定されていますが、私は自分がカテゴリを作ったときの文字設定がそのまま反映されるよう変換を解除します。

③背景色を追加する
background-colorで背景色を指定します。

④角を丸くする指定を追加する
丸角を指定します。ただ、CSS3の草案では上手く表示されないブラウザヴァージョンを考慮して、複数の指定を記述しています。

⑤余白の指定をします
枠のようになっている背景と文字の上下左右の余白の設定をします。
値を1つ指定した場合:指定した数値が[上下左右]をさす。
値を2つ指定した場合:記述した順に[上下][左右]をさす。
値を3つ指定した場合:記述した順に[上][左右][下]をさす。
値を4つ指定した場合:記述した順に[上][右][下][左]をさす。

⑥文字色を指定する
白抜きにします。私はWhiteとカラーネームで書いてしますが、#fffまたは(#ffffff)でも同じことです。

⑦結果を確認する

結果確認1
結果確認1

丸角白抜き文字で修飾できました。

 

製作者名の表示、非表示を切り替える

筆者の表示、非表示を切り替える設定も、親テーマの同じ部分のスタイルシートに指定があります。

 

親テーマ 製作者の表示非表示の設定
親テーマ 製作者の表示非表示の設定

 

 

.byline {
display: none;
}

.single .byline,
.group-blog .byline {
display: inline;
}

 

抜粋表示の記事一覧ではデフォルトで『none』、製作者が非表示になっています。実際の記事部分は、『inline』指定になっています。両方表示しないという設定にしたいので、シングルページの指定を『none』に書き換えます。

 

①子テーマのスタイルシートを編集する

子テーマ 製作者の表示非表示の編集
子テーマ 製作者の表示非表示の編集

 

/******筆者の表示、非表示*********/
.byline {
display: none;
}

.single .byline,
.group-blog .byline {
display: none;
}

 

②結果を確認する
記事全体が表示されるシングルページでも、製作者の表示が消えました。

結果確認2
結果確認2

 

長くなりましたので、今回はここまで。
これで、『コンテンツエリアの見ばえをよくする』シリーズは、終了となります。
次回は、3カラムにしている構成の幅を考えてみたいと思いますが、そのあとのシリーズでは、サイドバーやコンテンツバーの設定パートが続く予定です。