ブログタイトルを画像に変える方法

 

a0027_002781_m

ブログタイトルを画像にすると、見栄えが良いですよね。
特徴的なロゴなど合わせると、訪問者に覚えてもらいやすくなります。
個性を出すためにも、ひと手間かけてみましょう。

ここではWordPressでの方法をご紹介します。
技を駆使し、スタイルシートでタイトル文字を画像に変更する事もできるのですが、今回は単純明快にタグを使って変更します。

タイトル画像を用意する

まず、自分のサイトの顔とも言えるタイトルの画像、ロゴを用意します。
ちょっと気合を入れて考えてみましょう。他にない特徴的なのが良いですね。

title

と言うわりに、私はシンプルに仕上げてみました(^^;)
データが吹っ飛ぶ前のデザインを取り入れつつでもあります。

いつでも変更できるので、気に入るまで何個も作ってみるのもいいかもしれません。

画像をサーバーにアップする

管理画面左サイドバーの メディア>新規追加 で画像をアップロードするか、FTPソフトを使い任意の場所にアップします。
この時画像をアップロードしたアドレス(URL)をメモしておきます。

header.phpを編集する

スタイルシートではなく、ブログタイトルが含まれるヘッダーのファイルを直接編集します。header.phpを対応しているテキストエディタで開きます。Windows付属のメモ帳での編集は厳禁です
詳しくはこちらをご覧ください→テキストエディタ: 問題なく使えるもの、使ってはいけないもの

<header></header>で囲まれている中が、ヘッダーに表示されている内容です。この中の<h1>がブログタイトル、<h2>がサイト説明文です。私が今使っているテンプレートGushを例に挙げて説明していきます。

<h1>の修正する場所

こうなっています。

<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

class=はスタイルシートの指定。

a href=はリンクURL。
<?php bloginfo(‘name’); ?>がサイトのタイトルを表示するタグです。

ここの↑この赤文字のタグの部分を画像を表示するタグに変えてやればいいのです。リンクの<a>タグで囲まれているので、画像をクリックしたらホーム、トップページに戻れます。

画像を表示するタグ

<img src="画像までのURL/img001.gif" width="横幅のpx" height="縦幅のpx" alt="サイト名">

これが画像を表示するタグです。
画像までのURL、横幅、縦幅、サイト名を記入して、先ほどの赤文字の部分と入れ替えます。

タグを入れ替えたらこうなる

<h1 class="top_title"><a href="<?php echo home_url();?>" title="<?php bloginfo('name'); ?>"><img src="画像までのURL/img001.gif" width="横幅のpx" height="縦幅のpx" alt="サイト名"></a></h1>

保存して更新したら完成です。
印象が全然変わりますよね。

ヘッダーのタイトルの位置を変更する方法も合わせてお試しください。
画像をスタイルシートでbackgroundに設定したのではないので、この方法でタイトル画像の位置を移動することができます。

おつかれさまでした。

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

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。