ヘッダーに画像を追加

シェアする

  • このエントリーをはてなブックマークに追加
IMG_7574

ヘッダー、トップページのタイトル部分に画像を挿入します。

テーマがSimlicityの場合、カスタマイズ画面にヘッダー編集があるので、これも簡単です。

今回、パソコンとタブレットはこんな感じ↓

のんびりママの気になる木 ページ 2 主婦ブロガーのワードプレスカスタマイズ・アフィリエイト・育児など日記・楽書

スマホはこんな感じにしました↓

IMG_7574

同じ画像ですね。なんとなく、リビングでPCをのんびりやってるイメージ?

我が家ではありません、写真素材のサイトから頂きました。

ブログで使える無料の写真素材
記事によっては、自分で撮影した画像を使っていますが、他のサイトから、写真やイラストの素材をお借りしています。素敵な写真がたくさんあります。 ...

これを、自分でJTrimというソフトを使って、サイズなど調整しています。
JTrimは画像加工のフリーソフトです。ペイントなど、他のソフトでもいいと思います。

ヘッダー用のフリー素材をお借りしてもいいですね。
検索すると出てきますよ。

スポンサーリンク

設定方法

今回は、ヘッダーは画像のみ。ロゴはそのままの設定です。
とりあえず、ヘッダー画像を設定します。画面幅全体の画像を設定します。

カスタマイズ ⇒ ヘッダー ⇒ ヘッダー外側背景画像 ⇒ 新規画像を追加

でアップロードします。ヘッダーの高さを調節します。自分で入れます。180にしました。
グローバルナビも合わせて、横幅いっぱいにします。☑をいれます。

ちなみに、ロゴを画像にする場合は、その下を☑して、その下に画像を追加します。

その下に、今度は、モバイル用の画像をアップします。

なお、タブレットのヘッダーをPCと同じにしたい場合は、レイアウト(全体・リスト)の中の
タブレットはモバイル表示の☑をはずします。
個人的には、タブレットは、モバイルより、PCに合わせた方が見やすいと思います。

ヘッダーの画像、背景の画像設定は、お気に入りの画像を選んで挿入するだけで簡単です。
ロゴにしたい場合は、画像を、自分で作ってからなので、少し難しいですね。
もう少ししたら、作成しようと思っています :-)

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る