ヘッダータイトルをロゴ画像に変更する方法〜WordPress備忘録〜

公開日: : Webネタ

デフォルトのブログタイトルテキストだとどうも味気ないなァと思い、いっその事ロゴ画像に差し替えてしまおうという事に。

思いの他苦戦しなんとそれに費やす事6時間!WordPressに慣れている人からは「その程度の事時間かかり過ぎじゃね?」とのお声が飛んできそうであるが、初心者なりに頑張った訳ですよ。

備忘録がてら記事にしてみたので参考にしてほしいのね。

まずやるべき事

ロゴを用意する

まぁ当たり前なんだけれでもこれがないと始まらないワケですよ。
この記事に行き着いてる人はロゴは既に準備済みという方が多いでしょうが、そうでない人のために一応おすすめのWebサービスを教えておきます。

Cool Text

スクリーンショット 2015-02-28 22.30.30

http://ja.cooltext.com

多種多様なフォントに加えてグラデーションなんかの簡単な加工もブラウザ上で済ませられる超便利なロゴ作成サイト。
ちなみに当サイトのロゴもここで作成、デザインの知識なんてゼロに等しい僕ですが、適当にイジってるだけでそれっぽいのが作れちゃいました。

作ったロゴをWordPressにアップロード

WordPress管理画面のメディアから→新規追加→ファイルを選択へと進み、用意しておいたロゴ画像を選択。(ドラッグ&ドロップでも可)

メディアのライブラリーに表示されたら成功!
画像のサイズに関してはテンプレート次第で適正サイズは変わってくるが300×70程度にしておけば安定かなと。

ヘッダータイトルをロゴ画像に変更

確認しときますが、変更前のタイトルロゴはこんな感じです。
(テンプレートはStinger、子テーマはCandy Crazy使用しています。)

スクリーンショット 2015-02-28 22.24.35

ロゴ画像のURLをコピー

下準備も整いここからが本題の差し替え手順になります。

メディア→ライブラリより先ほどアップロードしたロゴ画像にアクセス。
画像の右側に表示される一覧より、タイトルの上のURLの部分をコピーしましょう。

header.phpを編集

外観→テーマの編集→右上の「編集するテーマを選択する」のタブより現在使用中のテーマを選択。(子テーマを使用している場合は親の方を選択)

画面右側にずらっと並んだ編集項目の中からheader.phpをクリック。
(上にカタカナでヘッダーと書いてあるやつですね)

編集画面に入ったら次の部分を書き換えます。
つらつら〜と下にスクロールしてもらって真ん中ぐらいにあると思います。

     <p class="sitename"><a href="<?php echo home_url(); ?>/">
        <?php bloginfo('name'); ?>
        </a></p>

↑これを

     <p class="sitename"><a href="<?php echo home_url(); ?>/">
        <img src="先ほどコピーしたロゴ画像URLを入力"/>
        </a></p>

↑このように書き換え

見て分かる通り
<?php bloginfo(‘name’); ?>
の部分を消して
<img src=”先ほどコピーしたロゴ画像URLを入力”/>
へと変更するだけです。

当然 ”先ほどコピーしたロゴ画像URLを入力” の部分は各自で入力して下さい。

するとデフォルトのヘッダータイトルだったのが…

スクリーンショット 2015-02-28 22.24.35
↓↓↓↓↓

スクリーンショット 2015-02-28 22.20.20

見事にロゴ画像へと早変わり!

でもこのままじゃちょっとバランス悪いですよね?

ロゴ画像に差し替えたのが原因でヘッダーが少し狭くなってしまったみたいですのでpaddingを使って増やしてあげましょう。

paddingとはある要素に対して余白を作る事の出来るスタイルシートです、今回はヘッダー上部を広くしたいのでpadding-topと指定してあげます。
(逆に下に余白をとりたいならpadding-bottom、左右ならleft、rightと指定してあげましょう)

 ヘッダーの幅を調節

外観→テーマの編集→編集するテーマを選択のタブより現在使用中のテーマを選択。
(子テーマを使用している場合は子テーマを選択。)

編集画面へと移ったら、次の部分にpaddingを付け足してやります。
テンプレによっては若干表記が違うかもしれませんが、header h-1 sitename の三つが書いてあれば恐らくは大丈夫かと。

#container #header #header-in #h-l .sitename {
  font-size: 55px;
  line-height: 1.2;
  margin: 10px auto 0;
  text-align: left;
  width: 986px;
}

ここにpaddingを入力、値の部分は各自デザインに合わせて調節してください。

#container #header #header-in #h-l .sitename {
  font-size: 55px;
  line-height: 1.2;
  margin: 10px auto 0;
  text-align: left;
  width: 986px;
  padding-top: 24px;
}

するとこのようになります。

スクリーンショット 2015-02-28 22.37.05

おお!上下にバランスが取れてすっきりしましたね!

以上、ヘッダータイトルをロゴ画像に変更する方法でした〜!

関連記事

記事はありませんでした

Comment

  1. もむら より:

    ロゴ画像の変更をいろいろ調べましたが、一番わかりやすかったです!ありがとうございました。

  2. kaz より:

    初めまして!最近ブログを始めたばかりでワードプレス初心者です。サイトタイトルを画像に変更したくてググってたんですが、どこのサイトも専門用語が多すぎてチンプンカンプン。ところが、こちらのサイトでは非常に分かり易くて初心者の私でも簡単に出来ました!ありがとうございました!m(_ _;)m

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スクリーンショット 2015-03-13 19.00.30
今週のBillboardチャートランキング!(2015年3月28日付けBillboard Hot 100/Billboard 200)

2015年3月28日付けビルボードチャートランキングのご紹介!

b5f382a9377ea9998fc6a0d22cdccdf6_s
朝日新聞のとある記事が不正アクセス禁止法違反ではないかと話題に!

朝日新聞の記事が不正アクセス禁止法にあたるのではないかと一部で話題

pokemon03
ピカチュウに見た目がそっくりなウミウシが存在する件!【画像あり】

『ピカチュウ』って皆さんご存知ですよね? ゲーム、ポケッ

スクリーンショット 2015-03-13 19.00.30
今週のBillboardチャートランキング!(2015年3月21日付けBillboard Hot 100/Billboard 200)

今週のビルボートチャート! まずはシングルランキングのHot

スクリーンショット 2015-03-10 23.01.03
からくりTVの替え歌で人気を博した酒井素樹とは?現在は何をしてるの?

昨年の9月7日にその長い歴史に幕を閉じた『さんまのSUPERからくりT

→もっと見る

PAGE TOP ↑