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

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

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

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

ロゴ画像を作る

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

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

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

 もちろん自力で作ってもらっても構いません。
 ※以下、ここでは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%;  // 上、右、下、左
}

↑スマホ・タブレット用

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

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメント

  • お世話になります。

    固定ページの順番は入れ替えが出来ました。
    ありがとうございます♪

    by 瑠璃 2016/04/16 23:53

  • Nobuo-CREATEさま

    2〜3日前から使わせていただいております。ありがとうございます。

    少しずつカスタマイズしていますが、この[タイトルを文字ではなく画像に]の部分につき、気づいたことがありましたのでフィードバックさせていただきます。

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

    ……という部分で、子テーマを使っているので上記の手順でやってみたところ、指定の画像が表示されませんでした。そこで親テーマ(/principle/images)の方へアップロードしたところ、表示させることができるようになりました。

    現時点で気になったのは以上です。
    全体的に非常に使いやすく、少しずつ手を入れていきたいと思います。

    宜しくお願いいたします。

    by godchild.jp 2016/08/31 12:34

  • 確かに。子テーマのimagesに入れてもなにも変わりませんでしたが,親のimegesに画像を入れると表示されました。ありがとうございました。
    ついでに...それでも残る背景の青いタイルを消して,背景色をカスタマイズするにはどうしたらよいでしょうか。

    by fjm56 2017/02/15 19:03

コメントを残す



*

Menu

HOME

TOP