今回の記事では、固定ページでできる簡単なブログのTOPページのカスタマイズ方法をまとめました。
デモサイト代わりに私のブログのTOPページを見ていただくと、デフォルト状態よりおしゃれな形に仕上がっていると思います。
※現在のTOPページはちょっとCSSを弄ってるところがあります。
(記事内のサンプル動画はCSSでの編集をしていないものです)
＼現在使用中のテーマ／
CSS(テーマファイルエディタ―)は一切触ることなく、固定ページでブロックエディターを使用するだけ。
固定ページのブロックエディターを使用することでできるため、CSSの知識も必要ありません。
私はAFFINGER6を使用していますが、その他のテーマでも可能ではないかと思います。
※AFFINGER6以外では試していません。
【AFFINGER6 デモサイト】カテゴリーごとに背景が変化するトップページ
PCで表示した場合のデザインとして紹介しています。
スマホではPCのように表示ができないためあらかじめご注意ください。
私はPCとスマホを分岐させる方法で、デザインを別々にしています。
分岐とスマホの表示に関しては別の記事へ記載しました。
☛AFFINGER6のトップページを簡単にデザイン(固定ページの編集サンプル)
TOPページサンプル動画
今回デモサイトとして紹介しているTOPページは、1カラムのデザインなのでサイドバーはありません。
新着記事には自動スライドしてくれる横並びの新着記事を入れましたが、ここに関しては今回関係ないので説明は省きます。
カテゴリーごとに背景画像を変えている
このTOPページはカテゴリーごとに異なる背景を導入させています。
ただ、このTOPページに関しては私がカテゴリーごとに背景画像を入れたかっただけなので、自由にやっていただいてOKです。
事前準備
「WordPressの設定」または「AFFINGER管理」などであらかじめ行う設定部分です。
1カラム時の幅を広げる
PCで閲覧したときの1カラム時のコンテンツエリアの幅を2000pxにします。
幅の値は任意のサイズで構いませんが、TOPページを表示したときにカテゴリ―の画像部分をブラウザいっぱいにしておきたいという理由で広く設定しました。
☞「AFFINGER管理」→「全体設定」→「PC閲覧時の1カラムのコンテンツエリアの幅」
1カラム時の記事コンテンツの幅：2000px
PC閲覧時(記事ページなど)のサイトの幅は好みの幅でOKです。
SWELLの場合は下の方法になります。
☞「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」
1カラム時の記事コンテンツの幅：2000px
背景画像の設定
こちらは任意なので、必要であれば背景画像を設定してください。
☞「外観」→「カスタマイズ」→「画像を選択」
任意の画像をアップロードし選択する
背景が白色で良いのであれば、とくに設定する必要はありません。
カバーエディターを使用して背景を固定しておしゃれにする方法
今回のデモサイトでいうカテゴリーの部分のように、「スクロールしても背景が固定されている画像」を固定ページ内へ作っていきます。
固定ページ内へ固定背景を作成する方法
カバー画像を挿入する
挿入したい場所へ「カバーエディター」で画像を挿入します。
☞固定ページ編集画面より
左上の「＋」から「カバー」を選択し、使用したい画像を選択。
挿入した画像を選択すると、色々なことができますが、今回は固定された背景を作りたいのでそちらの方法で紹介しています。
カバー画像のサイズ調整
☞固定ページ編集画面より
- カバー画像を選択して任意で高さを変更
- 右の「ブロック」→「◐」を選択し、「カバー画像の最小の高さ」で値を入力
画像のサイズの変更は感覚で変更もできますし、数値で細かく設定することもできます。
カバー画像中央には「タイトルを入力」という部分があるので、こちらに文字を入れることも可能です。
私は今回カテゴリー名を入れました。
画像を固定させる
☞固定ページ編集画面より
- カバー画像を選択し、右側の「ブロック」→「⚙」→メディア設定の「固定背景」をONにする
メディア設定の「固定背景」をONにすると、カバー画像が固定されてスクロールすると背景を移動するような印象になります。
これだけでも結構おしゃれ感がでますね。
カバー画像の横幅をいっぱいにする
☞固定ページ編集画面より
- カバー画像を選択し、右側の「ブロック」→「⚙」→高度な設定のHTML要素で「<main>」を選択
カバー画像の横幅を画面いっぱいにすることで、ブラウザで表示したい際により背景っぽさが出ます。
固定された横幅いっぱいの背景画像についてはここまでで完成です。
次の記事ではデモサイトの「記事一覧」部分について説明していきます。
＼現在使用中のテーマ／