7e OFFICIAL BLOG

コピペでOK!Xeory Extentionのカスタマイズまとめ~CSSカスタマイズ編~

Xeory Extention

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

ひとまずはカスタマイズ画面の「追加CSS」に記述し、プレビュー画面で確認しながら進めて、全体のカスタマイズが完了したらCSSコードをテーマエディターの「スタイルシート(style.css)」に移動しておきましょう。その際、CSSが効かない現象が起きた場合は、ページ下部で紹介する対処法で解決できます

CSSまとめ

ヘッダー

ヘッダーは、全てのページの上部に共通して表示されるもので、閲覧者が迷子にならないための目次となるメニューを配置されたり、ウェブサイトのブランドイメージを訴求するなどの役割を担っています。

ファーストビュー

ファーストビューは、ウェブサイトの第一印象となる重要な部分です。「Xeory Extention」のファーストビューはとてもシンプルですが、デフォルトデザインの単色背景を画像に変えるなど、より印象的にカスタマイズするためのCSSコードをこの記事で紹介していきます。上記画像は、記事内で紹介するコードすべてを入力した場合のデザインです。

トップページ

参考資料: Xeory_Extention_トップページ_完成形

下の記事では、トップページのデフォルトのベースカラーを会社のイメージカラーに変更したり、お好みのデザインへとカスタマイズしたい場合などに利用可能なCSSコードを、ボックス別に紹介しています。CSSコードすべてを記述すると、参考資料のデザインに完成します。

固定・投稿ページ

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

個別ページと投稿ページのデフォルトデザインをカスタマイズするためのCSSコードです。下記記事では、細やかなデザインの変更についてまで項目別に紹介しています。参考資料は、CSSコードすべてを記述した場合のデザインです。

フッター

フッターは、ヘッダーと同じく前ページに共通表示される部分です。サイトマップを配置していることから、別のページへの誘導を促す役割を担っている部分です。下記記事では、デフォルトデザインには存在しないフッターメニューの追加方法についても紹介しています。

【補足】CSSが効かない場合の対処法

まずはウェブサイトを開いた状態で、画面上のどこでも構いませんので「右クリック」します。

表示されるウィンドウの中から検証を選択すると、ページを構成するソースコードなどが画面右側に表示され、表示中のウェブサイトが検証モードになります。

この状態でブラウザの「更新ボタン」「右クリック」し、キャッシュの削除とハード再読み込みをクリックしましょう。以上の手順で、CSSが反映されなかった現象は解決されるはずです。

関連記事一覧

PAGE TOP