STINGER5ファビコンやヘッダー画像をカスタマイズする方法

 

最近、WordPressテンプレートではデフォルトスタンダードに

なりつつある、STINGERを当ブログにも適用してみました。

 

さすがに、標準設定のままだとヘッダーがイマイチなので、

カスタマイズが必要です。

 

ヘッダー部分のカスタマイズの模様をここでご紹介しておきます。

 

 

ファビコンを変えてみた

 

STINGER5の標準ファビコンはこんな感じ。

 

一目でSTINGER5だと分かってしまいます。

ちょっと面白くないので、変えてみましょう。

 

ダッシュボードから外観→テーマの編集を選択します。

 

画面右からヘッダー（header.php）を選択。

 

コードを以下のように変更します。

＜変更前＞

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

 

＜変更後＞

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<!-- ファビコンカスタマイズ -->
<link rel="shortcut icon" href="ファビコンのURLをここに記載" />

<!--　ファビコンカスタマイズのためコメントアウト
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />
-->

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

 

念のため、元々あった記述はコメントアウトして残しておきました。

不要な方は、「ファビコンカスタマイズのためコメントアウト」

の部分を削除しちゃって構いません。

 

ファビコンが変わりました。

 

 

ヘッダー画像の変更

 

ダッシュボードの「外観」→「ヘッダー」を選択します。

 

赤枠の「ファイルを選択」からヘッダー画像をアップロードします。

 

ちなみに、おすすめとされているヘッダー画像のサイズは、

横幅：980px、高さ：250pxです。

 

画像をアップロードして、「変更を保存」ボタンを押すと、画像が変わりました。

 

 

ヘッダーはブログで最初に目に入る重要な部分です。

ブログの第一印象をよくするために、ヘッダー画像の変更をオススメします。

 

追記：ブログタイトルを画像にする方法

標準では、ヘッダー画像を入れてもブログタイトルは残ります。

これが邪魔だと感じる人もいるでしょう。

消す方法は、ヘッダーではなくロゴに画像を設定します。

ダッシュボードの外観から「カスタマイズ」を選択します。

ロゴ画像を選択。

画像ファイルをアップロードします。

画面上の「保存して公開」を押します。

これでロゴ画像として設定されました。

しかしこれだと画像が小さい状態のままです。

スタイルシートを変更して大きくしましょう。

ダッシュボードの外観の「テーマ編集」を選択します。

style.cssの最後に以下のコードを追記しましょう。

/* ロゴ画像の最大サイズ */
.sitename img {
  max-width: 100%;
}

このコードはシスアナコムさんの記事を参考にさせて頂きました。ありがとうございます！

ファイルを更新すれば画像が大きくなります。