賢威8でヘッダーが画像を中央に100パーセント原寸大で表示する方法

 

賢威8でサイトのヘッダー画像を設定する方法を解説します。

サクラチカサクラチカ

賢威8はタイトル文字の代わりにヘッダー画像(ロゴ画像)を設定することができます。

 

賢威8でサイト名をヘッダーのロゴ画像と差し替える方法

 

ヘッダー画像を設定していないデフォルトの設定では、

テキストでサイトタイトルが表示されています。

 

サクラチカサクラチカ

スライダー(複数の写真や画像を切り替える表示)を設定している場合は、あえてヘッダー画像を設定しないでシンプルにする、というのもありかなとも思います。色々やってみてブラッシュアップしていきましょう。



ヘッダー(ロゴ)画像は「賢威の設定」で設置できる

賢威8でヘッダーのロゴ画像を反映させるには「賢威の設定」から

 

ワードプレスの管理画面(ダッシュポート)で左のサイドバーから

賢威の設定」をクリックします。

 

賢威8でロゴ画像を左端から真ん中に変える方法

 

ロゴ画像」→「画像をアップロード」をクリックし、

画像をアップロードします。

 

賢威8でロゴ画像のサイズはどのくらいが最適か

 

サクラチカサクラチカ

このバナーは「バナープラス」という有料画像編集ソフトと無料イラスト配布サイトの画像を組み合わせて作りました。

 

オシャレなバナーが簡単に作れるツール「バナープラス」のレビュー記事はコチラです。

↓    ↓    ↓    ↓

 

賢威8でヘッダーのロゴ画像の設定のやり方

 

画面を一番下までスクロールして「変更を保存」をクリックしてください。

 

賢威8でヘッダーのロゴ画像を大きなサイズで幅いっぱいに設定するのに適正なサイズ

 

デフォルトでは画面の左上にロゴ画像が表示され流ようになっています。



賢威8でヘッダーのロゴ画像を真ん中に表示させる方法

賢威8でデフォルトのヘッダーがぞうは左よりで縮小されるので、追加CSSで原寸大に表示されるようにする

 

ロゴ画像の種類によっては、左上に寄っているとイマイチかっこ悪い感じに…。

カフェオーナーさんカフェオーナーさん

あれ?この「お店のサイトを自分で作ろう」のヘッダーは大きなロゴ画面が全面に表示されてますよね?これ、どうやってやるんですか?

サクラチカサクラチカ

これは、「子テーマ」を使って「追加CSS」という部分をいじってカスタマイズしているんです。初心者の人には難しそうに思えますが、お手本通りにやれば簡単です。

 

賢威8の「子テーマ」の導入の仕方についてまとめた記事はコチラです。

読みながら導入してください。(悩まない!見たままやる!)

↓    ↓    ↓    ↓

 

追加CSSでロゴ画像を中央に表示する方法

賢威8の追加CSSでヘッダーのロゴ画像を原寸大で表示する方法

 

WordPressにログインした状態で自分のサイトを表示し、

上の黒枠の「カスタマイズ」をクリックします。

 

賢威8の子テーマで追加CSSにコードを記入してヘッダーのロゴ画像を大きく中央に表示させる方法

 

現在のテーマが「賢威8.0(子テーマ)」になっていることを確認します。

左の一番下にある「追加CSS」をクリック。

 

サイトを表示→カスタマイズ→追加CSS

 

.keni-header .site-title, .keni-header_col1 .site-title {
float: none;
max-width: 100%;
text-align: center;
}

 

↑のコードをそのままコピー&ペーストしてください。

 

一番上にある「公開」をクリックすれば完了です。

 

賢威8でロゴ画像とスライダーのサイズの割合はどのくらいが良いか

 

サクラチカサクラチカ

無事にロゴが中央に表示されました。

 

賢威8でヘッダーのロゴ画像のサイズはどのくらいが最適なのか

このロゴのサイズは、

横400ピクセル×172ピクセルです。

 

スライダー(写真が切り替わる表示)も使っているので、

あまり大きくなりすぎないようにしました。

サクラチカサクラチカ

実際に設定してみて、自分なりにしっくりくるサイズを探しましょう。

 

 

この「お店のサイトを自分で作る」のヘッダーのロゴ画像は、

横1600ピクセル×縦480ピクセルのサイズで作成しています。

 

賢威8ではレスポンシブデザインというのが採用されているので、

スマホで表示した時に自動的にスマホの幅にあったサイズにロゴが表示されます。

 

サクラチカサクラチカ

このサイトはスライダー(複数の写真を自動で切り替える)を採用していないので、PCで表示した時に幅いっぱいに大きなロゴ画像が出るようにしています。

 

ロゴには、

  • サイトのタイトル
  • どんなサイトなのかの説明

これらの情報を入れましょう。

サクラチカサクラチカ

サイトのロゴ画像はとても大事なので、理想の形になるまで作り直してブラッシュアップしていきましょう。

この記事が役に立ったらソーシャルメディアで共有してくださいね