ヘッダー画像の作り方

ヘッダー画像はサイトの顔になり、他サイトとの差別化にもなります。

 

サイトを開いた時にヘッダー画像がいまいちだと訪問者がすぐにサイトから離れてしまいます。そうすると、Googleからも良い印象が得られない場合があるのでしっかりと作成していきましょう。

 

 

ヘッダー画像を入手する

 

自分で使いたい画像があれば、あらかじめ準備しておきます。

 

画像の用意がなければ僕も使用している「AC写真」「ACイラスト」や他の無料画像サイトで画像をダウンロードしておきます。

 

無料イラストなら【イラストAC】

無料写真素材なら【写真AC】

 

最近はスマホの画質もキレイなのでスマホで撮影したものをパソコンに取り込んでもOKです。

 

ヘッダー画像の大きさに編集

 

 

今回は無料画像サイトで見つけたこちらを使って作り変えます。

 

ここからSIRIUS2のデフォルトヘッダーサイズは「1400 x 600px」・「1400 x 440px」です。

 

パソコン本体にも写真編集が出来るものがほとんどなので上記のどちらかのヘッダーサイズに変換しましょう。

 

 

SIRIUS2のデフォルトヘッダーサイズは「1400 x 600px」・「1400 x 440px」と、横長なモノになります。

 

ご自身で使用する画像を探す時、縦長の物を探すと、サイズ変更した時にいびつな形になってしまいますので、探す時はあらかじめ横長の画像を探しましょう。

 

画像の保存

 

作成した画像をファイル→「名前を付けて保存」をします。

 

 

ちなみに画像の保存場所が「デスクトップ」がおススメです。

 

ヘッダーに文字を入れる

 

先程切り取った画像に文字を入れていきます。

 

SIRIUS上部の「編集」→「ヘッダー画像」→「ヘッダー画像の編集」をクリックします。編集ページが開きますので左上の「新規作成」をクリックし、さらに開いたページで「新規作成」をクリックします。

 

すると編集する画像ファイル選択を求めらるので、先ほど切り取った画像を選択します。

 

 

ここから文字入れスタートです。

 

文で説明するよりも操作した方が簡単なのでポイントだけお伝えします。

 

・ヘッダーの文字は「HGS明朝」がおススメです。

 

・縁取りや反射効果の多用はスマホ画面で見たときに見にくくなるので多用は避けましょう。

 

・画像に対して見やすい文字色をプレビューを見ながら選びましょう。

 

ヘッダー画像が作成出来たら「設定を保存」をクリック。(必ずしておきましょう!!)

 

 

保存をしておくとヘッダーの編集内容が保存されるファイルが出来ます。

 

あとで変更したい時に「設定を開く」でファイルを読み込ませれば再編集が簡単に出来ます。

 

せっかく作ったものをまた最初から作りなおすのは面倒ですので。

 

 

「画像出力」をクリック。フォルダが自動的に開きますが、このまま保存はしません。

 

フォルダ「SIRIUS」をクリックした後に現れる「images」フォルダに好きな名前を付けて保存します。

 

 

自作ヘッダー画像をサイトに適用させていきます。

 

SIRIUSの「サイト全体設定」をクリック。

 

 

「ヘッダー画像」の参照をクリックして、自作したヘッダー画像を選択して終了です。

 

「サイト生成」→「すべてのファイルを生成」をしないと反映されない場合があります。

 

また、更新してすぐにページを開いても反映されていないこともあるので、そのような場合は少し時間をおいてからもう一度確認してください。