ブログやっとこブログWordPressでヘッダーに背景画像を設定する方法(テーマ:Xeory)やっとこブログ7年前WordPressでは「テーマ」をインストール使用することで、サイトのデザインを変更することが可能です。トップページに画像を大きく表示したテーマやシンプルなデザインのテーマ、パララックス効果を利用したテーマなど様々なテーマがあります。そんな中で今回はシンプルなデザインで人気の高いWordPressのテーマ「Xeory」で、ヘッダー部分に画像を設定する方法をご紹介します。ちなみにヘッダーの範囲は使用する「テーマ」で変わってしまいますが、今回の「Xeory」は下記の赤枠で囲ってある部分がヘッダーになります。この部分に任意の画像を設定する方法をご紹介します。1.WordPressにログインWordPressにログインします。WordPressへのログインは「WordPressをインストールした場所」で多少変わります。ドメイン直下のフォルダにインストールした場合は、「http://サイトURL/wp-login.php」、wpという名前のフォルダにインストールした場合は「http://サイトURL/wp/wp-login.php」になります。フォルダの名前によりますが、ほとんどの場合は、http://サイトURL/wp-login.phphttp://サイトURL/wp/wp-login.php上記のどちらかでログイン画面に移行できるはずです。下記のログイン画面が表示されたら、WordPressをインストールした時に設定した「ユーザー名」「パスワード」を入力して、WordPressにログインしましょう。2.使用する画像の取り込みWordPressにログインしたら、今回ヘッダー部分に使用する画像を管理画面からアップロードしましょう。画像のサイズは自由ですが、画像容量が大きい画像は表示される速度が遅くなるので控えましょう。今回追記するCSSは初期設定で縦横に画像が繰り返し表示されるので、「始まりと終わりが繋がる画像」や「単調な正方形等を複数つなげた画像」などが良いと思います。下図の様な「1辺が10pxの正方形」を色違いで縦に2つ並べた画像を、ヘッダーの背景画像に設定した場合はサイト上では下図のようにヘッダーに表示されます。縦横に繰り返し表示されていますね。自分のサイトに合わせて、表示させたい画像を用意してみましょう。2-1.メディアの新規追加ヘッダーに使用する画像を用意したら、WordPressに画像を新規追加しましょう。新規追加」をクリックします。2-2.使用する画像のアップロード「新規追加」をクリックすると、下図の赤枠で囲ってある「アップロードするファイルをドロップまたはファイルを選択」が表示されるます。赤枠で囲ってある部分に「ファイルをドロップ」してアップロードするか、「ファイルを選択」をクリックしてファイルを選択してアップロードするか、どちらでもよいので、今回ヘッダーに使用する画像をアップロードしましょう。アップロードが完了したら、下図のように下側にアップロードしたファイルが表示されますので、その右にある「編集」をクリックしましょう。2-3.URLのコピークリックすると下図の画面が表示されるので、赤枠で囲った部分のURLをメモしておくか、コピーしてメモ帳でもどこでも良いので張り付けておきましょう。この部分のURLを後で追記するCSSに使用します。3.CSSのカスタマイズ画像のアップロードが完了したら、次はヘッダーに画像を設定するために、該当箇所のCSSをカスタマイズしていきましょう。追記するCSSは1行だけですので、場所さえ分かってしまえば簡単に完了します。3-1.テーマの編集に移動WordPressのトップページから「外観」をクリックして「テーマの編集」をクリックしましょう。3-2.スタイルシート(style.css)をクリック下図の右下の赤枠で囲っている「スタイルシート(style.css)」をクリックしましょう。「スタイルシート(style.css)」を選択したら、該当箇所のCSSを検索していきます。キーボードの「ctrlキー」を押しながら「Fキー」を押して、「#header」と検索します。下図の赤枠で囲ってある「#header」の部分が出てくるはずです。この部分のCSSに1行追加します。変更場所の「#header」を検索できたら、ヘッダーに画像を設定するためのCSSを追記していきます。下記が初期の「#header」部分のCSSです。}上記のCSSを下記のように1行追加します。url(○○○);}(○○○)の部分には、先程「2-3.URLのコピー」でコピーやメモをしておいたURLを張り付けましょう。ちなみに今回追記したCSSは下記のCSSです。背景画像を指定する無事にCSSを追記したら、最後に下の「ファイルを更新」をクリックして、完了です。実際にサイトを確認すると、追記したCSSやURLに間違いがなければ、設定した画像がヘッダー部分に反映されているはずです。4.まとめ以上でWordPressでヘッダーに画像を設定する方法の完了です。今は無料の写真素材を取り扱っているサイトも多いので、自分のサイトに合った画像をダウンロードするのも良いですし、自分で画像を作成して「ボーダー」や「チェック」になるように設定するのも良いと思います。自分のサイトに合わせて設定してみてください。【その他】WordPressでトップに戻るボタンをカスタマイズする方法(テーマ:Xeory)WordPressでリストの表示位置を変更する方法WordPressでリストの背景に色を付ける方法WordPressで引用デザインをカスタマイズする方法(テーマ:Xeory)WordPressで行間と改行幅をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンの色をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンサイズをカスタマイズする方法(テーマ:Xeory)WordPressで表をカスタマイズする方法(テーマ:Xeory)上記の記事を参考にしてください。WordPress、Xeoryコメントするやっとこブログトップへ戻るモバイルバージョンを。