WordPressテーマ「Xeory Extension」をカスタマイズ(その9)CSSカスタマイズ:固定・投稿ページの色・形状変更

WordPressテーマ「Xeory Extension」をカスタマイズ(その9)CSSカスタマイズ:固定・投稿ページの色・形状変更

「Xeory Extension」は国産の無料WordPressテーマです。

Xeory Extension

カスタマイズ自由で商用利用可。
SEO 最適化済、レスポンシブデザイン。
提供元クレジット表記無し。

架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、Xeory Extensionのカスタマイズ「その8」。

前回はCSSカスタマイズで、トップページの色や形状を変更しました。

これを最終回までに、以下の状態にまでカスタマイズします。

NATSU-Photo Graphy プロ流儀の画像撮影
(架空のサンプルサイトです)

今回はCSSカスタマイズの2回目です。
固定ページ・投稿ページを中心に色や文字サイズ等を変更します

~ 目次 ~

  • CSSで色を変更する前に
  • 今回の色の変化は・・
  • 固定・投稿ページのリンク色を変更
  • 固定・投稿ページの文字サイズを変更
  • 固定・投稿ページの背景色を変更
  • 投稿ページのカテゴリー色を変更
  • 投稿ページの見出し色を変更
  • 投稿ページのCTA色を変更
  • 投稿ページのコメント欄を変更
  • コメント欄を付けない場合の措置
  • アーカイブページ:記事タイトルのマスホバー色変更
  • アーカイブページ:「続きを読む」の色変更
  • アーカイブページ:ページャーの色変更
  • 今回はここまで

CSSで色を変更する前に

今回も前回同様、色を中心に変更していきます。

色をCSSで変更する場合、以前の記事に書いたように
必ず初期設定の「カラー設定」をデフォルトにしておいてください。

これをやっておかないと、今回掲載するCSSコードの大半が無効となってしまいます。

今回の色の変化は・・

また、今回の色の変化はかなり微少なものになります。

それは、もともとのデフォルトカラーと、私の規定したメインカラーとアクションカラーが似通っているからです。
よーく見ないと分からない程度の差に過ぎません。

ただし、人によってメインカラーとアクションションカラーの配色は当然違うので、ここはしっかりと変更用のコードを載せたいと思います。

*変化が微少な箇所は、変更後の画像はあえて載せません。

固定・投稿ページのリンク色を変更

まず、固定ページや投稿ページのリンク色を変更します。

各リンク色をアクションカラー(#009fb7)に変更。
以下のCSSコードを使います。

/* 固定・投稿ページのリンク色を変更 */

.single #main article a,
.page #main article a {
    color:#009fb7 !important;
    }

.breadcrumb-area a {
    color:#009fb7 !important;
    }

.side-widget a {
    color: #009fb7;
    }

固定・投稿ページの文字サイズを変更

次に、固定ページや投稿ページの文字が小さめなので、高齢層にも配慮して若干大きめに変更します。

スマホ表示時は17px、
タブレット表示時(画面幅768px以上)は18px、
PC表示時(画面幅992px以上)は19px、
に変更します。

/* 固定・投稿ページの文字サイズを変更 */

.post-content {
    font-size:17px;
    line-height:1.8em;
    }

@media (min-width: 768px) {
    
.post-content {
    font-size:18px;
    } 
    
}

@media (min-width: 992px) {
    
.post-content {
    font-size:19px;
    }  
    
}

変化しました。

固定・投稿ページの背景色を変更

固定ページと投稿ページの背景色を変更します。

現在は淡い模様の入った背景となっています。

これを単色、
若干グレーの混ざった白(#fafafa)、乳白色に変更します。

純然たる白背景にしないのは、純白に黒文字の組み合わせは、目が疲れやすくなるからです。

/* 固定・投稿ページの背景色を変更 */

#content {
    background-color:#fafafa !important;
    }

変化しました。

投稿ページのカテゴリー色を変更

投稿ページのカテゴリー名の、文字色と枠線色をアクションカラー(#009fb7)に変更します。

/* 投稿ページのカテゴリー色を変更 */

.post-header .cat-name span {
    border: 1px solid #009fb7;
    color: #009fb7;
    }

投稿ページの見出し色を変更

投稿ページの見出し色をメインカラー(#58656e)に変更します。

変更するのは
「見出し2(h2)」
「見出し3(h3)」
「見出し4(h4)」
この3つです。

見出し2は、左先端部分にはメインカラーを濃くした色(#3e494f)を入ります。

/* 投稿ページの見出し色を変更 */

#content .post-content h2 {
    background-color:#58656e;
    border-left:solid 10px #3e494f;
    }

#content .post-content h3 {
    border-bottom: 2px solid #58656e;
    }

#content .post-content h4 {
    border-left: 5px solid #58656e;
    }

投稿ページのCTA色を変更

投稿ページのCTAの色を変更します。

CTA背景をメインカラー(#58656e)に。
CTAのボタンをアクションカラー(#009fb7)に。

/* 投稿ページのCTA色を変更 */

#content .post-cta {
    background-color:#58656e;
    }

#main article .post-cta-btn .button {
    background-color:#009fb7;
    color:#fff !important;
    }

変化しました。

投稿ページのコメント欄を変更

投稿ページのコメント欄の色を変更します。

「コメント」という見出しの下にメインカラー(#58656e)の下線を。
これは見出しにメリハリを付けるためです。

リンクと送信ボタンをアクションカラー(#009fb7)に。

ちなみに「コメント」いう見出しは、コメントが付かないと表示されません。

/* 投稿ページのコメント欄を変更 */

#content #comments h4 {
    border-bottom: 5px solid #58656e;
    }

#content #comments a {
    color:#009fb7;
    }

#content form input[type="submit"] {
    background-color: #009fb7;
    }

変化しました。

コメント欄を付けない場合の措置

ブログにコメント欄を付けるか否かは、そのブログの運営方針次第です。

炎上やスパムコメントが煩わしくて、コメント欄を非表示にする場合もあるかと思います。

とろこがXeory Extensionでは、投稿ページのコメント欄を非表示にしても、なぜか記事タイトル横にコメント数「0」と表示されてしまいます。

ここがXeory Extensionの弱点「その5」です。

これがウザい場合は、以下のコードでコメント数表示を消してください。

/* 投稿ページのコメント数表示を消す */

li.comments {
    display:none !important;
    }

消えました。

アーカイブページ:記事タイトルのマスホバー色変更

最後にアーカイブページ(月別・カテゴリー別・タグ別)の変更です。

まず、各記事タイトルのマウスホバー色を、アクションカラー(#009fb7)に変更します。

デフォルトでは濃いオレンジ色になってます。

/* アーカイブページ:記事タイトルのマスホバー色変更 */

#content .post-title a:hover {
    color:#009fb7;
    }

変化しました。

アーカイブページ:「続きを読む」の色変更

アーカイブページの「続きを読む」の帯色を、アクションカラー(#009fb7)に変更します。

/* アーカイブページ:「続きを読む」の色変更 */

#content .post-footer a.morelink {
    background-color: #009fb7;
    }

変化しました。

アーカイブページ:ページャーの色変更

アーカイブページのページャーの色を、アクションカラー(#009fb7)に変更します。

/* アーカイブページ:ページャーの色変更 */

#content .pagination .current {
    background-color: #009fb7;
    }

変化しました。

今回はここまで

さて、今回はここまでです。

固定ページ・投稿ページ・アーカイブページの色や文字サイズ等を変更しました

投稿ページは以下のように変化しました。

これでCSSカスタマイズ編は終了です。

本シリーズ、残りはあと一回のみ。
「応用編」と称して、ページタイトルの変更やInstagramのフィード実装などを行います。

 

ken
最終回「応用編」は少し高度な内容となります。初心者さんにはちょっときついかもしれません(ーー;)

 

関連記事

WordPressテーマ「Xeory Extension」をカスタマイズ(その10)応用編

2018.08.29

WordPressテーマ「Xeory Extension」をカスタマイズ(その8)CSSカスタマイズ:トップページの色・形状変更

2018.08.08

WordPressテーマ「Xeory Extension」をカスタマイズ(その7)CSSカスタマイズ:ファーストビュー変更・他

2018.08.02

WordPressテーマ「Xeory Extension」をカスタマイズ(その6)メニュー・ウィジェット・CTAの設定:他

2018.07.25

WordPressテーマ「Xeory Extension」をカスタマイズ(その5)テーマ設定:会社情報の設定・他

2018.07.17

WordPressテーマ「Xeory Extension」をカスタマイズ(その4)テーマ設定:クローズアップ記事・他

2018.07.11

WordPressテーマ「Xeory Extension」をカスタマイズ(その3)初期設定:SNS連携・カラー設定等

2018.07.02

WordPressテーマ「Xeory Extension」をカスタマイズ(その2)構想と初期設定

2018.06.26

WordPressテーマ「Xeory Extension」をカスタマイズ(その1)準備編

2018.06.18

テーマの知識が無いと困る!? 今後のWordPress制作

2017.08.09