【STINGER8】サイトタイトルを中央に配置して画像に変更する方法

「STINGER8」のテーマのデフォルトでは、サイトタイトルが左寄せとなっています。
他の有料テーマでは中央にサイトタイトルがあるものも多く、同じように中央に配置したいと考える方もいらっしゃるのではないでしょうか。

今回はこの問題を解消するために、サイトタイトルを中央寄せするカスタマイズを行っていきます。
中央に配置ができたらサイトタイトルのデザインまで変更するために、タイトルを画像に変更するカスタマイズ方法もお伝えしていきます。

スポンサーリンク

サイトタイトルを中央に配置する方法

サイトタイトルの配置はCSSで変更できるため、まずは編集場所に移動しましょう。

スタイルシートへの移動

①管理画面から「外観」>「テーマの編集」をクリック。
②テーマファイルの中から「スタイルシート(style.css)」をクリック。

編集するスタイルシートは子テーマ(STINGER8 Child)となりますので、間違えのないようにして下さい。
※編集は必ずバックアップを取ってから行って下さい。

タイトルの中央寄せ

スタイルシートの最下部に下記のコードを追記します。

/*– サイトタイトルの中央寄せ –*/

#header-l {
text-align: center;
float: none;
max-width: initial;
}

これでサイトタイトルが中央に変更されました。

※ブラウザで確認した時に反映されていない場合は、ブラウザの履歴を削除してからもう一度試してみて下さい。

タイトルを画像に変更する方法

ここではサイトタイトルを画像に変更する方法をお伝えしていきます。

画像の用意

まず始めにタイトル画像を用意する必要があります。
AdobeのIllustratorやPhotoshopなどの、画像編集ソフトを使用して画像を作成しましょう。

今回はIllustratorを使用してフォントを変更しただけの簡単な画像を作成しました。

画像のアップロード

画像が用意できたらワードプレスへアップロードを行います。

①管理画面から「メディア」をクリック。
②メディアライブラリの画面で「新規追加」をクリック。
③ファイルを選択してアップロード。

この手順で画像のアップロードが完了しました。
次にアップロードした画像をクリックして、画像のURLを確認しておきます。

「URL」という場所があるので、ここにあるURLをコピーしておきましょう。
※画像のURLはタイトルを画像に変更する上で必要になります。

タイトルを画像に変更

最後にタイトルを画像に置き換えるためにPHPファイルを編集していきますので、対象のPHPファイル(header.php)の場所へ移動します。

①管理画面から「外観」>「テーマの編集」をクリック。
②編集するテーマを「STINGER8」に変更して「選択」をクリック。
③テーマファイルの中から「テーマヘッダー(header.php)」をクリック。

これで編集対象の「テーマヘッダー(header.php)」へ移動ができました。
編集するPHPファイルは親テーマ(STINGER8)となるので、間違いのないようにして下さい。
※編集は必ずバックアップを取ってから行って下さい。

テーマヘッダー(header.php)の中から下記のコードを探します。(46行目)

<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>

このコードを下記のコードに置き換えます。

<img src=”タイトル画像のURL“>

「タイトル画像のURL」には先ほどアップロード後にコピーした画像のURLを入力して下さい。
変更ができたらファイルを更新します。

これでサイトタイトルが画像に変更されました。

今回の画像は300×60pxで作成しているため、若干大きい気はしますがひとまず完成です。
この数値を参考に大きくしたい場合や小さくしたい場合などは、アップロードする画像のサイズを調整して行ってみて下さい。

以上、「サイトタイトルを中央に配置して画像に変更する方法」でした。

オススメ【初心者向け】WordPress学習におすすめしたい3冊の本

オススメ【収益化】おすすめのアフィリエイトASP5選【すべて登録でOK】

コメントを残す

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

CAPTCHA