7e OFFICIAL BLOG

コピペでOK!Xeory Extention「固定・投稿ページ」のデザイン変更~CSSカスタマイズ編~

固定ページと投稿ページ

無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「固定ページ」と「投稿ページ」のデフォルトデザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。

この記事で紹介するすべてのCSSコード記述すると、下記参考資料のデザインに完成します。カスタマイズ画面の「追加CSS」に記述し、プレビュー画面で確認しながら進めましょう。

参考資料: Xeory_Extention_固定・投稿ページ _完成形

CSSカスタマイズ

コーディングを始める前に、必ずテーマの初期設定のカラー設定が「デフォルトになっていることを確認してください。

投稿ページ


カテゴリーやアーカイブなどの記事一覧ページのデザインです。
下記5~6行目(カテゴリーのデザイン)においては、完成形のカラー指定(#079292)がデフォルトの緑色に似ているので、カラーコードを赤色(#ff0000)に置き換えています。ホバー色とは、マウスのカーソルが上に乗っている時の色のことです。

記事外デザイン


固定ページと投稿ページに共通する記事の外側のデザインです。
下記5行目は、デフォルトの模様の入った背景を単色に変更するコードです。また前項目と同様に、8行目と11行目のカラーコードは赤色(#ff0000)に置き換えています

記事内デザイン


固定ページと投稿ページの内容となる部分のデザインです。
見出しのデザインは、カスタマイズ後のべースカラーに合わせて指定していますが、カスタマイズが必要ない場合は19~41行目を省略してください。ページャー(改ページ)については、ページ下部で補足説明します。

CTAボックス


投稿記事の一番下に、任意で表示できるCTAボックスのデザインです。
CTA(コールトゥアクション)とは、画像やテキストでユーザーに取ってもらいたい行動を促す行動喚起のことで、Xeory Extentionではこれを自由に作成・設置することができます。設定方法は、テーマ提供元バズ部のマニュアルでご確認ください。

コメント欄


投稿ページの最下部に表示されるコメント欄のデザインです。
5行目は本文とコメントを区切るための、タイトルに下線をつけるコードです。線の太さや色は自由に変更、必要なければ省略してください。また「コメント」というタイトルは、コメントがない場合には表示されません。

以上で、個別ページと投稿ページのカスタマイズは完了です。

次回の記事では、ヘッダーと同じく全ページに共通表示される「フッター」のCSSカスタマイズを紹介します。

【補足】ページャーの使い方

まずは、固定ページもしくは投稿ページの編集画面に移動します。

ページの内容となるテキストや画像を挿入し、段落や見出しなどのページを改めたい部分のブロックの間でプラスマークのアイコンをクリックします。すると「よく使うもの」というウィンドウが表示されるので、その中のClassic Paragraphを選択しましょう。

ブロックの上部メニューの「挿入」から改ページをクリックします。「MORE」という表示されたことを確認し、編集ページを「公開(または更新)」します。

編集画面で区切った「MORE」以降の内容が改ページされて、ページ下部にページャーが表示されていればOKです。記事の内容が多いときなどに改ページを使って内容を区切ることで、1ページに表示される文章量を調節できます。

Xeory Extention シリーズ

関連記事一覧

PAGE TOP