賢威ヘッダーを画像へ変更カスタマイズ!幅や高さサイズは?
今回はWordPressテーマ賢威の
ヘッダーをテキストから画像へ変更
するカスタマイズ方法を紹介します。
↓このサイトでいうと以下がヘッダー画像です。
ヘッダーをオリジナル画像に設定し、
他のサイトとの差別化をしましょう。
賢威のヘッダーを画像へ変更するための画像の準備
まず、
ヘッダー画像を変更する前に
画像を準備する必要があります。
画像サイズは、
サイトの横幅に合わせると良いでしょう。
サイトの横幅は以下から
確認することができます。
WordPressのダッシュボードにある
「外観」→「テーマエディター」をクリックします。
「layout.css」は賢威サイトのレイアウト
を管理するためのCSSで、このファイルで
サイトの横幅を設定しています。
「layout.css」を開いたら、
「px」で検索してみてください。
※検索はショートカットキー「CTRL + F」
サイト横幅は
1~3カラムごとに設定されていますが、
デフォルトの状態から変更していなければ
全て同じサイズのはずです。
以下のように「950px」などと
表示されているのではないでしょうか?
1 2 3 |
.col2r .copyright p{ width: 950px; margin: auto; |
これがサイトの横幅ですので、
このサイズに合わせて画像を
準備しましょう。
縦のサイズは任意です。
他のサイトを参考にすると良いでしょう。
参考にしたい賢威のサイトを開いて、
そのサイトのヘッダー画像の上で
「右クリック」
→「名前をつけて画像を保存」
をクリックします。
そうすると、
他サイトのヘッダー画像を
ダウンロードすることができますので、
そのサイズを確認します。
画像の「プロパティ」→「詳細」
で確認できます。
画像が準備できたら、
ダッシュボードの「メディア」から
「新規追加」でアップロードします。
アップロードした画像のURLは
後で使用しますので、メモ帳などに
コピーしておいてください。
賢威のヘッダーを画像へ変更するカスタマイズ方法
ダッシュボードの「外観」→「テーマ編集」
→「ヘッダー(header.php)」をクリック。
「header.php」内の
「<!–▼ヘッダー–>」~
「<!–▲ヘッダー–>」間を編集します。
編集する部分は以下です。
■編集前
1 2 3 4 |
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p> <h1><?php h1_keni(); ?></h1> |
↓
■編集後
1 |
<h1><a href="<?php bloginfo('url'); ?>"><img src="画像のURL" alt="<?php h1_keni(); ?>"></a></h1> |
「画像URL」はメモ帳などにコピーした
ヘッダー画像のURLです。
編集したら、
【ファイルを更新】をクリックします。
以上で
ヘッダー画像の設定は完了です。
ヘッダーはオリジナル画像を設定し、
他サイトとの差別化していきましょう。
記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。
↓↓↓メルマガ登録は下のフォームから↓↓
無料メールマガジン登録フォーム

最近のコメント