イヤな会社に縛られずPC1台で自由に稼ぐ
元ブラック塾講師Osamu先生が要介護の母の面倒を見ながらPC1台で稼ぐブログ

ブログテクニック

ヘッダー画像の作成と設定方法[テンプレートSimplicity編/PCとスマホ版]

 

Osamu
Osamu
こんにちは。Osamuです♪

 

今回は、あなたのブログサイトの
ヘッダー画像の作成や設定方法
についてお伝えしていこうと思います。

 

ヘッダーとは、あなたのブログの
一番上の場所のことを言います。

 

タイトルが表示されている
場所になりますね。

 

私がおすすめしている
無料テンプレートのSimplicity
(シンプリシティ)では、

 

テンプレート内でも、
ヘッダー画像を
編集することができます。

 

またその他の方法として、
画像編集ソフトの
フォトスケープを使って、

 

ヘッダー画像を
作成することもできます。

 

今回の動画講習では、
二通りのやり方をお伝えしますが、

 

今後必ず使うことになる
画像編集ソフトの
フォトスケープを使って

 

ヘッダー画像を作成することを
おすすめしています。

 

もし、まだ画像編集ソフトの
フォトスケープ
導入していない場合は、

 

下のリンクから
動画を参考に導入してから、
こちらの記事に戻ってきてください。

無料画像編集ソフトPhotoScape(フォトスケープ)の導入と使い方無料画像編集ソフトPhotoScape(フォトスケープ)の導入と使い方の動画講習で学ぼう♪そして、画像を編集することによる効果やメリットは? ...

 

それでは動画講習で、
私と一緒に、ブログのヘッダー画像

 

作成と設定のやり方を
やっていきましょう。

 

Simplicity(シンプリシティ)のヘッダー画像の作成と設定方法[PC・スマホ版]の動画講習

 

画像編集ソフト・フォトスケープ
まだ導入されていない場合は、

下のリンクから
動画を参考に導入されてくださいね。

無料画像編集ソフトPhotoScape(フォトスケープ)の導入と使い方無料画像編集ソフトPhotoScape(フォトスケープ)の導入と使い方の動画講習で学ぼう♪そして、画像を編集することによる効果やメリットは? ...

 

画像の拡張子について
分からなかった場合は、

下のリンクの記事を
参考にされてくださいね。

画像を軽量化するプラグインEWWW Image Optimizerの導入と設定と使い方画像を軽量化するプラグインEWWW Image Optimizerの導入と設定と使い方を動画講習で学ぼう♪そして、画像の拡張子のjpgやpngについても綴ってみました。...

 

スマホ版のヘッダー画像についての補足

今回の動画講習でも、
スマホ版のヘッダー画像について
触れてきましたが、
補足としてお伝えしていきます。

 

ヘッダー画像は
あなたのブログのイメージを

 

伝えるために、
とても重要なものになりますので、

 

こだわりを持つことは
すごく大切なことです。

 

しかし、こだわりすぎて
スマホのヘッダー画像が

 

大きくなりすぎないように
注意しましょう。

 

今後あなたは、ブログサイトを運営し、
広告を設置するかと思いますが、

 

ヘッダー画像が大きすぎてしまうと、
ヘッダー広告とヘッダー画像だけで

 

スマホの画面を
埋めてしまうことになります。

 

そういったことがないように
注意することが必要になってきます。

 

広告とヘッダー画像だけで
スマホの画面が埋まってしまうと、

 

読者の方は、
何のサイトに入ってきたかが、
分からなくなってしまい、

 

混乱させることとなり、
ユーザビリティも下げてしまう
という結果になってしまいます。

 

ですので、
パソコンのヘッダー画像と同じものを
スマホサイトで使おうとした時に、

 

ヘッダーの高さが
すごく高くなってしまう
ような場合でしたら、

 

新たにスマホサイト用の
ヘッダー画像を作成して、

 

スマホサイトのヘッダーの高さを
低く抑えていきましょう。

 

ヘッダー画像とタイトルの文字の色の関係について

ヘッダー画像を導入したり
変更したりすることによって、

 

タイトルやサブタイトルの文字が
見にくくなってしまう場合があります。

 

そのような場合には、
文字の色の変更をしましょう。

 

文字の色を変更するには、
ワードプレスの管理画面のメニューの

 

「外観→カスタマイズ」
出てきたメニューの「色」
変更することができます。


パソコンサイトの場合は、
「サイトタイトル色」
「サイト概要色」で、

そしてスマホサイトの場合は、
「モバイルサイトタイトル色」
「モバイルサイト概要色」
変更することができます。

それぞれ選択すると、
パレットが開きますので、

画像に対して、
文字の色が目立つような色
選択すると良いでしょう。

 

今日も最後までご覧いただきまして
ありがとうございます。

アフィリエイト完全初心者が
月収10万円を稼ぐための予備校

メルマガ登録で教科書無料プレゼント