たかゆき 賢威7のヘッダーの変更方法が分からない・・。
ヘッダーに最適な画像のサイズが分からない・・。
今回はこんな悩みを持っているあなたのために、賢威7のヘッダーカスタマイズ方法を詳しく解説していきます。
ヘッダー画像の幅や高さだけではなく、ヘッダー画像を作る方法も紹介するので、この記事を参考にヘッダーをかっこよくカスタマイズしてください。
賢威7に最適なヘッダーのサイズは？
賢威7のヘッダーをカスタマイズする際に使う画像は横幅1200pxが目安。
記事スペースとサイドバーを足した横幅が1200pxなので、このサイズだと画像サイズ的にピッタリです。
(メニュー下のメイン画像は、スマホ表示にした場合の縮小率を考えて少し大きいサイズを使ってあります。)
ただ、問題なのは高さをどのくらいに設定するか？
賢威7はレスポンシブデザインなのでスマホで見た場合にはヘッダー画像が縮小されてしまい、高さが低いと文字が読めなくなってしまいます。
なので、低くても300px～350px。
高くても400px～450pxくらいがベストです。
参考までに1200px×300pxの画像をヘッダーに設定するとこんな感じ。
これがスマホ表示だとここまで縮小されます。
文字を大きめにしているので普通にタイトルは読めますが、これ以上細かな文字にしてしまうとスマホ表示では判読不可能。
そこでおすすめなのがヘッダー画像をロゴサイズにしてしまうことです。
下記のように570px×120pxくらいのロゴ画像を作っておけば、パソコン表示でもスマホ表示でも問題はありません。
スマホ表示でもこの大きさ。
初めてヘッダー画像を作る時は細々と作り込んでしまいがちですが、僕はシンプルなものをおすすめします。
ヘッダー画像を作る方法
ヘッダー画像は元となる画像と文字入れツールがあれば簡単に作成することができます。
作業の流れは次の3ステップ。
- ベースとなる画像を用意する
- 画像をヘッダーサイズに合わせて切り取る
- 切り取った画像に文字を入れる
これらは全て無料のサイトやツールを使ってできます。
まずは無料素材サイトからベースとなる画像を入手。
画像が決まったらPhotoScapeという無料ソフトでヘッダーの大きさに合わせて画像を切り抜きます(使い方はググってみてね)。
切り抜きが終わったら、そのまま文字を入れることが可能です。
シンプルなロゴを作りたいならロゴメーカーというサイトも便利。
ソフトをインストールせずに無料で簡単にロゴ作成ができます。
無料ではなく、もう少し本格的にヘッダー画像やロゴを作りたいのであればPhotshop Elements(フォトショップエレメンツ)というソフトがおすすめ。
これがあれば写真を使ったバナーやアイキャッチ画像が思いのままに作れるので、画像作成に困ることはありません。
このサイトのロゴもPhotshop Elementsで作っているのですが、PhotshopCCのように月額課金ではないので安く使えて本当に便利です。
賢威7のヘッダー画像(ロゴ)の設定方法
ヘッダーに使う画像を用意したら賢威7の設定に移りましょう。
まずはWordPressのダッシュボードに進み、【賢威の設定】をクリックします。
中段より少し下のロゴ画像という項目で、【画像を設定する】を選びます。
用意した画像をドラッグ&ドロップして移動。
フルサイズを選択して【投稿に挿入】をクリックしましょう。
これでロゴ画像がヘッダーに挿入されます。
画面の一番下まで進んで【変更を保存】をクリックしましょう。
サイトを表示して確認すると設定が反映されています。
これで賢威7のヘッダー画像の設定は終了です。
画像さえ用意できれば後は簡単ですね。
