サイト構築記録8:サイトトップ:メインビジュアルの作成(←どこでやるの?)

目次

●メインビジュアル設定・・・ん?

さて、WP管理画面の左、「固定ページ」>「固定ページ一覧」を開くと、「HOME」と「ブログ」と「プライバシーポリシー」(サンプル)がある。

この「HOME — フロントページ」を作りこもうと「編集」を押して画面に入るが、真っ白なキャンバスで一体何をすればいいのやら。
ともあれ、左上の「青い+」アイコンをクリックすると、ブロックがどんと出てきた。スクロールすると「画像」があったので、クリックすると画像挿入のブロックが画面に登場。

ヘッド画像はライブラリに登録済みなので、「メディアライブラリ」をクリック。その中から庭の画像を選ぶと、サイト画面に挿入された。なるほど、ブロックを使うって、こういうことなのね。

で、見てみようと右上のバーの中から、PC画面のようなアイコンをクリックし、「新しいタブでプレビュー」を選択→すると別画面が立ち上がる。

どれ…、え? 画像がタイトルの下になっている。どうすればいい??
で、また調べ・・・・「HOME」と「ブログ」と名付けた特別な2つは、ここで編集(カスタマイズ)すると判明↓

●投稿・固定ページの基本設定をする

WP管理画面:外観>カスタマイズ>投稿・固定ページ

●タイトル

「タイトルの表示位置」という項目の「コンテンツ内」「コンテンツ上」の意味がよく分からなかったが、どうやらページの上部をヘッダー部分、それから下をコンテンツ部分と区分しているようだ。

ヘッダー部分には、背景に画像など入れることができるようにコンテンツ部分と分けている。
タイトルを「コンテンツ上」にすると、そのタイトルの背景に画像を置くことができる。
タイトルを「コンテンツ内」にすると、普通の大文字の標題的扱いだ。

ブログの各記事の標題(タイトル)はシンプルでいいので、「投稿ページ」は「コンテンツ内」。
「固定ページ」は、タイトルバックに写真を使うので「コンテンツ上」。

また、「タイトル横に表示する日付」とは、タイトルの最初に年月日が入る。デフォルトでは、公開日と更新日がともにチェックが入っている。技術情報など、公開日・更新日共に大事なデータとなる記事もあろう。が、私のサイトはそういう性質の記事ではないので、公開日だけにした。

●アイキャッチ画像

固定・投稿ページともに、アイキャッチ画像を本文のトップで見せることはないので、チェックはしない。

●目次

自動生成してくれるので、固定・投稿ページともに目次表示にチェックを入れる。
個別記事で不要と思えるのがあれば、その記事作成中に個別に目次を削除できる。

●SNSシェアボタン

今のところは、全て外しておく

●記事下エリア

前後記事へのページリンクを表示くらいかな。


●メインビジュアル(サイトトップの写真)を設置する

WP管理画面:外観>カスタマイズ>トップページ

●メインビジュアル

出た、これ!
スライド[1]の所に、メインビジュアル画像をライブラリからセット。

メインテキスト[1]が、サイト名 「街の里庭日記」
サブテキスト[1]が、キャッチコピー 「里庭歳時記・庭遊び・虫&鳥・庭木剪定・草花の育て方」

これでサイトトップのヘッド画像が設定されました

トップページのカスタマイズ画面

●ヘッダーバーが常に上部に見えるようにする(迷子防止)

WP管理画面:外観>カスタマイズ>ヘッダー

ヘッダーとは、全てのページで常時一番上に表示されている部分です。
どのページに飛んでも左上に「街の里庭日記」が表示され続けていますので、迷子にならなくて済みます。

「ヘッダーの追従設定」とは、画面を下にスクロールしたときに、ヘッダー部分だけは消えずに、上部に残ったままになるという便利な機能です。

●サイトトップの写真からヘッダーバーを消す

WP管理画面:外観>カスタマイズ>追加CSS

ところで、上記で『ヘッダーとは、全てのページで常時一番上に表示されている部分』と書いた通り、サイトトップの画面でも表示されます。メインビジュアルの写真の中で左上に「街の里庭日記」というタイトルがずっと出ているんですね~。はて、これはどうすれば消えるのか…?
ググるとありました。
特定のページで「ヘッダー」や「フッター」を非表示にする方法

カスタマイズの一番下に「追加CSS」という項があり、そこにCSSを追記すればOK。
おぉ~、見事に消えました。

●サイトタイトルの文字サイズ変更

WP管理画面:外観>カスタマイズ>追加CSS

さて、ようやく出来上がり・・・なんですが、「街の里庭日記」の文字が少し小さいかな? ブラウザを縮めた時には気になりませんでしたが、フルサイズにすると景色の中に埋もれていますね~。どうしたら変更できるの??…と、またも検索。

どうやら、また「追加CSS」を使うらしいと知り、しかもそのCSSはテーマによって記載内容が違うので、SWELL用のCSSが必要なようだ。と、ありました!
【SWELL】さぁ、始めようのフォントサイズ変更方法(メインビジュアルのカスタマイズ)

一つ前で設定したCSSの後ろに、上記サイトからCSSをコピペして貼り付けるだけ。有難い。
で、どうやらデフォルトサイズが28pxらしいので、次は36か・・・やってみると、おぉ見やすくなった。ためしに48は? あ~、これはちょっと大きすぎかな。

というわけで、暗中模索の中、検索記事を手掛かりにメインビジュアルを設置できました♪

目次