みそごろうの田舎起業ブログ

Wordpress

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

投稿日:2014年10月 更新日:

screenshot_20141010_184137

 

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

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

 

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

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

 

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

 

 

ファビコンを変えてみた

 

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

screenshot_20141010_183702

 

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

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

 

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

screenshot_20141010_185303

 

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

screenshot_20141010_185337

 

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

<変更前>

<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">

 

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

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

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

 

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

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の最後に以下のコードを追記しましょう。

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

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

STINGERヘッダー7

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

STINGERヘッダー9

 

みそごろうメルマガ

-Wordpress

執筆者:


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

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

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

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

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

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

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

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

  9. […] 参考にしたサイトはこちらhttp://netbiz-kigyo.com/3184.html 運営者さんありがとうございました( ´▽`*) […]

comment

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

関連記事

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

  詳しくはこちらを見てください! →リンク リンクをクリックしてみると、「ページは存在しません」。   これは、悲しいですね。 何だかハズレくじを引いたみたいで、悲しい気持ちにな …

BackWPupでWordPressブログを手動バックアップする方法

  万一に備える。 WordPressブログ運営者にも備えは必要です。   せっかく時間をかけて作り上げたブログが壊れた。 操作を間違ってブログを削除してしまった。   …

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

「PS Auto Sitemap」の設定をしたのに表示されない。。 下の画像のようになった場合は、うまく表示されていません。 そういう時はまず手順を確認しましょう。 「PS Auto Sitemap」 …

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

昨日、いきなりこのブログが「このウェブページにアクセスできません」となり、全く表示されなくなりました。管理画面(ダッシュボード)にもログインできません。 結局原因は灯台下暗し的な結果だったのですが、同 …

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

このブログのテーマをSTINGER5に変更してから2ヶ月余り。その間で見えてきたSTINGER5の効果についてまとめます。   書いても書いてもアクセスが集まらない… 2014年10月、ブロ …

■プロフィール:みそごろう

元日立系のシステムエンジニア。
脱サラして東京から妻子とともに田舎へ。

自己投資に累計1000万円以上つぎ込み、ネットビジネスで起業を決意。子供に仕事内容を堂々と話せる「健全なネットビジネス」を第一に実践中。

完全に0から、月収10万→150万→今ではサラリーマンの年収をゆうに超える月収を稼ぐまでに。不動産などの投資実践もしながら、田舎で家族とストレス軽めな生活を送っています。

■ネットビジネスの実績
2014年:ブログで月収11.8万円
2015年:メルマガで月収150万
2016年:年収1000万以上

■指導実績
月収50万以上…1名
月収20万以上…4名
月収10万以上…多数+妻

follow us in feedly

・強力な媒体×100記事未満で月10万稼ぐ術
・3年間のノウハウコレクターから
 10万→150万と一気に駆け上がったワケ
・Yahoo!に掲載される良質メディアを作る術

これら全てを無料メール講座に登録して手に入れて下さい。500ページを超えるマニュアルもプレゼント中。