Facebook
RSS Feed
Nov 16, 2014

サイトタイトルのロゴ画像をテキストに変更する方法

サイトタイトルのロゴ画像をテキストに変更する方法

Minimal WPのテーマはサイトタイトルをロゴ画像で表示するようになっています。
管理画面からロゴ画像をアップロードするだけなので簡単に変更出来るのですが、
画像じゃなくて、普通のテキスト表示に変更したい!という場合のやり方を解説します。

サイトタイトルのロゴ画像をテキストに変更する方法

ヘッダー(ダッシュボード>外観>テーマの編集>header.php)を開いて下記の部分を探します。

<!-- ロゴ -->
<h1 class="logo">
<a href="<?php bloginfo('home'); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo (get_option('logo_url')) ? get_option('logo_url') : get_bloginfo('template_url') .'/images/logo.gif' ?>" alt="<?php bloginfo('name'); ?>"/></a>
</h1>
<!-- / ロゴ -->

テーマによりますけど、だいたいこんなようなことが書いてあります。
ややこしいWordPress用のコードが出てくるのですが、
これを単純に要約すると、

<a href=”リンク先URL”><img src=”ロゴ画像”></a>

という、めちゃくちゃ単純なHTMLを最初に覚える時に出てくる基本型です。
これをロゴ画像からテキストに変更してみます。

<簡単な方法その1>

<h1 class="logo">
<a href="リンク先URL">サイトタイトル</a>
</h1>

HTMLを直接編集するなら、単純に上記のような感じでタイトルテキストを書いちゃえばOKです。
めちゃくちゃ簡単です。

<簡単な方法その2>

<h1 class="logo">
<a href="<?php bloginfo('home'); ?>"><?php bloginfo(‘name’); ?></a>
</h1>

WordPressの基本タグをちゃんと使うなら上記のような感じです。
これだと、管理画面で設定しているタイトルが表示されます。

*ご利用のテーマによってはheader.phpに加え、header-top.phpなど、
複数のヘッダーファイルが用意されている場合はがあります。
その場合は、両方のファイルを同様にカスタマイズしてください。

あとはスタイルシートで.logoの所に文字の大きさとかお好みで装飾すればOKです。
余裕があれば、Webフォントなんかにするとかっこいいのが作れますよ。
以上です!

*いつものごとく、「<」と「>」は半角の「<」と「>」に置き換えてくださいね。

カスタマイズの無料サポートは行ってませんので、分からない所はGoogleで調べてくださいね!特にWordPress独自タグやHTML/CSSの記述方法は時代とともに変わるので最新情報を各自見直してください。あと作業する時はバックアップを忘れずに!
Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト