2014-11-16

WordPressテンプレートのサイトタイトル(ロゴ画像)をテキストに変更する方法

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

Minimal WPのテーマはサイトタイトルをロゴ画像で表示するようになっています。
なんでかっていうと、ロゴこそが唯一の自分を表現するデザインだからです。
(みんな共通のテキスト、ってのでは無料ブログやるのと一緒になっちゃう)

管理画面からロゴ画像をアップロードするだけなので簡単に変更が出来るのですが、
どうしても普通のテキスト表示に変更したい!という場合もあるかもしれません。
今回はそのやり方を解説します。

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

ダッシュボード>外観>テーマファイルエディター>header.php を開いて、「ロゴ」と書いてある部分を探します。
Ⅱシリーズのテーマだと、こうなっています。

<!-- ロゴ -->
<?php if ( is_home() || is_front_page() ) : ?>
<!-- トップページだけ -->
<h1 class="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo (get_option('logo_url')) ? get_option('logo_url') : get_template_directory_uri() .'/images/logo.png' ?>" alt="<?php bloginfo('name'); ?>" loading="eager" /></a>
</h1>
<?php else : ?>
<!-- トップページ以外 -->
<div class="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php echo (get_option('logo_url')) ? get_option('logo_url') : get_template_directory_uri() .'/images/logo.png' ?>" alt="<?php bloginfo('name'); ?>" loading="eager" /></a>
</div>
<?php endif; ?>
<!-- / ロゴ -->

ややこしく見えますが、やっていることは
<a href=”トップページのURL”><img src=”ロゴ画像”></a>
というリンク付きの画像です。
トップページ用(h1)と、それ以外のページ用(div)の2か所に書いてあります。

この2か所の <img 〜 /> の部分を、サイト名を表示するタグに置き換えます。
ロゴの部分を丸ごと、下のコードに差し替えればOKです。

<!-- ロゴ -->
<?php if ( is_home() || is_front_page() ) : ?>
<!-- トップページだけ -->
<h1 class="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a>
</h1>
<?php else : ?>
<!-- トップページ以外 -->
<div class="logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo('name'); ?></a>
</div>
<?php endif; ?>
<!-- / ロゴ -->

<?php bloginfo(‘name’); ?> は、ダッシュボード>設定>一般の「サイトのタイトル」を表示するタグです。
サイト名を変えたいときは、設定画面で変えるだけで反映されます。

文字の大きさや色を整える

このままだと本文と同じくらいの文字で表示されます。
ダッシュボード>外観>カスタマイズ>追加CSS に下のようなCSSを貼って、お好みで調整してください。

.logo a {
font-size: 28px;
font-weight: bold;
color: #333;
text-decoration: none;
}

余裕があれば、Webフォントにするとこだわりのかっこいいのが作れますよ。

ただ、結局テキストにする場合もCSSでデザインしなくてはいけないので、
それだったらもっと自由度の高いロゴ画像の方がいいのでは?
っていうのもあって基本はロゴ画像必須にしてます。
今だったらChatGPTとかでもサクッと無料でロゴ作れますしね。

注意点

*旧型のテーマ(名前にⅡがつかないもの)は、header.phpの書き方が少し違います。ロゴが1か所だけのものもあります。<img 〜 /> の部分をサイト名のタグに置き換えるやり方は同じです。

*HTML/CSS編集を伴うテーマカスタマイズは無料サポート外となります。
不具合が生じてもサポートできませんので、自己責任で編集作業を行ってください。
必ず必ず必ずバックアップを取って作業することをオススメします!

ご自身でカスタマイズを行うのが不安な方・エラーが発生してしまった方は、
プロの作業代行にお任せするのがおすすめです(料金3,000円〜)。
【PR】ココナラでWordPress作業代行を依頼する
おすすめWordPressテーマ10選