ネットビジネスで起業して稼ぐ!30代妻子持ちが脱サラ田舎暮らし

田舎ネットビジネス起業家みそごろうのブログ

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

      2014/11/13

screenshot_20141010_184137

 

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

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

 

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

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

 

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

 

 

ファビコンを変えてみた

 

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

screenshot_20141010_183702

 

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

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

 

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

screenshot_20141010_185303

 

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

screenshot_20141010_185337

 

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

<変更前>

 

<変更後>

 

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

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

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

 

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

screenshot_20141011_120231

 

 

ヘッダー画像の変更

 

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

screenshot_20141011_163527

 

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

screenshot_20141011_163708

 

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

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

 

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

 

screenshot_20141010_183533

 

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

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

 

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

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

STINGERヘッダー1

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

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

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

STINGERヘッダー2

ロゴ画像を選択。

STINGERヘッダー3

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

STINGERヘッダー4

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

STINGERヘッダー5

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

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

STINGERヘッダー8

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

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

STINGERヘッダー6

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

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

STINGERヘッダー7

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

STINGERヘッダー9

 

みそごろうメルマガ

いいね!すると、ゆる~いつぶやきが届きます。
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 23 follow us in feedly

 - Wordpress

Comment

  1. […] 参考は⇒「自分に正直になりませんか」さんのサイトを見てやってみました。 […]

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

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

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

  5. […] ていたんですが、画像内にタイトルが入ったようなのにしたくてSTINGER5ファビコンやヘッダー画像をカスタマイズする方法 を参考にさせていただきました。 かなり初心者の私にもわかり […]

  6. […] ていたんですが、画像内にタイトルが入ったようなのにしたくてSTINGER5ファビコンやヘッダー画像をカスタマイズする方法 を参考にさせていただきました。 かなり初心者の私にもわか […]

  7. […] STINGER5ファビコンやヘッダー画像をカスタマイズする方法 | ネットビジネスで起業して稼ぐ!30代妻子持ちが脱サラ田舎暮らし スポンサードリンク […]

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

STINGER
PV数35倍の効果!STINGER5テーマ変更後のアクセス数とSEO対策全暴露

このブログのテーマをSTINGER5に変更してから2ヶ月余り。その間で見えてきた …

GoogleXMLSitemaps
「Google XML Sitemaps」でWordPressブログのサイトマップを設定する方法

ブログを作ったら必ずやっておきたいのが、XMLサイトマップの対応。 サイトマップ …

ea38f20a57a623e9323df706063cf34a_s
「Broken Link Checker」はリンク切れエラーチェックプラグイン!ただし重いかも

  詳しくはこちらを見てください! →リンク リンクをクリックしてみる …

エラー画面
【WordPress】このウェブページにアクセスできません!DNSエラーか

昨日、いきなりこのブログが「このウェブページにアクセスできません」となり、全く表 …

web-401497_640
STINGER5グローバルメニューの文字サイズや色、反転表示をカスタマイズする方法

  STINGER5テンプレートに変更して2日目。   ヘッ …

pencils-447481_640
STINGER5サイドバートップにプロフィールを!並び順の変更方法

  WordPressテンプレート「STINGER5」を導入して、 ど …

designate-427537_640
「P3 Plugin Performance Profiler」でブログが重い原因を調査・特定する

  ブログが重い。。   WordPressは”プラグイン” …

egg-timer-447203_640
GoogleAnalyticsが突然ゼロに!原因はテンプレート変更かも

  アクセス解析に「GoogleAnalytics」を利用していますが …

sitemap
「PS Auto Sitemap」でWPブログへサイトマップを設定する方法

ブログっていつも思うのですが、どこにどんな記事があるのかよく分かりません。 元々 …

表示されない
「PS Auto Sitemap」が表示されない!原因・対策方法まとめ

「PS Auto Sitemap」の設定をしたのに表示されない。。 下の画像のよ …

Topへ戻る