Principleで、タイトルの文字を画像に変える方法

タイトルを文字ではなく画像に

　タイトルロゴみたいなのを画像ファイルで作って、それをブログタイトル（文字）の代わりに表示する方法を解説します。

　例えばヘッダー部分がこんな風になります。↓

ロゴ画像を作る

　PhotoShopなんてなくても、ロゴ画像を簡単に作れるwebサービスがあります。

All Logos on FlamingText.com←ここで、どんな字にしたいか選んで、テキストを入力するだけです。驚くほど簡単に出来ます。

　約1分で出来あがったのがこちら↓

　もちろん自力で作ってもらっても構いません。
　※以下、ここではpngファイルで作ったものとして説明します。

画像をアップロードする

　作ったロゴ画像ファイルの名前を「title-banner.png」に変更します。

　FTPソフトを使って、テーマファイル（子テーマを使っている人は子テーマ）内のimagesというフォルダ内にアップロードします。

header.phpを書き換える

　子テーマをお使いの方は、親テーマ内にあるheader.phpというファイルを一度ダウンロードして、そのheader.phpを子テーマ内にアップロードします。

　WordPress管理画面の外観→テーマ編集と進んで、header.php（ヘッダー）を編集する画面にします（子テーマありの方は子テーマ内のheader.phpを、子テーマ無しの方は普通にheader.phpを編集します）。

　header.phpの下の方に以下の部分があると思います。
※Principleのバージョンによっては、<h1>と<a>が入れ換わっているかも知れませんのでご注意を。

<?php if(is_front_page() || !is_singular()){ ?>
     <h1 class="blog_title"><a class="no-deco" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<?php }else{ ?>
     <p class="blog_title"><a class="no-deco" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></p>
<?php } ?>

　この<?php bloginfo(‘name’); ?>の部分を両方とも、

<img style="max-width:100%; height:auto;" src="<?php echo get_template_directory_uri(); ?>/images/title-banner.png" alt="<?php bloginfo('name'); ?>">

に書き換えます。

　つまり、こうなります↓

<?php if(is_front_page() || !is_singular()){ ?>
     <h1 class="blog_title"><a class="no-deco" href="<?php echo home_url(); ?>"><img style="max-width:100%; height:auto;" src="<?php echo get_template_directory_uri(); ?>/images/title-banner.png" alt="<?php bloginfo('name'); ?>"></a></h1>
<?php }else{ ?>
     <p class="blog_title"><a class="no-deco" href="<?php echo home_url(); ?>"><img style="max-width:100%; height:auto;" src="<?php echo get_template_directory_uri(); ?>/images/title-banner.png" alt="<?php bloginfo('name'); ?>"></a></p>
<?php } ?>

　以上で完了です。

余白の調整

　ちなみに、ケータイで見たら、それなりの大きさに勝手にリサイズされるようになっています。

　ただしケータイの場合右上にmenuボタンがあるので、それにかぶらないように表示されますので、画面横幅いっぱいには表示されません。

　もし、表示領域を変えたい（余白の調整をしたい）人は、子テーマのstyle.css内に、以下のコードをそれぞれpc用の場所、スマホ・タブレット用の場所に貼り付けて数値を調整してみて下さい。

h1.blog_title{
      padding-top: 60px 30px;  // 上下、左右
}

↑pc用

h1.blog_title{
      padding: 15px 60px 18px 4%;  // 上、右、下、左
}

↑スマホ・タブレット用

　分からないことがありましたら、コメント欄にでもどうぞ。