これはブログです

3DCGとかプログラミングとか

カスタムヘッダー

当ブログにヘッダー画像を入れられるようにしました。うちのこがのっております。

トップヘッダーに画像をのせるためにはfunction.phpに

add_theme_support( 'custom-header' );


を使います。詳細はWORDPRESS Codex日本語版 – カスタムヘッダーをご覧ください。

また、画像をbackground-imageにしたい場合はコールバックを使用します。

<?php
// ...
$custom_header_defaults = array(
	'default-image'          => '',
	'flex-width'             => true,
	'width'                  => 800,
	'flex-height'            => true,
	'height'                 => 250,
	'header-text'            => true,
	'wp-head-callback' => 'header_style',
);
add_theme_support( 'custom-header', $custom_header_defaults );

function header_style(){
  ?>
    <style type="text/css">
      #header {
				width: 800px;
				height: 250px;
				background-image: url(<?php header_image(); ?>);
				background-position: right;
				background-repeat: no-repeat;
				background-size: cover;

      }
    </style>
  <?php
}
// ...

参考にしたサイト

Web Design Leaves – カスタムヘッダー:http://www.webdesignleaves.com/wp/wordpress/187/

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください