7e OFFICIAL BLOG

コピペでOK!Xeory Extention「ファーストビュー」のデザイン変更~CSSカスタマイズ編~

ファーストビュー

無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。

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

CSSカスタマイズ

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

単色背景を画像に変更


単色の
背景を画像に変更するコードです。
下記コード6行目の画像ファイルのURLと書かれた部分に、任意の画像ファイルのURLをコピペしましょう。(コード内のカッコは消さないでください。)16行目以降のコードは、画像にオーバーレイをかけるコードです。ハイトーンな画像を背景に使う場合などは、白ベースやその他の色へと自由に変更するか、必要なければ省略してください。

テキストの調整


キャッチコピーとサイト説明文のテキストを調整コードです。
文字サイズや太さ、また文字色は背景画像やそのトーンに合わせて変更してください。コードの追加や必要がないコードの省略は自由に行ってください。またそれぞれのレスポンシブ用のデザインも調整しましょう。

以上で、ファーストビューのカスタマイズは完了です。

次回の記事では、「トップページ」のデザインをカスタマイズするCSSコードを紹介します。

【補足】画像ファイルのURL

管理画面の左側メニューにある「メディア」をクリックし、メディアライブラリへと移動します。このページで画像などのアップロードや管理が行えます。

メディアライブラリ内にある任意の画像をクリックすると、画像ファイルの詳細を確認することができます。詳細の一番下に画像ファイルのURLが記載されているので、「リンクをコピー」をクリックでURLをコピーします。

コピーしたURLを、HTMLやCSSの所定の場所に貼り付けて完了です。

Xeory Extention シリーズ

関連記事一覧

PAGE TOP