WordPress ヘッダータイトル文字を画像に変える(レスポンシブ対応)

Posted on Update by admin

main_titlebg2
WordPressのデフォルトテーマは タイトル部分（ホームページの最上部、会社名等を入れている部分）には文字しか置けないようになっています。
テーマ内ファイル (header.php) をじかに触ればいいのですが、テーマをバージョンアップすると元に戻ってしまいます。
今回は、そのタイトル部分をテーマのファイルを変更せずに アクションフックとCSS で画像に置き換える方法をご紹介します。そしてさらにレスポンシブ対応にします。

　
　

タイトル文字を画像に変える方法

タイトル画像アップロード

logo_320
まず、画像を用意します。今回使用する画像はこちらです↑

この画像を管理画面の左メニュー「メディア」＞「新規追加」よりアップロードします
アップロード後、画像の「編集」リンクをクリックします。
title_image-1
その画面で右側に表示される　
・ファイルの URL（アップロードされたファイルの場所）
・サイズ（例では320×60 ）
を暗記するかメモ帳等にコピーしておきます。

　
　

CSSをWordPressに書き込む

WordPressのテーマのCSSは style.css です。通常はここに書き足しますが、テーマの CSS は触らずにアクションフック (wp_head) を使ってCSSを挿入します。
このアクションフック(wp_head)を使うと、<body> の手前(<head></head>内)で CSS を挿入できるようになります。
以下、使っているテーマ用のコードを my-plugin.php に張り付けてください。

*実際に使う画像はサイズによって変わりますので、数値を変えて、ホームページを見ながらピッタリのサイズを調整してみて下さい。

　
　

Twenty Ten / Twenty Eleven

Twenty Ten
title_image-2010

Twenty Eleven
title_image-2011

幅320pxで見た場合
title_image-2011s

/**
 * ヘッダー埋め込みCSS タイトルを画像に変更 
 * Twenty Ten ver1.8 / Twenty Eleven ver2.0
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
#site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_320.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 60px;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

* background-image: url(“http://～.jpg“);　←ここの(http～)部分を画像ファイルのURLにします。
* padding-top: 60px;　←画像の高さを入れます。(例では60)

　
　

Twenty Twelve

title_image-2012

幅320pxで見た場合
title_image-2012s

/**
 * ヘッダー埋め込みCSS タイトルを画像に変更 
 * Twenty Twelve ver1.6
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_320.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 60px;
    width: 100%;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

* background-image: url(“http://～.jpg“);　←ここの(http～)部分を画像ファイルのURLにします。
* padding-top: 60px;　←画像の高さを入れます。(例では60)

　
　

Twenty Thirteen

title_image-2013

幅320pxで見た場合
title_image-2013s

/**
 * ヘッダー埋め込みCSS タイトルを画像に変更 
 * Twenty Thirteen ver1.4
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-title {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_320.png");
    background-position: left 60px;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 0;
    line-height: 65px;
    max-width: 320px;
    overflow: hidden;
    padding-top: 120px;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

* background-image: url(“http://～.jpg“);　←ここの(http～)部分を画像ファイルのURLにします。
* background-position: left 60px;　←画像の高さを入れます。(例では60)
* padding-top: 120px;　←画像の高さx2を入れます。(例では120)
* max-width: 320px;　←画像の幅を入れます。(例では320)

　
　

Twenty Fourteen

title_image-2014

幅320pxで見た場合
title_image-2014s

/**
 * ヘッダー埋め込みCSS タイトルを画像に変更 
 * Twenty Fourteen ver1.3
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_320.png");
    background-position: left 8px;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 48px;
    width: 162px;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

* background-image: url(“http://～.jpg“);　←ここの(http～)部分を画像ファイルのURLにします。
* background-position: left 8px;　←上からのマージンを入れます。(例では8)
* padding-top: 48px;　←小さく表示された画像の高さを入れます。(例では48)
* width: 162px;　←サイドバーの幅を入れます。

　
　

Twenty Fifteen

title_image-2015

幅320pxで見た場合
title_image-2015s

/**
 * ヘッダー埋め込みCSS タイトルを画像に変更 
 * Twenty Fifteen ver1.0
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_320.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 42px;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

* background-image: url(“http://～.jpg“);　←ここの(http～)部分を画像ファイルのURLにします。
* padding-top: 42px;　←小さく表示された画像の高さを入れます。(例では42)

　
　

Twenty Sixteen

title_image-2016

幅320pxで見た場合
title_image-2016s

/**
 * ヘッダー埋め込みCSS タイトルを画像に変更 
 * Twenty Sixteen ver1.0
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-branding{
    max-width: 320px;
    width: 320px;
}
h1.site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_320.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 0;
    overflow: hidden;
    padding-top: 60px;
    width: 100%;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

*max-width: 320px;　←画像の幅さを入れます。(例では320)
*width: 320px;　←画像の幅さを入れます。(例では320)

* background-image: url(“http://～.jpg“);　←ここの(http～)部分を画像ファイルのURLにします。
* padding-top: 60px;　←画像の高さを入れます。(例では60)

　

スポンサードリンク



　

ロゴマークだけ入れたい場合

title_image-2010_in

サンプルロゴ　56x56タイトル文字はそのままで、ロゴマークだけをつけたい場合も手順は「タイトル文字を画像に変える方法」と同じです。ロゴ画像をメディアアップロード後、以下、使っているテーマ用のコードを my-plugin.php に張り付けてください。

※使う画像の大きさによって padding や height 等を調整してください。

Twenty Ten / Twenty Eleven 

/**
 * ヘッダー埋め込みCSS タイトルにロゴマークを追加
 * Twenty Ten ver1.8 / Twenty Eleven ver2.0
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
#site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_56.png");
    background-repeat: no-repeat;
    background-size:auto;
    background-position: left top;
    display: inline-block;
    padding-left:60px;
    padding-top:10px;
    height:45px;  
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

　

Twenty Twelve

/**
 * ヘッダー埋め込みCSS タイトルにロゴマークを追加
 * Twenty Twelve ver1.6
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_56.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto auto;
    display: inline-block;
    height: 50px;
    padding-left: 60px;
    padding-top: 5px;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

　

Twenty Thirteen

/**
 * ヘッダー埋め込みCSS タイトルにロゴマークを追加
 * Twenty Thirteen ver1.4
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-title:before {
    content: url("http://nendeb.com/wp-content/uploads/logo_56.png");
    display: inline-block;
    margin-right: 3px;
    vertical-align: middle;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

* Twenty Thirteen だけ before を使ってます。

　

Twenty Fourteen

/**
 * ヘッダー埋め込みCSS タイトルにロゴマークを追加
 * Twenty Fourteen ver1.3
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_56.png");
    background-position: left 9px;
    background-repeat: no-repeat;
    background-size: 16% auto;
    padding-left: 30px;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

　

Twenty Fifteen

/**
 * ヘッダー埋め込みCSS タイトルにロゴマークを追加
 * Twenty Fifteen ver1.0
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_56.png");
    background-position: left 3px;
    background-repeat: no-repeat;
    background-size: 16% auto;
    padding-left: 31px;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

　

Twenty Sixteen

/**
 * ヘッダー埋め込みCSS タイトルにロゴマークを追加
 * Twenty Sixteen ver1.0
 *
 * License: GPLv2 or later
 */
function nendebcom_add_header_css() {
?>
<style type="text/css">
.site-title a {
    background-image: url("http://nendeb.com/wp-content/uploads/logo_56.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto auto;
    display: inline-block;
    height: 56px;
    padding-left: 60px;
    padding-top: 10px;
}
</style>
<?php
}
add_action( 'wp_head', 'nendebcom_add_header_css' , 99 );

　
　

参考

WordPress Codex プラグイン API/アクションフック一覧/wp head
http://wpdocs.sourceforge.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%83%83%E3%82%AF%E4%B8%80%E8%A6%A7/wp_head

Twenty Ten
https://wordpress.org/themes/twentyten

Twenty Eleven
https://wordpress.org/themes/twentyeleven

Twenty Twelve
https://wordpress.org/themes/twentytwelve

Twenty Thirteen
https://wordpress.org/themes/twentythirteen

Twenty Fourteen
https://wordpress.org/themes/twentyfourteen

Twenty Fifteen
https://wordpress.org/themes/twentyfifteen

Twenty Sixteen
https://wordpress.org/themes/twentysixteen/




スポンサードリンク