3分SHAREツイートシェアはてブLINEPocket先日、ブログのタイトルをただの文字から、画像へと変更しました。文字とちょっとの装飾だけだったものからフォントを変更し、うさぎの装飾も付け加えることに成功しました。現在はココナラで依頼をし、素晴らしいタイトル画像になっています!ココナラでブログデザイン依頼!センスがなくてもOK!このタイトルは背景が透明な画像を使用して作っています。タイトルを画像を使用してもっとおしゃれにしたいという人は、この記事をよめばタイトルを画像に変更することが可能です。後半では、HTMLとCSSをどのように書いて、画像をタイトル欄へ挿入しているかを紹介していきます。タイトルを単純な文字ではなく画像に変更できると、デザインの幅が一気に大きくなりますので、オリジナリティを出したページを作ることもできますし、サイトのタイトルをより覚えてもらいやすくなることでしょう。1.ブログタイトル用の画像を作るツールは、背景を透明にしておしゃれな画像をつくれそうなものならなんでもOKです。今回は例としてCanvaとgimpを使用していきます。gimpは背景を透明にするためだけに使用したものです。背景を透明にできる、かつ綺麗にデザインできるツールなら何でもいいです。Canvaなんて使わなくてもおしゃれな画像が簡単に作れる!という人は使わなくても結構です。Canvaの素材は豊富ですので、おしゃれな画像を作るのが簡単になります。Canvaはこちらから飛べます。gimpはこちらからDL可能です。タイトルのデザインをCanvaでつくろうTOPページ右上の「カスタムサイズ」をクリックして、作成していきます。高さ315pxとしましょう。背景→単色→白(文字が白色の人は、別の色で)テキストで良さげなフォントでタイトルを作り、素材の欄でちょっとした飾りをつけてあげましょう。ウサギの部分と、ウサギの跳んだ軌跡の部分は素材の所からとってきています。できるだけ大きめに、かつ高さは低めに作りましょう。いうと、この画像のままの比率で表示されてしまうため、デザインの高さが大きいと、文字が小さくなってしまうからです。完成したら、右上の「ダウンロード」から、ダウンロードをしましょう。Workユーザですと、ここをクリックした時点で背景を透明にできますので、gimpの欄は読み飛ばしてOKです。gimpで背景を透明にしようgimpを開いて、「ファイル」→「レイヤーとして開く」で、先ほど作った画像を選択します。色域を選択というのをクリックして、背景をクリック。することで、背景の白色の部分だけを丁寧に選択することができます。その状態で、「編集」→「切り取り」を選べば、背景を透明にできます。できないんだけど!という人は、レイヤーを右クリック→アルファチャンネルの追加で、対処できるかなと思います。背景を削除できましたら、拡大してゴミがついていないか確認しましょう。上の画像は、拡大したときにゴミがついているダメな例です。このままですと、文字のまわりの白っぽい部分が目立ちます。この場合、色域を選択の部分のしきい値(赤枠で囲っている場所)を大きくすればOKです。大きくしすぎると文字の一部が削り取られるので、いい値を探りましょう。「Canvaでの作成時に背景色を反対の色にする」という対策も考えられます。綺麗な画像ができたら、画像の完成です!gimpを使いこなせるという人は、gimpですべてデザインするのもアリでしょう。2.タイトル部分へ画像を入れるHTMLタイトルへ画像を入れていきましょう。外観テーマエディターheader.phpまずは、HTMLを見ていきましょう。</header>2行目のget_bloginfo(‘name’)の部分は皆さんも同様にあるのではないかと思うので、その周辺を探ってみて、同じ感じに変更してみてください。ちなみに、私はStinger8というWordPressテーマを使用していますので、そうでない人とHTMLの構造が大きく異なる場合がありますのでご注意を。画像をWordPress内に追加するWordPressで画像を挿入する際、メディアを追加から画像を追加すると思うのですが、同様に作成したタイトル画像を追加します。追加の際に、トリミングを行ってテキストがぎりぎり入るようにしておきましょう。これをしないと余白が大きすぎて、調節が大変になります。画像のURLを取得する添付ファイルの詳細のURLの部分をコピーして、HTMLの”ここに画像のURL”の部分に入れ込めばOKです。alt="ここにタイトルを入れる">とかになるというわけですね。altの部分はあなたのサイトのタイトルを入れておけばOKです。3.タイトル部分へ画像を入れる━CSSHTMLができましたら、CSSをいじります。center;}作成した画像の大きさによってずれが生じてくるかと思います。9行目の値を調節してください。小さいと上に、大きいと下に画像がずれます。画像の大きさ(横幅)も、10行目で調節してください。.sitenameの枠内で、もともとあった文字のタイトルを見えないようにしています。HTML上ではタイトルはある、という状況になります。余白ができるので、2行目のmargin-topをマイナスに指定して打ち消します。これによって、タイトルはgoogleさんにきちんと認識されます。SEO対策もバッチリというわけですね。#headbox-bgの部分で、ヘッダーの背景色を変更しております。4.まとめ画像づくりからHTML、CSSまで変更しないといけない、大変な作業ですが、参考にして素敵なタイトルにしてみてください。デザインをもっとよくしたいという人は、こちらの記事もおすすめWordPressのカスタマイズ集━無料テーマでもここまでおしゃれに!【コピペでOK】WordPressの無料テーマを使っているけど、ブログデザインをもっとおしゃれにしたい!あの綺麗なブログのあのパーツはどうやってできているんだろう?そういった悩みの助けになる記事です。この記事では、私が今までにやってきたブログデザインをまとめて紹介しています。