サイト構築記録10:カテゴリー&個別ページ作成(ヘッド画像の設置とタイトルの中央寄せ)

目次

●カテゴリーページの作成(ヘッド画像の設置)

トップページができたので、そこから9つのリンク先となるカテゴリーページを作る。これは固定ページで作ることになるので、「固定ページを追加」で新規画面を立ち上げた。

さて、トップページのヘッドは、WP管理画面:外観>カスタマイズの所に特別に「投稿・固定ページ」というのがあり、そこで作ったわけだが、さて、今度はどうするのか? 

まずはタイトルを入れる。すると、右にある「固定ページ」タブのスラッグ欄を見ると、タイトルがそのまま表示されている。ここは英語に変えておかないと、URLになった時にやたら長い意味不明の記号になるので、英語に変えておく。

次に、その一番下に「親」とある。サイトトップが親なので、「HOME」を選ぶ。と、ここまでやったけど、後が続かない。どうやってヘッド画像を入れる?

カテゴリーページの作成

これも調べると、新規画面の下の方に「SWELL設定」とかあるらしい。あった。
ここで「タイトル背景画像」を選び、その下にある「表示の上書き設定」で画面を構成していく。
タイトルの位置は「コンテンツ上」=ヘッダー部分に来るので、上記「タイトル背景画像」の上にかぶることになる。後は全て非表示だ。

できた。で、例によってプレビューしてみると、お~立派にできてる~。
実は、写真が大きすぎるのではないかとか、いろいろ懸念していたのだが、丁度いい感じで一安心。しかも、ブラウザの大きさを変えると、それに合わせて写真も柔軟に形を変えて行く。なるほど、こういうことだったのか~。

まぁ、トップページを作った時に確認はしていたけど、今度はコラージュだったので、それがどう見えるのか気になっていた。見え方も柔軟に変化しているんだね~。凄いもんです。

●カテゴリータイトルの中央寄せ

ところで…タイトルが左端。ン~、これは中央にしたいなぁ。で、しばし検索―。
と、編集画面の下方に「CSS用コード」というのがあって、そこに次をコピペで入れればいいと分かった。

固定ページタイトル中央寄せ

/* 固定ページタイトル中央寄せ */
.c-pageTitle,
.c-pageTitle__inner {
float: none!important;
text-align: center;
}

お~。これを入れただけで、タイトルが中央になっている。素晴らしい。
かくして、次々と9つのカテゴリーページができました。

●トップページとのリンク付け

いよいよお待ちかね、トップページとのリンク付けです。
トップページを呼び出して、ボタンの文字に各カテゴリーのURLを貼りつけていきます。

プラグインの「メンテナンス」をオンにしているので、作成したページはその都度「公開」にしていますが、外から見えるのは「お待ちください」画面。なので、公開した時にどう見えるのかを確認しながら進めることができるので超便利。
作成したページのURLも都度確認できるので、リンクもサクサクとできました。

●個別ページの作成

さて、後はカテゴリーページ(子)から飛んでいく個別ページ(孫)の作成だ。やり方はカテゴリーの時と同じ。ただ・・・大量にある(-_-;)。ともあれ、淡々と進めました。ヘッド画像が美しいので、出来るたびに見るのが喜び。ひたすら同じ作業の繰り返しでしたが、楽しかった。

目次