固定ページと投稿ページ
無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「固定ページ」と「投稿ページ」のデフォルトデザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。
この記事で紹介するすべてのCSSコード記述すると、下記参考資料のデザインに完成します。カスタマイズ画面の「追加CSS」に記述し、プレビュー画面で確認しながら進めましょう。
参考資料: Xeory_Extention_固定・投稿ページ _完成形
CSSカスタマイズ
コーディングを始める前に、必ずテーマの初期設定のカラー設定が「デフォルト」になっていることを確認してください。
投稿ページ
カテゴリーやアーカイブなどの記事一覧ページのデザインです。
下記5～6行目（カテゴリーのデザイン）においては、完成形のカラー指定（#079292）がデフォルトの緑色に似ているので、カラーコードを赤色（#ff0000）に置き換えています。ホバー色とは、マウスのカーソルが上に乗っている時の色のことです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* ---------------------------------- 投稿ページ: アーカイブ等の記事一覧ページ ---------------------------------- */ .post-header .cat-name span { border: 1px solid #ff0000; /* カテゴリーの枠線の色と太さ */ color: #ff0000; /* カテゴリーの文字色 */ } #content .post-title a:hover { color: #079292; /* タイトルのホバー色 */ } #content .post-footer a.morelink { background-color: #0d7484; /* 「続きを読む」の背景色 */ } |
記事外デザイン
固定ページと投稿ページに共通する記事の外側のデザインです。
下記5行目は、デフォルトの模様の入った背景を単色に変更するコードです。また前項目と同様に、8行目と11行目のカラーコードは赤色（#ff0000）に置き換えています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* ---------------------------------- 個別・投稿ページ: 記事外デザイン ---------------------------------- */ #content { background-color: #fafafa; /* 背景を単色に*/ } .breadcrumb-area a { color: #ff0000; /* パンくずリストのリンク色 */ } .side-widget a { color: #ff0000; /* サイドバーのリンクの色 */ text-decoration: none; /* リンクの下線を消す */ } .side-widget a:hover { color: #003037; /* サイドバーのリンクのホバー色 */ } |
記事内デザイン
固定ページと投稿ページの内容となる部分のデザインです。
見出しのデザインは、カスタマイズ後のべースカラーに合わせて指定していますが、カスタマイズが必要ない場合は19～41行目を省略してください。ページャー（改ページ）については、ページ下部で補足説明します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/* ---------------------------------- 固定・投稿ページ: 記事内デザイン ---------------------------------- */ li.comments { display: none !important; /* コメント数の表示を消す */ } .single #main article a, .page #main article a { color: #ff0000; /* 本文リンクの色 */ } #content .pagination .current { background-color: #079292; /* ページャーの色 */ } .pagination a:hover { background: #079292; /* ページャーのホバー背景色 */ color: #fff !important; /* ページャーのホバー文字色 */ } /* ---------------------------------- 記事内デザイン: 見出し2 ---------------------------------- */ #content .post-content h2 { background-color: #003037; /* 文字の背景色 */ border-left: 10px solid #079292; /* 左線の色と太さ */ } /* ---------------------------------- 記事内デザイン: 見出し3 ---------------------------------- */ #content .post-content h3 { border-bottom: 2px solid #079292; /* 下線の色と太さ */ font-weight: bold; /* 太字に */ } /* ---------------------------------- 記事内デザイン: 見出し4 ---------------------------------- */ #content .post-content h4 { border-left: 5px solid #079292; /* 左線の色と太さ */ font-weight: bold; /* 太字に */ } |
CTAボックス
投稿記事の一番下に、任意で表示できるCTAボックスのデザインです。
CTA（コールトゥアクション）とは、画像やテキストでユーザーに取ってもらいたい行動を促す「行動喚起」のことで、Xeory Extentionではこれを自由に作成・設置することができます。設定方法は、テーマ提供元バズ部のマニュアルでご確認ください。
|
1 2 3 4 5 6 7 8 9 10 |
/* ---------------------------------- 投稿ページ: CTAボックス ---------------------------------- */ #content .post-cta { background-color: #003037; /* 背景色 */ } #main article .post-cta-btn .button { background-color: #079292; /* ボタンの背景色 */ color: #fff; /* ボタンの文字色 */ } |
コメント欄
投稿ページの最下部に表示されるコメント欄のデザインです。
5行目は本文とコメントを区切るための、タイトルに下線をつけるコードです。線の太さや色は自由に変更、必要なければ省略してください。また「コメント」というタイトルは、コメントがない場合には表示されません。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* ---------------------------------- 投稿ページ: コメント欄 ---------------------------------- */ #content #comments h4 { border-bottom: 3px solid #079292; /* タイトルの下線 */ } #content #comments a { color: #ff0000; /* リンクの色 */ } #content form input[type="submit"] { background-color: #0d7484; /* ボタンの背景色 */ } |
以上で、個別ページと投稿ページのカスタマイズは完了です。
次回の記事では、ヘッダーと同じく全ページに共通表示される「フッター」のCSSカスタマイズを紹介します。
【補足】ページャーの使い方
まずは、固定ページもしくは投稿ページの編集画面に移動します。
ページの内容となるテキストや画像を挿入し、段落や見出しなどのページを改めたい部分のブロックの間でプラスマークのアイコンをクリックします。すると「よく使うもの」というウィンドウが表示されるので、その中の「Classic Paragraph」を選択しましょう。
ブロックの上部メニューの「挿入」から「改ページ」をクリックします。「MORE」という表示されたことを確認し、編集ページを「公開（または更新）」します。
編集画面で区切った「MORE」以降の内容が改ページされて、ページ下部にページャーが表示されていればOKです。記事の内容が多いときなどに改ページを使って内容を区切ることで、1ページに表示される文章量を調節できます。
