賢威ヘッダーを画像へ変更カスタマイズ!幅や高さサイズは?

今回はWordPressテーマ賢威の
ヘッダーをテキストから画像へ変更
するカスタマイズ方法を紹介します。

↓このサイトでいうと以下がヘッダー画像です。
サラリーマン専門アフィリエイト入門サイト_header
 

ヘッダーをオリジナル画像に設定し、
他のサイトとの差別化をしましょう。

賢威のヘッダーを画像へ変更するための画像の準備

まず、
ヘッダー画像を変更する前に
画像を準備する必要があります。

画像サイズは、
サイトの横幅に合わせると良いでしょう。

サイトの横幅は以下から
確認することができます。
 

WordPressのダッシュボードにある
「外観」→「テーマエディター」をクリックします。
WordPressの外観のテーマエディター
 
賢威 ヘッダー 画像 変更 カスタマイズ 幅 サイズ layout.css

「layout.css」は賢威サイトのレイアウト
を管理するためのCSSで、このファイルで
サイトの横幅を設定しています。

参考→賢威6.2のテンプレート一覧(phpとcss)

「layout.css」を開いたら、
「px」で検索してみてください。

※検索はショートカットキー「CTRL + F」
 

サイト横幅は
1~3カラムごとに設定されていますが、
デフォルトの状態から変更していなければ
全て同じサイズのはずです。

以下のように「950px」などと
表示されているのではないでしょうか?

これがサイトの横幅ですので、
このサイズに合わせて画像を
準備しましょう。
 

縦のサイズは任意です。
他のサイトを参考にすると良いでしょう。

参考にしたい賢威のサイトを開いて、
そのサイトのヘッダー画像の上で
「右クリック」
→「名前をつけて画像を保存」
をクリックします。

そうすると、
他サイトのヘッダー画像を
ダウンロードすることができますので、
そのサイズを確認します。

画像の「プロパティ」→「詳細」
で確認できます。
 

画像が準備できたら、
ダッシュボードの「メディア」から
「新規追加」でアップロードします。

アップロードした画像のURL
後で使用しますので、メモ帳などに
コピーしておいてください。
画像URLをコピー

賢威のヘッダーを画像へ変更するカスタマイズ方法

ダッシュボードの「外観」→「テーマ編集」
→「ヘッダー(header.php)」をクリック。
賢威 ヘッダー 画像 変更 カスタマイズ 幅 サイズ ヘッダー header.php
 

「header.php」内の
「<!–▼ヘッダー–>」~
「<!–▲ヘッダー–>」間を編集します。

編集する部分は以下です。

■編集前


■編集後

「画像URL」はメモ帳などにコピーした
ヘッダー画像のURLです。

編集したら、
【ファイルを更新】をクリックします。
ファイルを更新
 

以上で
ヘッダー画像の設定は完了です。
 

ヘッダーはオリジナル画像を設定し、
他サイトとの差別化していきましょう。

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。

CAPTCHA