固定ページのヘッダー画像の変更(バクマツ、ミナモト、トヨトミ)

この記事に関するテンプレート:バクマツミナモトトヨトミ

これらのテンプレートは固定ページ(トップページ以外の各ページ)に、ヘッダー画像が設定されています。

固定ページのヘッダー画像
バクマツのヘッダー画像

このまま変更しなくても何の問題もありません。

しかし、せっかくテンプレートを購入したのだから変更したい方もいると思います。

そこで変更方法をこの記事で紹介します。

変更方法

ヘッダー画像を変更するためには以下の手順が必要です。

  1. 画像を用意する
  2. 画像をワードプレスにアップロードする
  3. 追加CSSを変更する

ひとつひとつ紹介します。

1,画像を用意する

画像は自分で撮影した写真や、ネットでダウンロードした写真でも構いません。

ネットでダウンロードした写真の場合は、そのサイトの利用規約に注意してください。

以下のサイトがおすすめです。

ぱくたそ

登録不要で何枚でもダウンロードできます。AI写真もあります。

・写真AC

登録は必要で無料会員はダウンロードできる枚数に制限がありますが、高品質な写真が大量にあります。

ポイントはサイズです。

ヘッダー画像は横長であることを踏まえて選びましょう。

横サイズは1600px以上、縦サイズは200pxくらいでしょう。

このサイズ感の画像はないと思いますので、気に入った画像を自分でアプリやツールで切り取りましょう。

2,ワードプレスにアップロードする

ワードプレスに画像をアップロードします。

手順は以下の通りです。

メディア→新しいメディアファイルを追加→ファイルを選択

ダウンロードした写真をアップロードしてください。

正常にアップロードできれば以下のような画面になります。

右下の「URLをクリップボードにコピー」をクリックしてください。

ファイルのURLがコピーされます。

3,追加CSSを変更する

コピーしたURLを追加CSSへ貼り付けます。

外観→カスタマイズ→追加CSS

/* 固定ページのヘッダー背景を画像に変更*/

というメモ書きがされている箇所を探してください。

(※初心者の方は、念の為に追加CSSの全てをコピペしてパソコンのメモ帳に貼り付けておきましょう。)

「url(http~~~)」の()の中にあるURLをコピーしたURLに書き換えてください。

するとワードプレスが反応して勝手に画像が変わります。

他の部分は変えないように注意してください。変えるのは()の中だけにしましょう。

無事変更できたら「公開」ボタンを押したら完成です。

何か変だなと思えば公開ボタンを押さずにそのままページを閉じるか戻るかをしてカスタマイズ画面から移動してください。

警告画面が出るかもしれませんが、保存せずに移動してOKです。

編集終了

はじめて追加CSSを変更する方は、とても怖いと思います。

バックアップをとっておけば何かミスをしても何とかなるので、必ずメモ帳にバックアップをとっておいてほしいですね。