「Simplicity」でサイトタイトル・テキスト横にロゴ画像を表示させる方法

「Simplicity」でサイトタイトル・テキスト横にロゴ画像を表示させる方法

 

こんにちは bibaです。

お気付きのようにWordPressのテーマをSimplicityにしました。

これまで使っていたmodernizeと同じようにサイトタイトル横にロゴを表示することができたので、その方法(手順)について備忘録として書いておくことにします。

Simplicityとmodernizeではロゴ画像の意味が違う

ブログテーマSimplicityの場合、カスタマイザー機能を使うことで、ヘッダーにロゴ画像の表示することができます。便利ですね。

ただ、その仕様がmodernizeとは異なります。modernizeの場合は、サイトタイトルのテキスト表示はそのままにした状態で、その横にロゴ画像を表示することができます。ところが、Simplicityのカスタマイザーではそれができません。

Simplicityの場合は、ロゴ画像を設定すると、それがタイトルテキストの代わりに表示されてしまいます。

つまり、テキストとして表示されている部分がなくなり、すべて画像になって表示されてしまうのです。

別にこれで問題ないという方は少なくないのかもしれません。

でも、modernizeを使っていた私は、Simplicityでも同じような形式でタイトルテキストはそのまま生かした上で、その横に画像を表示したいと思ったのです。

テキスト横にロゴ画像を表示する方法

早速、調べてみましたが、Simplicityのカスマイザーが優秀なので、最初はそれを使った説明しか見つけることができませんでした。何回か検索キーワードを変更して調べた結果、同じことに取り組んだという記事が見つかりました。ありがたいですね。

WP【テーマ:Simplicity】のサイトタイトル横に画像を表示。 – 原始人みかこのIT奮闘記

この記事を参考にして、作業に取り組みました。

まず、エディターを開いて、このような記述を行います。「あなたのサイトURL」と『表示したい画像URL」は、それぞれにあてはまるURLを書きます。

参考にした記事のままだと画像がタイトル上に表示されるので、表示位置と、画像の大きさを指定する記述を追加しています。「**」のところは適当な数字を入れてください。

あとは、このエディターで作成した記述を、参考記事に書いてあるようにheader.php の<body>の中でサイトタイトルの表示設定が書かれているの次の分の下に貼り付けます。

作業は以上です。

本当は、タイトルテキストはセンタリングしたままにしておきたかったのですが、カスタマイザーでタイトルをヘッダー中央に表示するとロゴ画像の位置を思いどおりにすることができなかったので、今回は左寄せにしてあります。この辺のところは、もう少し調べた上で改善できるようにしたいと思っています。

とりあえず、タイトルテキスト横にロゴ画像の表示ができてよかったです。