STINGER サイトタイトルを画像・中央に変更する方法

WordPress（STINGERテーマ使用）をしていて、サイトタイトルをロゴ画像・中央表示に変更したい方に、読んでほしい記事です。

本サイトについても、当初はサイトタイトルが「みらしん」という文字だけだったのですが、モチーフを付けたロゴ画像・中央表示に変更したかったので、下記のようにサイトタイトルを変更しました。

もし同じようなイメージで変更を考えているようであれば、本記事を参考にカスタマイズを進めてみてください。

なお、子テーマがある前提で書いておりますので、まだ子テーマを作成していないようであれば、下記の記事を参考に、子テーマを作成することをオススメします。

【参考】WordPress 子テーマのメリットと作成方法

PC300×250

1 ロゴ画像の用意
2 画像のアップロード
3 「header.php」のコード変更
4 「style.css」のコード変更
5 コードの変更内容が反映されない場合

ロゴ画像の用意

まず、サイトタイトルに使用するロゴ画像を用意しましょう。

ロゴ画像の作成方法

ロゴ画像の作成方法には、他人に依頼する方法と自分で作成する方法の2つがあります。

他人に依頼する場合は、知り合いがいなくても、「ココナラ」などのサービスで、最低500円から制作に精通している方に作ってもらうことができます。

【参考】安い！速い！「ココナラ」でサイトのロゴを依頼・作成する方法

自分で作成する場合、「illustrator」「Photoshop」などの画像加工ソフトで作るのが一般的です。

自分で作成する場合、簡単に画像ができあがるツールも公開されていますが、私は操作方法がわからなかったので、「Photoshop」で作成しました。

【参考】無料でロゴが作成できるサイト一覧

ロゴ画像のサイズを決める

ロゴ画像のサイズについては、Chromeの「Page Ruler」などの物差しツールを使って、実際に画像を設置したい場所のサイズを測ってみるとわかりやすいです。

私の場合、「220×40px」の画像を設置していますが、大きい等比サイズの「440×80px」の画像を作成しました。

ファイル名・拡張子

以前に日本語名を使用した画像ファイルが反映されなかったことがあったため、個人的には日本語を使わないファイル名をオススメします。

拡張子は、一般的な画像ファイルの拡張子である「JPEG」もしくは「PNG」で保存します。

画像のアップロード

ロゴ画像の用意ができたら、画像をサーバーにアップロードします。

まず、使用しているFTPサーバーの子テーマフォルダ内に「images」フォルダがない場合、子テーマ内に「images」フォルダを作成します。（子テーマを使用しない方は、親テーマの「images」フォルダを直接いじっていきます。）

作成後、「images」フォルダに先ほど作成したロゴ画像のファイルをアップロードし、フォルダに格納します。

「header.php」のコード変更

ここから、作成したロゴ画像をサイトに反映していく作業をしていきます。

まず、使用しているFTPサーバーの子テーマフォルダ内に「header.php」がない場合は、親テーマのフォルダ内にある「header.php」のファイルをそのまま子テーマ内にコピーします。
（子テーマを使用しない方は、親テーマの「header.php」を直接いじっていきます。）

コピーした「header.php」内の下記コードを変更します。

▪︎変更箇所（変更前）

  <p class="sitename"><a href="<?php echo home_url(); ?>/">
    <?php if (get_option('stinger_logo_image')): //ロゴ画像がある時 ?>
    <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url(get_option('stinger_logo_image')); ?>" />
    <?php else: //ロゴ画像が無い時 ?>
    <?php bloginfo( 'name' ); ?>
    <?php endif; ?>
    </a></p>

▪︎変更箇所（変更後）

<!-- 20XXXXXX_カスタマイズ_サイトロゴ設定 ここから -->
  <p class="sitename"><a href="<?php echo home_url(); ?>/">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/20160130_testsitelogp.png" />
    </a></p>
<!-- 20XXXXXX_カスタマイズ_サイトロゴ設定 ここまで -->

php言語で「」内の記載内容は、サイトに反映されない内容になるので、ここに「変更時の日付」「変更内容」などのメモを残しておくと、コードを見返すときに便利になります。（無くても反映されます。）

「images/」のあとは、「images」フォルダ内にあるロゴ画像のファイル名を指定してしてください。

ここまで完成すると、とりあえずサイトタイトルがロゴ画像に変更している状態になります。

※反映されない場合、本記事の最後の項目「コードの変更内容が反映されない場合」に当てはまる可能性がありますので、そちらをご確認ください。

「style.css」のコード変更

最後に、画像サイズの指定と中央表示の作業をおこないます。

まず、子テーマの「style.css」ファイル内に、子テーマ作成用のコードしか記載がない場合、親テーマの「style.css」ファイル内のコードを子テーマ作成用のコードの下にそのまま全てコピーします。
（子テーマを使用しない方は、親テーマの「style.css」を直接いじっていきます。）

コピーした「style.css」内の下記コードを変更します。

▪︎変更箇所（変更前）

/* ロゴ画像の最大サイズ */
.sitename img {
	max-width: 300px;
	margin: 0 auto;
}

▪︎変更箇所（変更後）

/*　20XXXXXX_カスタマイズ_サイトロゴ設定 ここから */
/* ロゴ画像の最大サイズ */
.sitename img {
	max-width: 300px;
        width: 220px;
        height: 40px;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
}
/*　20XXXXXX_カスタマイズ_サイトロゴ設定 ここまで */

「style.css」で「/* */」の記載内容は、サイトに反映されない内容になるので、「header.php」と同じく「変更時の日付」「変更内容」などのメモを残しておくと、コードを見返すときに便利になります。（無くても反映されます。）

「width」にロゴ画像の横幅、「height」にロゴ画像の縦幅を指定しましょう。

STINGERテーマでは、サイトタイトル画像の横幅が最大「300px」と指定されていますが、ロゴ画像の横幅が「300px」を超える場合、「max-width」の値を300px以上に変更してください。

このままの状態だと、スマートフォンでは変更内容が反映されているのですが、スマートフォン以外では反映されていないので、「style.css」内の下記コードも変更します。

▪︎変更箇所（変更前）

header {
	text-align: left;
}
.sitename img {
	max-width: 300px;
	margin: 0;
}

▪︎変更箇所（変更後）

/*　20XXXXXX_カスタマイズ_サイトロゴ設定 ここから */
header {
    text-align: center;
}

.sitename img {
    width: 220px;
    height: 40px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
/*　20XXXXXX_カスタマイズ_サイトロゴ設定 ここまで */

スマートフォン以外でもタイトルのロゴ画像を中央表示にしたいので、「text-align」は「center」と記載しています。

画像のサイズ指定については、1箇所目の変更内容と同じように変更します。

これでサイトタイトルをロゴ画像・中央表示に変更する作業は完了です。

コードの変更内容が反映されない場合

コード内容を変更してもうまく反映されない場合、下記の内容を確かめてみてください。

ブラウザに変更前のキャシュが残っている

コード内容が正しく反映されていても、ブラウザに変更前のキャシュが残っている場合、ブラウザに反映されていないことがあります。

ページの読み込みを再度おこなう、ブラウザのキャッシュを削除する、別のブラウザで見てみるなどの手段を試してみてください。

STINGERテーマの「テーマカスタマイザー」が残っている

STINGERテーマの場合、デフォルトでは「function.php」内に「テーマカスタマイザー」のコードが記載されています。

このコードがある場合、「style.css」の変更内容が一部反映されないことがあるので、親テーマの「function.php」内にある下記のコードを削除してください。

//テーマカスタマイザーで編集しない方は削除して下さい（ここから）
 
function stinger_customize_register($wp_customize) {
 
$wp_customize->add_section( 'stinger_logo_image', array(
'title' => 'ロゴ画像',
'priority' => 10,
) );
 
〜〜〜〜〜　省略　〜〜〜〜〜
 
</style>
<?php
    }
    add_action( 'wp_head', 'stinger_customize_css');
 
//カスタマイザーで色を設定しない方は削除して下さい（ここまで）

【参考】WordPress 子テーマのメリットと作成方法（「子テーマ作成時の注意点」箇所）