いつも大変お世話になっております、そうすけ(@sosuke14jp)です。

当ブログはWordPress用のテーマ「Stinger3」を利用しておりますが、初心者なりにチョコチョコとカスタマイズを行なっております。

そんな中で比較的はじめに行なったことの中にブログタイトルをヘッダー画像に置き換えるというものがあったのですが、これについてお知り合いの方何名かから「やり方を教えて欲しい」的なことを言われました。

なので今回は自分の備忘録も兼ねて、ブログタイトルをヘッダー画像だけにする方法を書き残しておきたいと思います。

SPONSORED LINK

完成イメージによっていじり方が変わる

Stinger3では、初期設定だとブログのヘッダーに「ブログタイトル(文字)」「ブログ情報(文字)」「ヘッダー画像が表示されるようになっています。

Stinger3初期設定のヘッダー表示

まず主な作業手順についてですが、そうすけはこちらの記事を参考にさせていただきました。

WordPressのテーマ「Stinger3」のサイト名をテキストから画像に変更する方法|IT便利帳

作業の流れは本当にこちらの記事に書かれている通りになります。ただし本当にそのままに行なってしまうと、そうすけにとってはひとつ問題がありました。それはブログタイトル(文字)だけでなく、ブログ情報(文字)も消えてしまうということです。

参考にさせていただいた記事では、どうやらヘッダー画像にブログ情報も収めてしまっているようなので問題はないのですが、そうすけはこのブログ情報は文字で残したかったのです。そこでヘッダー(header.php)のソースコードのいじり方だけ少し変えることにしました。

ヘッダー(header.php)の中に次のようなコードが書かれている箇所があります。

これを次のように置き換えます。

そうすると、このようにヘッダー画像+ブログ情報という望み通りの表示がされるようになりました。

ヘッダー画像+ブログ情報に変わった

これでバッチリですね!

そうすけは思った

ソースコードにも少しずつ手を付けられるようになると、ブログもより自分好みに変えていくことができますし、それによって愛着も増していきますよね。そうすけはソースコードをいじることが結構性に合っているみたいです。触っていてとても楽しいです。

ただし作業前には必ず元データのバックアップを取るようにしましょう。バックアップは、元のソースコードを全範囲コピーして、パソコン上のメモ帳などに貼り付けておくだけでも良いと思います。何かあった時に自分で普及できるような準備は事前にきちんとしておきましょう!これをせずに何度焦ったことか・・・(笑)

これからもどんどんブログデザインをカスタマイズして、もっともっと見やすく、そして自分好みのデザインになるようにしていきたいと思います。

以上、何卒よろしくお願い申し上げます。