WordPress個別サポート

賢威のヘッダーやフッターの背景色はダウンロード前にテンプレートメーカーで設定できますが、使い始めてからカスタマイズしたくなることもあるでしょう。

ここではCSSを使って賢威のヘッダーやフッターの背景色を変更したり背景画像やロゴ画像を表示する方法を紹介します。コーポレート版を使います。

賢威のヘッダー周り(コーポレート版:カスタマイズ後)

賢威のヘッダー周り(コーポレート版:カスタマイズ後)

スポンサーリンク

ヘッダーに背景画像を表示する

ヘッダー部分に表示したい背景画像を「メディア」‐「新規追加」メニューからアップロードします。画像は自由ですが、つなぎ目が見えないように、素材集などで提供されている「背景用」の画像を使うのが無難です。

アップロードした背景用の画像

アップロードした背景用の画像

アップロードした画像をメディアライブラリでクリックしたときに開く「添付ファイルの詳細」からURLをコピーします。

アップロードした画像のURLをコピー

アップロードした画像のURLをコピー

カスタマイズに使うCSSファイルに次のCSSを入力します。「http:// --- .gif」の部分は、上記でコピーした画像のURLに置き換えてください。

#top,
#header {
    background: url(http:// --- .gif);
}
「賢威のデザインをカスタマイズするCSSをどこに入力すれば良いか」については、話が長くなるので説明を省略します。よくわからなければlayout.cssやmobile_layout.cssの最後の行に続けて入力してみてください。Jetpackプラグインをインストール済みの場合は「CSS編集」メニューでも大丈夫です。うまくいかないときはWordPress個別サポートなどにご相談ください。

これでヘッダー部分に背景画像が表示されます。

賢威のヘッダー部分に背景画像を表示

賢威のヘッダー部分に背景画像を表示

ヘッダーロゴを表示する

ヘッダーのサイト名の代わりにロゴを表示するには、header.phpに書かれた「header-logo」の部分を修正します。

ヘッダーのサイト名はheader.phpの「▼ヘッダー」の目印付近にある次のコードで表示されています。

<p class="header-logo">
<a href="<?php bloginfo('url'); ?>">
<?php bloginfo('name'); ?></a></p>

※便宜上、改行しています。

リンクの中でサイト名(bloginfo('name'))が文字で表示されているので、imgタグに置き換えて画像を表示するように変更します。

<p class="header-logo">
<a href="<?php bloginfo('url'); ?>">
<img src="http:// --- .png" alt="<?php bloginfo('name'); ?>"></a></p>

※便宜上、改行していますが1行で大丈夫です。

imgタグの「http:// --- .png」の部分を前述のヘッダー用の背景画像と同じようにメディアライブラリにアップロードした画像のURLに置き換えれば完了です。画像のalt属性にはサイト名を出力しています。

これで、サイト名の代わりにロゴ画像が表示されます。

サイト名の代わりにロゴ画像を表示する

サイト名の代わりにロゴ画像を表示する

フッターの背景色を変更する

フッターの背景色は次のCSSで変更することができます。「#006600」は好きな色の名前やカラーコードに変更してください。

#footer {
    background-color: #006600;
}

表示結果は次のようになります。

フッターの背景色を変更する

フッターの背景色を変更する

フッターのコピーライト行も含めて色を変更するにはCSSセレクタに「.copyright」を追加します。また、文字の色も統一しておいた方が良いかもしれません。

.copyright,
#footer {
    background-color: #006600;
    color: #fff;
}

表示結果は次のようになります。

コピーライトを含めて背景色を設定

コピーライトを含めて背景色を設定

フッターに背景画像を表示するには次のように記述します。

#footer {
    background: url(http:// --- .gif);
}

「http:// --- .gif」はメディアライブラリにアップロードした画像のURLに変更してください。表示結果は次のようになります。

フッターの背景を画像にする

フッターの背景を画像にする

「このページの先頭へ」の色を変更する

フッターをカスタマイズしたついでに画面右下に表示される「このページの先頭へ」の色も変更したくなるかもしれません。

「このページの先頭へ」リンク

「このページの先頭へ」リンク

「このページの先頭へ」の通常時とマウスオーバー時の文字色と背景色を設定するCSSをまとめておきます。それぞれ、好きな色に変更してお使いください。

/* 「このページの先頭へ」の色 */
.page-top a,
.page-top a:link,
.page-top a:visited {
    background-color: red;
    color: white;
}

/* 「このページの先頭へ」マウスオーバー時の色 */
.page-top a:hover {
    background-color: orange;
    color: white;
}

表示結果は次のようになります。

「このページの先頭へ」の色をカスタマイズ

「このページの先頭へ」の色をカスタマイズ

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート