& Plants

植物を育てる記録

WordPressテーマMimboloveのメイン画像差し替え方

趣味用のブログをWordPressで作りました!

最初の記事がこれなんですが、WordPressが初心者すぎて全然ダメだったので、今後実施していく様々なカスタマイズのログもこちらに残していこうと思います。

WordPressテーマ Mimbolove のメイン画像差し替え方法ですが、大きな流れは以下です。

  1. 差し替えるメイン画像を用意する
  2. メイン画像をWordPressのサーバにアップロードする
  3. Mimboloveのヘッダーファイルで、画像のパスを書き換える。

差し替えるメイン画像を用意する

まずは画像の用意です。自分はMac利用者で、iPhotoで写真を管理しているので、それ前提で進めます。

iPhotoで利用したい画像を拡大表示し、右下の「編集」ボタンを押します。

右側に編集メニューが出るので、「トリミング」を選択します。

画像サイズを選択するプルダウンで一番下の「カスタム」を選び、サイズは1021*244で入力します、

マウスで切り取る箇所を調節して「完了」をクリックします。この時点で切り取り画像ができたように見えますが、実際はまだファイル生成されていません。

iPhotoの「ファイル」メニューから「書き出す」を選択し、名前をつけてファイルを保存します。この時点でファイルが生成されます。これで画像の準備が完了です。

メイン画像をWordPressのサーバにアップロードする

WordPressのダッシュボードの左側メニューの「メディア」を選択し「新規追加」をクリックして、先ほど作成した画像ファイルを選択し、アップロードします。

右側にアップロードした画像ファイルのURLが表示されるの適当なテキストファイルにコピペしておきましょう。

Mimboloveのヘッダーファイルで、画像のパスを書き換える

/wp-content/themes/mimbolove 配下にある、header.phpを編集します。

テキストエディタで開くと、下の方に以下の箇所があります。

<img id=”header-img” src=”” height=”height; ?>” width=”width; ?>” alt=”” />

これに以下の赤字部分を追記します。

<img id=”header-img” src=”<先ほどコピペしたURL> ” height=”height; ?>” width=”width; ?>” alt=”” />

これでメイン画像の差し替えが完了しました。

メイン画像はブログの顔なのでこだわりたいですよね。自分も季節にあわせて更新していきたいと(今のところは)思っています。

追記:結局テーマを変更したので、現状表示されているのはMimboloveテーマではなく、Stinger2というテーマです。


追記

この記事を書いた当時はWordPressを始めたばかりでしたが、現在はブロックエディタ(Gutenberg)の登場でカスタマイズがさらに直感的になっています。テーマによってはヘッダー画像の差し替えも管理画面から簡単にできるようになりました。WordPressはバージョンを重ねるごとに便利になっていますね。