記事内にアフィリエイト広告を使用している場合があります。

スティンガー8

インパクト大!STINGER8のブログタイトルをロゴ画像に変更する方法

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ワードプレス(WordPress)でSTINGER8を使用されている方は、テンプレートの機能を使ってヘッダー部分にナビゲーションメニューを追加したり、画像を入れたりすることができます。

 

ただ、テンプレート機能だけではブログタイトルなどのフォントサイズや配置を変更することができないので、デフォルトのままだと少しインパクトが足りず、ブログ訪問者の方に印象付けることができないかもしれません。

 

そこで自分のブログやサイトのことを一発で覚えてもらう為に、タイトル部分をインパクトのある「ロゴ画像」にカスタマイズしましょう。

ロゴ画像にカスタマイズするには「CSS」を編集する必要があるので、その方法をわかりやすくご紹介していきます。

カスタマイズする為の前準備

カスタマイズを行う前にまず、「STINGER8 Child」の子テーマに親テーマの「テーマヘッダー(header.php)」のコードをコピーしておきます。

コピーする方法は「FTPソフト」を使って、header.phpファイルを子テーマにアップロードすることができます。

 

次にブログタイトル用のロゴ画像を用意する必要があるので、無料の「ロゴ作成ジェネレーター」などを使って作成しておきましょう。

ロゴ画像を作成したらFTPソフトを使って、「STINGER8 Child」のフォルダ内にある「images」ファイルに、アップロードしておきます。

 

header.phpのコピーとロゴ画像のアップロードまで完了したら、ワードプレスでカスタマイズを開始します。

 

タイトルをロゴ画像にカスタマイズする方法

STINGER8のヘッダー部分に表示されるブログタイトルは、「タイトル名」「キャッチフレーズ」を設定していれば以下のように表示されます。

 

 

かなりシンプルでいいのですが今ひとつパッとしませんので、これを子テーマのheader.phpにあるCSSコードをカスタマイズして、インパクトのあるロゴ画像に変更していきます。

 

header.phpのCSSコードを編集

ワードプレスの管理画面左メニューにある「外観」⇒『テーマの編集』をクリックします。

 

 

子テーマ「STINGER8 Child」のテンプレート項目にある「テーマヘッダー(header.php)」を選択して、「<!– ロゴ又はブログ名 –>」で始まる以下のCSSコードを探します。

 

<!-- ロゴ又はブログ名 -->
<p class="sitename">
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
		<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
	</a>
</p>
<!-- ロゴ又はブログ名ここまで -->

 

見つかったら4行目の「<?php echo esc_attr( get_bloginfo( ‘name’ ) ); ?>」というコードを、以下のコードに書き換えます。

 

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/画像ファイル名.png">

 

「画像ファイル名」の部分は、ロゴ画像を保存した時につけたファイル名のことです。(例:logo01など)

 

ファイル名が間違っていると画像が正しく表示されないので、その時は入力に誤りがないか確認するようにしましょう。

先程のCSSコードを書き換えると以下のようなコードになっていると思います。

 

<!-- ロゴ又はブログ名 -->
<p class="sitename">
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
		<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/画像ファイル名.png">
	</a>
</p>
<!-- ロゴ又はブログ名ここまで -->

 

後は『ファイルを更新』をクリックすると、ブログタイトルが指定したロゴ画像に変更されます。

 

 

ロゴ画像に変更したことでブログイメージがガラリと変わりましたが、画像サイズやヘッダーの背景色、配置の調整などをカスタマイズしたい場合はこのまま編集を続けましょう。

 

ロゴ画像(ブログタイトル)をカスタマイズ

ロゴ画像(ブログタイトル)のカスタマイズとして、「配置を中央寄せ」「ヘッダー背景色変更」「画像サイズ変更」「キャッチフレーズ非表示」の方法をご紹介します。

なお、CSSコードの編集をしていきますがここで編集するコードに関しては、子テーマ「スタイルシート(style.css)」の方に記述して下さい。

 

また、CSSコードが正常に反映されない場合は、キャッシュの削除(閲覧履歴の削除)を行ってから再度更新してみて下さい。

 

配置を中央寄せにする

既存の状態ではタイトルが左寄せとなっていて、右側にスペースが空いてしまっているのでこれを中央に寄せて均等にする為、以下のコードをコピーしてstyle.cssに追加します。

 

/*-- タイトルの配置 --*/
#header-l {
float: none;
text-align: center;
}

 

「center」の部分を「left」「right」に変更すれば左寄せや右寄せにすることも可能です。

テーマを更新するとタイトルが中央に移動しています。

 

 

ヘッダー部分の背景色を変更する

今のままだとロゴ画像の背景とヘッダーの背景が違うので、統一する為にロゴ画像の背景色に合わせます。

 

STINGER8のテンプレート機能でも背景色をカスタマイズできますが、ブログ内全体の背景が変わってしまうので、以下のCSSコードでヘッダー部分のみを変更します。

 

/*-- ヘッダーの背景色 --*/
#headbox-bg {
background: #ffffff;
}

 

「#ffffff」の部分が色コードになっているので、ここを変更すれば任意の配色にすることができます。

テーマを更新すると指定の配色に変更されます。

 

 

ロゴ画像のサイズを変更する

キャッチフレーズのフォントサイズと比較すると少しサイズ差があるので、以下のコードでロゴ画像のサイズを小さくします。

 

/*-- タイトルロゴのサイズ --*/
.sitename a img{
    width: 400px;
}

 

「400px」の部分がサイズになるので好きな数値に変更して拡大縮小ができ、「pxを%表記」にして表示することも可能です。

設定の更新でロゴ画像が縮小されます。

 

 

キャッチフレーズを非表示にする

キャッチフレーズが必要ない場合は、ワードプレスの一般設定で記入している内容を空白にすれば表示されませんが、それではSEO的にあまりよろしくありません。

なので以下のコードを追加して、キャッチフレーズを記入したまま非表示にします。

 

/*-- キャッチフレーズの非表示 --*/
#header-l .descr {
display: none;
}

 

設定の更新でキャッチフレーズが非表示になります。

 

 

まとめ

ブログのタイトルをロゴ画像にカスタマイズするだけで、一気にオリジナリティが出るので他のユーザーと差別化を図ることができます。

ブログタイトル、ヘッダーはサイト訪問者が一番目にする部分ですし、ここが寂しいデザインだと第一印象で負けてしまいます。

 

今回の方法であれば簡単に独自性のあるカスタマイズが可能なので、手っ取り早く設定したい方はぜひ試してみて下さい。

こちらも読まれています

ABOUT ME
フリ
ブログで気になることをただひたすらに書き続けて、10ヶ月目で月間10万PV超えを達成。2018年5月から個人事業主として活動開始。今は資産運用に注力し、投資歴は5年になる。仮想通貨⇒DeFi・BCG・エアドロ案件など。BTC・ETHとNISAで積立中。自由であるために。to be free>>詳細プロフィール