ヘッダーを画像を表示し、サイトタイトルを非表示にしました – こつこつライフ.com

カスタマイズ ワードプレス

ヘッダーを画像を表示し、サイトタイトルを非表示にしました

投稿日:

ワードプレスを導入して「STINGER」のテーマをインストールした直後は、ヘッダー部分に大きな「STINGER」のロゴが表示されていました。

色々決まるまでとりあえずその画像を非表示にしておりましたが、載せる画像の用意ができたので、そちらを反映してみました。

用意したヘッダー画像を表示する

ダッシュボード → 外観 → ヘッダー と進み、用意した画像をアップロードして、サイトにヘッダー画像を表示することができました。

ヘッダー画像挿入

画像は自分で好きに作成したかったけれどその技術がまだないので、フリーの画像素材とロゴ作成を利用しました。こちらは別記事でご紹介できればと思います。

ダッシュボード → 設定 → 一般設定 でサイトのタイトルを入力しているのでサイトに表示されていますが、画像内にタイトルを入れたので、文字のタイトルは非表示にしたいと思いました。(設定でのタイトルは入力したままで、それを非表示にする方法です)

色々調べたところ、難しい編集だったり、やってみても全然反映されなかったりでしたが、試行錯誤の上見つけた方法は、わりとシンプルなものでした。

header.phpの構成について理解する

ひろ さんのブログを参考にさせていただきました↓

STINGER|ブログのタイトルを消してヘッダー画像だけに変更する方法!

情報源: STINGER|ブログのタイトルを消してヘッダー画像だけに変更する方法! | てきとーだろ?

「STINGERはデフォルト状態だと、タイトル+ヘッダー画像みたいな構成」とありましたが、まさにそのとおりでした。

  1. ブログタイトル
  2. ブログの説明
  3. ヘッダー画像
  4. メニュー

上のような構成のうち、私が非表示にしたいのは「1.ブログタイトル」です。

編集手順

ダッシュボード → 外観 → テーマの編集

子テーマを用意していますので、子テーマの中の「header.php」を編集します。

headerphp編集

使用しているテーマでは「ロゴ又はブログ名」とコメントアウトで補足が書いてあったので探しやすかったですが、以下の部分を消すことにより(または非表示)、サイトタイトルが非表示になりました。

スマホでも確認しましたが、こちらの表示も特に問題なかったので追加作業は無しです。

スパホトップイメージ

まだまだ勉強中ですが、参考になればと思います。