【WordPress】タイトルを画像に変更しておしゃれなデザインにする方法

読者の悩み

WordPressでタイトルを画像にしたい
どのサイズの画像を作ればいい？
変更するにはどうしたらいいか全く分からない！

こんな悩みに答える記事になっています。

先日、ブログのタイトルをただの文字から、画像へと変更しました。

文字とちょっとの装飾だけだったものからフォントを変更し、うさぎの装飾も付け加えることに成功しました。

現在はココナラで依頼をし、素晴らしいタイトル画像になっています！

>>ココナラでブログデザイン依頼！センスがなくてもOK！

このタイトルは背景が透明な画像を使用して作っています。

タイトルを画像を使用してもっとおしゃれにしたいという人は、この記事をよめばタイトルを画像に変更することが可能です。

今回の記事の前半では、タイトル用の画像の作り方を紹介
後半では、HTMLとCSSをどのように書いて、画像をタイトル欄へ挿入しているかを紹介していきます。

タイトルを単純な文字ではなく画像に変更できると、デザインの幅が一気に大きくなりますので、オリジナリティを出したページを作ることもできますし、サイトのタイトルをより覚えてもらいやすくなることでしょう。

1.WordPressのブログタイトル用の画像を作る

ツールは、背景を透明にしておしゃれな画像をつくれそうなものならなんでもＯＫです。

今回は例としてCanvaとgimpを使用していきます。

gimpは背景を透明にするためだけに使用したものです。
背景を透明にできる、かつ綺麗にデザインできるツールなら何でもいいです。

Canvaなんて使わなくてもおしゃれな画像が簡単に作れる！という人は使わなくても結構です。ただ、Canvaの素材は豊富ですので、おしゃれな画像を作るのが簡単になります。

Canvaはこちらから飛べます。
gimpはこちらからDL可能です。

タイトルのデザインをCanvaでつくろう

TOPページ右上の「カスタムサイズ」をクリックして、作成していきます。

大きさは何でもいいのですが・・・
とりあえず、今回は幅560px 高さ315pxとしましょう。

背景→単色→白（文字が白色の人は、別の色で）
テキストで良さげなフォントでタイトルを作り、素材の欄でちょっとした飾りをつけてあげましょう。

ウサギの部分と、ウサギの跳んだ軌跡の部分は素材の所からとってきています。

できるだけ大きめに、かつ高さは低めに作りましょう。
なぜかというと、この画像のままの比率で表示されてしまうため、デザインの高さが大きいと、文字が小さくなってしまうからです。

完成したら、右上の「ダウンロード」から、ダウンロードをしましょう。
Canva for Workユーザですと、ここをクリックした時点で背景を透明にできますので、gimpの欄は読み飛ばしてＯＫです。

gimpで背景を透明にしよう

gimpを開いて、「ファイル」→「レイヤーとして開く」で、先ほど作った画像を選択します。

色域を選択というのをクリックして、背景をクリック。
こうすることで、背景の白色の部分だけを丁寧に選択することができます。

その状態で、「編集」→「切り取り」を選べば、背景を透明にできます。

できないんだけど！という人は、レイヤーを右クリック→アルファチャンネルの追加で、対処できるかなと思います。

背景を削除できましたら、拡大してゴミがついていないか確認しましょう。
上の画像は、拡大したときにゴミがついているダメな例です。
このままですと、文字のまわりの白っぽい部分が目立ちます。
この場合、色域を選択の部分のしきい値（赤枠で囲っている場所）を大きくすればＯＫです。

大きくしすぎると文字の一部が削り取られるので、いい値を探りましょう。
「Canvaでの作成時に背景色を反対の色にする」という対策も考えられます。

綺麗な画像ができたら、画像の完成です！
gimpを使いこなせるという人は、gimpですべてデザインするのもアリでしょう。

2.タイトル部分へ画像を入れるHTML

タイトルへ画像を入れていきましょう。

編集する箇所

外観

テーマエディター

header.php

まずは、HTMLを見ていきましょう。下は例です。

header.php

<header>
<div id="headbox-bg">
<div class="clearfix" id="headbox">
<?php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?>

<!-- ロゴ又はブログ名 -->
<h1 class="sitename"><?php echo esc_attr( get_bloginfo( 'name' ) ); ?></h1>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="ここに画像のURL" alt="ここにタイトルを入れる">
</a>
<!-- ロゴ又はブログ名ここまで -->

・・・中略・・・

</div><!--/#headbox-bg -->
</div><!--/#headbox clearfix -->

・・・中略・・・

</header>

2行目のget_bloginfo(‘name’)の部分は皆さんも同様にあるのではないかと思うので、その周辺を探ってみて、同じ感じに変更してみてください。

ちなみに、私はStinger8というWordPressテーマを使用していますので、そうでない人とHTMLの構造が大きく異なる場合がありますのでご注意を。

画像をWordPress内に追加する

WordPressで画像を挿入する際、メディアを追加から画像を追加すると思うのですが、同様に作成したタイトル画像を追加します。

追加の際に、トリミングを行ってテキストがぎりぎり入るようにしておきましょう。
これをしないと余白が大きすぎて、調節が大変になります。

画像のURLを取得する

添付ファイルの詳細のURLの部分をコピーして、HTMLの”ここに画像のURL”の部分に入れ込めばＯＫです。

つまり、<img src="http～～～.png" alt="ここにタイトルを入れる">とかになるというわけですね。

altの部分はあなたのサイトのタイトルを入れておけばＯＫです。

3.WordPressのタイトル部分へ画像を入れる━CSS

HTMLができましたら、CSSをいじります。

次のようになります。

CSS

#headbox-bg .sitename{
  margin-top: -50px;/*適宜変更*/
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#headbox-bg img{
  margin-top: -5px;
  width: 65%;
}

#headbox-bg{
  background-color: #fedbf1;
  text-align: center;
}

作成した画像の大きさによってずれが生じてくるかと思います。

9行目の値を調節してください。小さいと上に、大きいと下に画像がずれます。
画像の大きさ（横幅）も、10行目で調節してください。

また、#headbox-bg .sitenameの枠内で、もともとあった文字のタイトルを見えないようにしています。
ですが、HTML上ではタイトルはある、という状況になります。

余白ができるので、2行目のmargin-topをマイナスに指定して打ち消します。

これによって、タイトルはgoogleさんにきちんと認識されます。
SEO対策もバッチリというわけですね。

また、#headbox-bgの部分で、ヘッダーの背景色を変更しております。