初心者おばちゃんもできた!WordPress(ワードプレス)講座

ワードプレスでブログを始めませんか?テーマSTINGERなど。おばちゃんのカスタマイズ保存版

[STINGER3]ワードプレスのヘッダー画像と背景色の変更方法

      2015/04/15

stinger3でワードプレスヘッダー画像と背景色の変更

今回は、いよいよワードプレスのテーマSTINGER3のカスタマイズです。

◆今回行う事◆

● ヘッダー画像の変更

● 背景色の変更

この2つを行います。

※ダウンロードはSTINGER公式サイト様で→http://stinger3.com/

スポンサーリンク

STINGER3のヘッダー画像を変更する

現在のサイトの状態を確認しましょう

まずは、現在の状態を確認してみましょう。

ダッシュボード左上の「サイトタイトル」をクリックします。

ワードプレスダッシュボード

サイトが表示されます。

[stinger3]ワードプレスヘッダー画像変更

現在、STINGERのヘッダー画像になっているところを「オリジナル」のヘッダー画像に変えていきます。

また、グレーの背景にも色を付けてみましょう。

 

STINGER3のヘッダー画像のサイズの確認

現在stinger3で表示されているタイトル画像のサイズは、

幅:986px
高さ:150px

です。画像の高さは、後で自由に変えることができますよ。

今回は練習として、このサイズでヘッダー画像を変更する練習をしてみましょう!

 

サイトのヘッダー画像を作る練習

↓下のサムネイル画像をクリックして原寸大表示にします。

サンプルバナー(986×150の画像です)

 

[stinger3]ワードプレス タイトルヘッダー画像変更

原寸大の画像が表示されたら、画像の上で右クリック。「名前を付けて保存」をします。

 

ペイントでタイトルバナーを作ってみましょう

パソコンでペイントなどのソフトを開き、先程保存した「sample.gif」を開きます。

ペイントの使い方

写真などの画像を入れる場合は、「貼り付け」「画像から貼り付け」を選びます。

ペイントの使い方

画像の角をドラッグでサイズ変更をします。

ペイントで写真を入れる

上下の□をドラッグで、カンバスのサイズを変更します。

ペイント カンバスのサイズ調整

文字の入力は「A」ボタンをクリックします。

ペイント文字入れ

色や書体なども変更できます。

ペイント文字編集

完成したら、「名前を付けて保存」をします。

ペイント名前を付けて保存

 

「名前」は半角英数なら何でもOKです。(「上書きしてもOK」)
私は「sample1.gif」と付けました。(gif,jpg,pngどれでもOKです)

ヘッダー画像制作は完了です!

 

STINGERのヘッダー画像に表示させる手順

ヘッダー画像の変更

ダッシュボードの「外観」「ヘッダー」をクリックします。

 

「カスタムヘッダー」のページが表示されます。

[stinger3]ワードプレスヘッダー画像の変更

「ファイルの選択」をクリックします。

先程作ったヘッダー画像ファイルを選択し、「アップロード」をクリックします。

[stinger3]ワードプレスヘッダー画像変更

「ヘッダー画像のトリミング」が表示されます。

[stinger3]ワードプレスヘッダー画像との変更

ピッタリサイズなので「トリミングをせず、このまま画像を公開する」を選びます。
(大きい場合は「切り取って公開する」を選んでもOK!)

変更を保存

「変更を保存」をクリックします。

これでヘッダー画像の設定は完了です!

 

サイトの背景色を変える

背景の色を変える手順

グレーの背景を別の色に変えてみましょう。

[stinger3]ワードプレス背景色の変更

ダッシュボードの「外観」-「背景」をクリックします。

 

「カスタム背景」のページが表示されます。

ワードプレス背景色の変更

下の方にある「色を選択」をクリックします。

 

「表示オプション」が表示されます。

ワードプレス背景色の変更

調節しながら好きな色を選びます。

変更を保存

「変更を保存」をクリックします。

これで背景色の変更も完了です!

 

サイトで確認をする

ヘッダー画像と背景色が変わっているか確認してみましょう。

wp35

そのまま上部の「サイトを表示」をクリックします。

 

サイトが表示されました。

wp47

雰囲気が変りましたね

みなさん素敵にアレンジしてみて下さいね。

これで、ヘッダー画像と背景色の変更の完了です!

お疲れ様でした!

 

おわりに

みなさん、無事に画像と背景色の変更ができましたでしょうか?

わかりにくいところがあればご連絡下さいませ~

 

ついでに・・・文字を乗せるだけで、タイトル画像になるバナーを作ってみました♪

STINGERヘッダー画像素材

練習用にでもどうぞ

次回はWordPressの「プラグイン」についてご説明します。

それでは、本日もありがとうございました!

 

次の記事です→ワードプレスの初期プラグインとインストール方法

 

 - サイトを作る手順, STINGER , , ,

  • このエントリーをはてなブックマークに追加
  • Pocket

Message

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

  関連記事

ワードプレスで最初に行う設定と手順 サイトタイトルの変更
WordPressサイト作成の手順 タイトル・キャッチフレーズの変更

みなさん、ワードプレスは無事インストールできましたでしょうか? 今回は、ワードプ …

STINGER3 基本的なカスタマイズ
[初心者]STINGER3の基本的なカスタマイズ

スポンサーリンク このページの目次1 STINGER3 テキスト色や装飾の変更1 …

WordPressのウィジェットの設定と削除方法
WordPressのウィジェット設定と削除方法

今回はWordPressのウィジェットの設置方法についてご説明します。 ◆ウィジ …

FeedlyボタンとRSSボタンを並べて設置する方法は?
FeedlyボタンとRSSボタンを並べて設置する方法は?

今回は、以前から付けたいと思っていたFeedlyとRSSのボタンの設置方法です。 …

WordPress 記事を投稿しよう
WordPress 新規投稿記事の作成方法は?

サイトを作る手順の最後は、記事の投稿の方法についてご紹介します。 スポンサーリン …

STINGER5
STINER5インストールとカスタマイザーで色のカスタマイズ

とうとう、STINGER3からSTINGER5にバージョンアップを行いました。 …

STINGER3 ウィジェット広告の設置方法と配置は?
STINGER3 ウィジェット広告の設置方法とサイトの配置は?

前回のウィジェットの設定方法の続きで第2回目となります。 今回はワードプレスのテ …

snsボックス
【Stinger3】SNSボックスを縦に トップページ以外は非表示にする

お世話になっているStinger3で、少し気になるところと言えば、追尾してくるS …

[初心者]ワードプレスのテーマSTINGER3をインストールする
[初心者]ワードプレスのテーマSTINGER3をインストールする

今回は、ワードプレスにテーマを設定してみましょう。 スポンサーリンク このページ …

[初心者]絶対インストールしたい&便利・使えるプラグインはコレ!

[初心者]ワードプレスの初期プラグインとインストール方法の続きの記事となります。 …