しらたまです。
今日も忙しいママのためのネットビジネスキャリアアップ講座を始めます。
このブログでは、忙しいママがすきま時間に取り組むビジネスとして、ブログアフィリエイトをおすすめしています。
ブログアフィリエイトは、
・ブログを作る
・ブログの中で商品を紹介する
・あなたのブログから商品が売れると、報酬がもらえる
こんな感じで収入になるので、まずはブログがないと始まりません。
ブログアフィリエイトをするための、WordPressを利用したブログの作り方は
稼げるブログを作っちゃおう！WordPress構築関連の記事一覧へ
こちらで解説しています。
今日は、WordPressでブログの背景やヘッダー画像を設定する方法を解説します。
・デザインのこだわりすぎに注意！
・WordPressで背景画像を設定する方法
・WordPressでヘッダー画像を設定する方法
こんな内容で進めていきますね。
この記事に書いてあること
デザインのこだわりすぎに注意！
これからデザインの話をするのに、身も蓋もない…
そう思われるかもしれませんが、大切なので聞いてください。
WordPress初心者さんは、テーマや背景、ヘッダー画像など、ブログのデザインにこだわって、時間をかけすぎてしまう傾向があります。
もちろん、パッとみて「あっいいな」と思わせるような雰囲気作りは大切です。
ですが、読者さんが最終的に重視するのはデザインよりも記事の内容。
デザインにこだわって時間をかけすぎてもアクセスは増えません。
デザインに時間をかけすぎて作業が進まず、成果が出るのが遅れると、あなたが挫折してしまう確率が上がります。
凝ったデザインのブログじゃなくても大丈夫です。
今はなるべく早く記事を書いて、成果を出すことを優先しましょう。
デザインは後から変更できるので、時間に余裕ができたら凝ってみるのもいいかもしれませんね。
詳しくは、
【ブログをカスタマイズする時に考えるべき「3秒の壁」とは？外観はターゲットの興味を惹きつけるものに！】
こちらの記事でも解説していますので、まだ読んでいない方はちょっと目を通してみて下さい。
あなたにこだわってほしいのは…
・読者さんが好感を持つ様なデザイン
この2つです。
くれぐれも凝りすぎて時間を浪費しないよう、気をつけて下さいね。
２つの心構えができたら、さっそく始めていきましょう。
Simplicity2で背景画像を設定する方法
ここでは、Simplicity2というテーマを利用している場合の、背景画像の設定方法を、図解します。利用しているテーマが異なる場合には、多少操作が違う可能性があるので、ご注意を。
背景画像やヘッダー画像を設定すると、簡単にブログの雰囲気を作ることができるので、ぜひ設定してみて下さいね。
1. 背景用の画像を用意する
何はともあれ、まずは背景に使用する画像を用意しないと始まりません。
無料の画像サイトについては、
【無料なのに商用利用OK！ブログアフィリエイトにおすすめの画像サイト3選と、ブログに画像を使う効果を解説】
こちらの記事を参考にしてください。
・使用したい画像を画像サイトからダウンロード
・画像を圧縮（圧縮サイト＋EWWW Image Optimizerを利用）
この2つが終わったら、作業を始める準備が整いますが…
どんな画像を選んだら良いのかをイメージするためには、とりあえず記事を最後まで読んで、イメージしながら画像探しを始める方がおすすめです。
背景用の画像を選ぶ時の注意点が2つあります。
・画像は大きめのものを選ぶ
・シンプルな画像を選ぶ
サイズについては、写真ACの場合で説明すると…
MediumかLargeならOKですね。
Smallだと小さすぎるので、Medium以上のサイズを選ぶようにしましょう。
ちなみに、先ほどの「無料の画像サイト3選」の記事に、私のおすすめ無料画像圧縮サイトへのリンクも紹介しています。
EWWW Image Optimizerは自動で画像を圧縮してくれるWordPressのプラグインです。
導入がまだの場合は、
【EWWW Image Optimizerは画像を自動で圧縮するプラグイン！設定方法と使い方を解説します】
こちらで、インストール方法〜使い方までを解説しています。
2. 使用したい画像をメディアライブラリに登録
WordPressの管理画面、左側のツールバーを表示します。
「メディア」→「新規追加」をクリック。
登録する画像を点線の四角の中にドロップするか、「ファイルを選択」から選びます。
画像が登録されると、このように下に表示されます。
登録された画像はブログの中で使用することができますよ。
上記の方法以外に、「メディア」→「ライブラリ」を表示して、メディアライブラリの中に直接ドラッグ＆ドロップしても画像を登録できます。
3. 背景画像をWordPressで設定する
同じくWordPressの管理画面のツールバーから…
「外観」→「背景」をクリック。
「画像を選択」をクリック。
左上の方に「メディアライブラリ」「ファイルをアップロード」とあるので、「メディアライブラリ」をクリックします。
設定したい画像をクリックして選択したら、右下の「画像の選択」をクリックします。
するとこんな感じで、先ほど選択した背景画像ありのプレビュー画面が表示されます。
画像がこれでよければ、左上にある「保存して公開」をクリックします。
背景の設定前と設置後の実際のページがこちらです。
・設定前（背景なし）
・設置後（背景あり）
背景を設定しただけで、ぐっと素敵になったと思いませんか？
これなら簡単ににブログを素敵にできますね。
画像を選ぶコツとしては、
・タイトルやサブタイトルが表示される左上の角がごちゃごちゃしていない
・最近の投稿やコメントなどの記事が並ぶ右サイドが、すっきりしている
こういったものが使いやすいと思います。
Simplicity2でヘッダー画像を設定する方法
今度はヘッダー画像の設定方法について解説します。
わかりやすくするために、先ほど設定した背景を一旦白紙に戻した状態の画面で説明しますね。
1. ヘッダー用の画像を準備する
ヘッダー画像とは、ブログの一番上に表示される、横長の画像のことです。
ヘッダー用の画像を設定するには、先に横長の画像を準備する必要があります。
まず、画像サイトで横1280px（ピクセル）以上ｘ縦200px以上の画像を用意します。
【無料なのに商用利用OK！ブログアフィリエイトにおすすめの画像サイト3選と、ブログに画像を使う効果を解説】
こちらの記事でご紹介した、「写真AC」を例に説明しましょう。
上記の画像であれば、mediumサイズをダウンロードすれば横1280px以上になっていますね。
次に、画像をパソコン上であらかじめ、縦200〜450px程度の横長の画像に加工します。（ダウンロードした画像の幅によっては、横幅も1280px程度の幅に加工して下さい。）
この横長の画像を圧縮し、先ほど同様メディアライブラリに登録してください。
ちなみに、Macで画像を加工する方法が分からない場合は、
Macの画像編集を無料アプリでする方法！「プレビュー」で画像を編集する基本の操作を図解します
こちらの記事を参考にして下さいね。
2. 画面の幅いっぱいになるようにヘッダー画像を設定する
次に、WordPressの管理画面から…
「外観」→「ヘッダー」をクリックします。
”ヘッダー外側背景画像”の「画像を選択」をクリックします。
※先にヘッダー画像を設定していた場合は、そちらを非表示にしてください。
「メディアライブラリ」から、先ほどの横長に加工した画像を選択し、右下の「画像の選択」をクリックします。
先ほど同様、プレビュー画面が表示されるので…
これでよければ、「保存して公開」をクリックして下さい。
実際の画面は、こんな感じになりました。（ちょっとタイトルが見辛くなっちゃいましたね。）
3. 記事の表示幅に合わせてヘッダー画像を設定する
先ほどは、”ヘッダー外側画像”で画像を選択しましたね。そうすると、画面の横幅いっぱいにヘッダー画像が表示されました。
今度は、記事が表示される幅に合わせてヘッダー画像が表示される方法です。
先ほど同様、WordPressの管理画面から…
「外観」→「ヘッダー」をクリックします。
一番上に、”現在のヘッダー”という項目があるので、ここで「新規画像を追加」をクリック。
あとは、先ほどと同じ様に画像を登録して下さい。
ここで画像を追加すると、両端が切れた形のヘッダー画像となります。
下記のような感じになるので、上の画像と見比べてみてください。
画面いっぱいに広がるのがいいか、両端が切れているのがいいかは、お好みで。
個人的には、画面いっぱいに広がっているタイプの方が、デザイン的には簡単におしゃれっぽくなるんじゃないかな〜と思います。
スポンサーリンク
デザインが苦手でもブログをおしゃれに見せるコツは？
さて、背景とヘッダー、両方に画像を登録すれば、もちろん両方とも表示されるのですが…
最初にちょっと触れましたが、いざやってみると、意外とセンス良く組み合わせるのが難しいです。
デザインが特別得意でない場合、短時間でセンス良く仕上げるには
・どちらか1つだけを設定する
・背景画像を単色のほとんど柄のないものにする
というのがおすすめです。
また、ヘッダー画像は横長でもちゃんと絵になる画像を準備しなくてはならないのですが、これがなかなか良いものが見つからないんですよね。
ということで、一番早くて簡単な「背景だけ設定する方法」がイチオシです。
ちなみに、このブログはシンプルな背景画像に、ヘッダー画像を設定する方法で作成しています。
ヘッダーは水彩の画像を写真ACからダウンロードして、サイズ調整をして作りました。
案外それらしく見えます…よね？
サイトのタイトルを、簡単にオリジナルのロゴ画像にする方法があります！
ここまでで、シンプルながらも素敵なブログになってきたかな…と思います。
それを、さらにグレードアップ！
あなたのブログのタイトルを、かわいいロゴにしてみたくありませんか？
実は、簡単にオリジナルのロゴ画像を作るサイトがあるんです。
詳しくは、
無料で簡単にシンプルなサイトロゴが作成できる！ウェブデザイナーもおすすめの「STORES.jp LOGO MAKER」でヘッダーをもっとオシャレに♪
こちらの記事も、あわせて読んでみて下さいね。
まとめ
お疲れさまでした。素敵に仕上がりましたか？
外観やヘッダーの画像を設定すると急にブログらしくなって、何だかうれしくなりますよね。
・ヘッダー画像はメディアライブラリに登録する前に、サイズの変更が必要
・デザインが苦手な場合には、シンプルな画像で背景だけを設定するとまとまりやすい
ぜひ簡単に、おしゃれなブログを作ってみて下さいね。
そして、カスタマイズする時には「読者さんが好むデザイン」を心がけるのを、忘れずに。
次回からも、時間をかけずにブログをちょっと素敵にする方法について、解説していきます。では、また🐾
