WordPressにヘッダー画像機能（カスタムヘッダー）がない場合の作り方
カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので
設定手順を公開しておきます(´▽｀)
（といっても調べれば出てくるんですがｗ）
今回は依頼の中でも多いTCD010（Blogpress）テーマを使用して行なってみます。
まずはヘッダーのないまっさらな状態。
ここにヘッダー画像を作っていきます。
INDEX
WordPressにカスタムヘッダー機能を導入
カスタムヘッダーはWordPress自体の機能で
それを採用するかどうかはテーマ制作者次第なんですね。
テーマオプションやアイキャッチ画像、
カスタム投稿タイプと呼ばれるものなんかもそうです。
それぞれの機能をこのテーマ内で使用しますってことを示すためには
「function.php」にコードを書き足す必要があります。
今回のカスタムヘッダーを反映させるためのコードは以下です。
// カスタムヘッダー
add_theme_support( 'custom-header' );これを「ダッシュボード」→「外観」→「テーマ編集」→
「テーマのための関数（function.php）」の中に追記しましょう。
すると「外観」の中に「ヘッダー」というメニューが加わります。
これだけだとまだサイトには表示されないので
ヘッダー部分にカスタムヘッダーを呼び出す作業を行います。
ヘッダーを表示させるための設定
「ダッシュボード」→「外観」→「テーマ編集」→「header.php」を開いて、
<body>タグ内に以下のコードを追記します。
<!-- custom header -->
<?php $header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<div id="header_img">
<a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>" /></a>
</div>
<?php endif;?>どこでもいいから突っ込むというよりは、
順序的に適切な場所があるのでその合間にでも入れてあげてください。
（その方が管理もしやすいです）
今回は「ロゴ」と「グローバルメニュー」の間に入れました。
これでカスタムヘッダーが機能します！
ちなみにヘッダー画像を使用するということはロゴを使用しないということなので
ロゴを表示させるコード部分は削除してしまってもかまいません。
（バックアップは忘れずに！）
今回はのちほどCSSにて非表示にすることにします。
ヘッダー画像のアップロード
ヘッダー画像サイズはBlogPressの場合ですと横幅980pxがぴったりです。
今回は縦幅を200pxに設定しました。
ダッシュボード→「外観」→「ヘッダー」を開きます。
使用したい画像をアップロードするか、メディアファイルから選択してください。
サイトを表示させると・・・
いい感じですね！！！(笑)
いや、ここから表示を調整していきましょう(笑)
CSSでヘッダー画像の表示調整
CSSの編集についてはこちらの記事を参照してください。
WordPressでCSSの反映を確認しながら編集する方法
ロゴを非表示にする
#logo_area{ }内に「display:none;」と追記します。
▼変更前
/* logo */
#logo_area { width:250px; height:140px; position:relative; top:27px; }▼変更後
/* logo */
#logo_area { display:none; width:250px; height:140px; position:relative; top:27px; }ヘッダー画像の位置を整える
#logo_area{ }の下あたりに以下を追記します。
/* custom header */
#header_img { margin-top:24px; }ヘッダーの縦幅を修正する
現状ではヘッダー画像がヘッダー内に収まっていませんので
ヘッダーの縦幅を調整してあげる必要があります。
縦幅を調整するとグローバルメニューが下がって綺麗に表示されます。
以下のように#header{ }内の「height:240px」の値を調整します。
▼変更前
#header { width:980px; height:240px; margin:0 auto; z-index:30; position:relative; }▼変更後
#header { width:980px; height:275px; margin:0 auto; z-index:30; position:relative; }
これでヘッダー画像の導入は完了です！
こんな記事も書きました！
-
-
MacやiPhoneのスクショはめ込み画像を作る
そうそう、こんな画像ってたまに必要なときがありますよね！笑 これ、わざわざ画像を合わせ...
-
-
WordPressをカスタマイズする前に子テーマを作っておく
子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...
-
-
CSSでテーブル使わずに簡単レスポンシブ！下線だけ引いて横並びデザイン
こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...
-
-
コピペで使えるCSSデザイン枠テンプレート
どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...
-
-
名刺代わりのサイトを思いっきしリニューアルしてみた件！カスタマイズTIPS色々書きました。
mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...
-
-
ページ遷移時のフェード効果を実装するjQuery
リンクをクリックした時にページが滑らか～にフェードしながら遷移する方法です。 今回新たに作成し...
-
-
CORE(TCD027)でトップページの新着記事一覧にページナビをつける
先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...
-
-
無料で簡単にロゴを作れるツール「LOGASTER」が斬新！
Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな～っ...
-
-
商用サイトで使えるフリー素材サイトまとめ
アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...
-
-
コピペで使える固定ソーシャルボタンBOX
WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...
